Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + X: Best practices for reusable UI compo...

React + X: Best practices for reusable UI components

Slides for my talk at the ReactJS meetup at Coursera on August 18, 2016.

The talk was recorded, so a link to the video is coming shortly!

https://www.meetup.com/ReactJS-San-Francisco/events/231692157/

Mars Jullian

August 18, 2016
Tweet

More Decks by Mars Jullian

Other Decks in Programming

Transcript

  1. 1 React plus X Mars Jullian Senior UI Engineer Best

    practices for reusable UI components.
  2. 2 Hi, I’m Mars. Senior UI Engineer @ I like

    reusable UI components (a lot).
  3. 3 The challenge. • 2 products —> 3 identical dashboards.

    • Breaking out of the monolith —> different teams working on each dashboard —> different frameworks & build systems. • Brand & UX consistency —> Share & maintain the design & functionality across codebases easily.
  4. 8 React & Us • JSX / no templates —>

    less files per component • State & Props —> UI components can be independent of data source but still have full control over interactions. • Easily ported into different frameworks
  5. 10

  6. 11

  7. 13

  8. 14

  9. 16

  10. 17

  11. 18

  12. 19

  13. 20