ReactJS - The Container component pattern

A short slide for ReactJS workshop.

Transcript

1. The Container Component pattern
2. Container Components? A container does data fetching and then renders its corresponding sub-component. That’s it. — - Jason Bonta • StockWidgetContainer => StockWidget • TagCloudContainer => TagCloud
3. Why containers? // CommentList.js class CommentList 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 <ul> {this.state.comments.map(renderComment)} </ul>; } renderComment({body, author}) { return <li>{body}—{author}</li>; } }
4. There’s nothing “wrong” with this but... ...you miss out on a few benefits of React
5. Reusability CommentList can’t be reused unless under the exact same circumstances. • Top Customer Reviews vs. Most Recent Customer Reviews
6. Data structure Your markup components should state expectations of the data they require. PropTypes are great for this. — - Learn React with chantastic
7. This time with a container // 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} />; } }
8. Let's rework on CommentList to get comments as a prop // CommentList.js 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>; } }
9. So, what did we get? • We’ve separated our data-fetching and rendering concerns. • We’ve made our CommentList component reusable. • ...next >
10. ...we’ve given CommentList the ability to set PropTypes and fail loudly CommentList.propTypes = { comments: React.PropTypes.object.isRequired }
11. Q&A
12. Bonus: Making your app fast with high- performance components