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

Building React Component Library (Meetup Edition)

Rob
November 19, 2015

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.

Rob

November 19, 2015
Tweet

More Decks by Rob

Other Decks in Programming

Transcript

  1. // 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} />; } }
  2. // 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>; } }
  3. I want you to take a moment and forget everything

    you know about web development. Keep an open mind. - Christopher Chedeau @vjeux
  4. // 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', } } };