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.

Transcript

1. Robert Haritonov @operatino BUILDING REACT COMPONENT LIBRARY
2. Front-end Lead at Liberty Global
3. Author of the Style Guide Platform
5. WHAT IS A COMPONENT LIBRARY
6. A set of re-usable modules Searchable library Rendered examples and docs
9. Material UI Belle Elemental UI React Components (collection)
11. COMPONETIZING THE WEB
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
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