React Containers - South Bay JS

Lightning talk about using "containers" in reactjs to create reuseable components.

Transcript

1. Reactjs and containers Eli Mattson @elicodes
2. What is React? A JavaScript library for building user interfaces JSX
3. CommentList Component class CommentList extends React.Component { constructor() { super(); this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
4. CommentList Component class CommentList extends React.Component { constructor() { super(); this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
5. Our App Component A Component A Component A Component A
6. CommentList Component class CommentList extends React.Component { constructor() { super(); this.state = {comments: [], title: ''}; } componentDidMount() { $.post('/echo/json/', {json: JSON.stringify(jsonData), delay: 1}) .done(d => this.setState({comments: d['comments'], title: d['title']})); } render() { let comments = this.state.comments.map(c => (<li>{c.body} - <em>{c.author} </em> </li>)); return ( <div> <h2> {this.state.title} Comments </h2> <ul> {comments} </ul> </div> ); } } React.render(<CommentList />, document.getElementById('test'));
7. Our App Component A Component A Other App Component A Component A
9. The Solution! Use a container to handle the state and render the corresponding sub- component as a “pure” component.
10. Component A Component A Component A Container State goes here ONLY props goes here
11. TO THE CODE!!!!! https:/ /jsfiddle.net/elicodes/m9z3y2ve/
12. Credits / Links https:/ /medium.com/@learnreact/ container-components- c0e67432e005#.yvdmzmwsp https:/ /www.youtube.com/watch? v=KYzlpRvWZ6c - Jason’s talk