Building React Component Library (Meetup Edition)

Building React Component Library (Meetup Edition)

Video recording: https://www.youtube.com/watch?v=qtu11dPWBhI

React provides a great foundation for building and implementing reusable components, that whole team (and community) could greatly benefit from. But to make the code actually reusable, it should be properly presented and documented.
Robert will guide you through the key patterns of building React components library with proper navigation, rendered examples sandbox and API description.

Bad3e55f0b96b80bc4ffb40d1c1414dc?s=128

Robert Haritonov

November 19, 2015
Tweet

Transcript

  1. Robert Haritonov @operatino BUILDING REACT COMPONENT LIBRARY

  2. Front-end Lead at Liberty Global

  3. Author of the Style Guide Platform

  4. None
  5. WHAT IS A COMPONENT LIBRARY

  6. A set of re-usable modules Searchable library Rendered examples and

    docs
  7. None
  8. None
  9. Material UI Belle Elemental UI React Components (collection)

  10. None
  11. COMPONETIZING THE WEB

  12. None
  13. PATTERNS

  14. SMART DUMB CONTAINER COMPONENTS

  15. // CommentListContainer.js class CommentListContainer extends React.Component { constructor() { super();

    this.state = { comments: [] } } componentDidMount() { $.ajax({ url: "/my-comments.json", dataType: 'json', success: function(comments) { this.setState({comments: comments}); }.bind(this) }); } render() { return <CommentList comments={this.state.comments} />; } }
  16. // CommentList.js (Dumb component) class CommentList extends React.Component { constructor(props)

    { super(props); } render() { return <ul> {this.props.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
  17. and...

  18. I want you to take a moment and forget everything

    you know about web development. Keep an open mind. - Christopher Chedeau @vjeux
  19. CSS IN JS FOR ISOLATED WIDGETS AND COMPLEX UI'S

  20. // Radium example return ( <div> <div key="one" style={[styles.both, styles.one]}

    /> <div key="two" style={[styles.both, styles.two]} /> </div> ); var styles = { both: { background: 'black', border: 'solid 1px white', height: 100, width: 100 }, one: { ':hover': { background: 'blue', } }, two: { ':hover': { background: 'red', } } };
  21. Radium React Style JSS

  22. TOOLS

  23. WORKBENCH ISOLATED DEVELOPMENT WITH HOT RELOAD

  24. Fast set-up Focus on decomposition Advanced tooling support

  25. None
  26. PUTTING ALL TOGETHER INTO OWN COMPONENT LIBRARY

  27. Demo time...

  28. Organized components catalogs Live examples Automatic doc generation Hot module

    replacement
  29. Amsterdam React Conference

  30. bit.ly/sourcejs-loves-react Robert Haritonov @operatino, r@rhr.me