Introduction to React.js

My talk for Sofia Wordpress Meetup

Transcript

1. Introduction to React.js Radoslav Stankov 22/09/2015
2. Radoslav Stankov @rstankov http://rstankov.com http://blog.rstankov.com http://github.com/rstankov
7. <div className="post-list"> <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> <!—- more posts —-> </div>
8. var PostList = React.createClass({ render: function() { } });
9. var PostList = React.createClass({ render: function() { } }); ?
10. Render
11. component.render() props, state
12. Virtual DOM
13. Virtual Dom React Element React Element React Element React Element React Element
14. Virtual Dom DOM Element DOM Element DOM Element DOM Element DOM Element
15. Virtual Dom React Element React Element React Element React Element React Element
16. Virtual Dom React Element React Element React Element React Element React Element
17. Virtual Dom React Element React Element React Element React Element React Element
18. Virtual Dom React Element React Element React Element React Element React Element React Element React Element React Element React Element React Element
19. Virtual Dom React Element React Element React Element React Element React Element React Element React Element React Element React Element React Element DOM Element DOM Element DOM Element DOM Element DOM Element
20. Virtual Dom React Element React Element React Element React Element React Element React Element React Element React Element React Element React Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element
21. var PostList = React.createClass({ render: function() { } });
22. var PostList = React.createClass({ render: function() { var posts = this.props.posts.map(function(post) { return ( React.createElement("article", {className: "post-item"}, React.createElement("button", {className: "vote-button"}, post.vo React.createElement("div", null, React.createElement("h1", null, post.name), React.createElement("p", null, post.headline) ), React.createElement("button", {className: "comment-button"}, post ) ); }); return ( React.createElement("div", {className: "post-list"}, posts) ) } });
23. Can’t tell if it is true or just trolling
24. var PostList = React.createClass({ render: function() { var posts = this.props.posts.map(function(post) { return ( <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> ); }); return ( <div className="post-list"> {posts} </div> ) } });
25. STILL can’t tell if it is true or just trolling
26. JSX <article className="post-item"> <VoteButton /> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <CommentButton /> </article>
27. React.createElement("button", {className: "vote-button"}, post.votesCount)) <button className="vote-button">{post.votesCount}</button>
28. React.createElement("div", null, React.createElement("h1", null, post.name), React.createElement("p", null, post.headline) ) <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div>
29. Code vs Template
30. render() { return this.props.results.map(function(result) { return ( <article> <h1>{result.name}</h1> <p>{result.headline}</p> <a href={result.link}>visit</a> </article> ); }); } Looping
31. <div ng-repeat="result in results track by result.id"> <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> <a ng-href="{{result.link}}">visit</a> </article> </div> Looping
32. {{#each result in results}} <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> {{#link-to result.link}}visit{{/link-to}} </article> {{/each}} Looping
33. render() { if (this.props.results.length === 0) { return ( <strong>No results found</strong> ); } return this.props.results.map(function(result) { return ( <article> <h1>{result.name}</h1> <p>{result.headline}</p> <a href={result.link}>visit</a> </article> ); }); } Conditions
34. <div ng-switch="results.length"> <div ng-switch-when="0"> <strong>No results found</strong> </div> <div ng-switch-default> <div ng-repeat="result in results track by result.id"> <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> <a ng-href="{{result.link}}">visit</a> </article> </div> </div> </div> Conditions
35. {{#if results}} {{#each result in results}} <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> {{#link-to result.link}}visit{{/link-to}} </article> {{/each}} {{else}} <strong>No results found</strong> {{/if}} Conditions
36. render() { if (this.props.results.length === 0) { return this.renderEmptyMessage(); } return this.renderResultsList(); } Components
37. render() { if (this.props.results.length === 0) { return <EmptyMessage /> } return <ResultsList results={this.props.results} /> } Components
38. <div ng-switch="results.length"> <div ng-switch-when="0"> <my-app-no-results /> </div> <div ng-switch-default> <my-app-results-list /> </div> </div> Components
39. <div ng-switch="results.length"> <div ng-switch-when="0"> <ng-include name="no-results.html" /> </div> <div ng-switch-default> <ng-include name="results-list.html" /> </div> </div> Components
40. {{#if results}} {{my-app-no-results}} {{else}} {{my-app-no-results-list}} {{/if}} Components
41. {{#if results}} {{partial "no-results"}} {{else}} {{partial "results-list"}} {{/if}} Components
42. {{#if results}} {{view "no-results"}} {{else}} {{view "results-list"}} {{/if}} Components
43. var PostList = React.createClass({ render: function() { var posts = this.props.posts.map(function(post) { return ( <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> ); }); return ( <div className="post-list"> {posts} </div> ) } });
46. var PostList = React.createClass({ render: function() { var posts = this.props.posts.map(function(post) { return <PostItem key={post.id} post={post} />; }); return ( <div className="post-list"> {posts} </div> ) } });
47. var PostItem = React.createClass({ render: function() { return ( <article className="post-item"> <button className="vote-button">{this.props.post.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
48. var PostItem = React.createClass({ render: function() { var className = classNames('vote-button', {active: this.props.post.hasVoted}); return ( <article className="post-item"> <button className={className}>{this.props.post.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
49. var PostItem = React.createClass({ getInitialState: function() { return { hasVoted: this.props.post.hasVoted, votesCount: this.props.post.votesCount, }; }, render: function() { var className = classNames('vote-button', {active: this.state.hasVoted}); return ( <article className="post-item"> <button className={className} onClick={this.handleVoteClick}>{this.state.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); }, handleVoteClick: function () { var updatedPost = toggleVote(this.props.post); this.setState({ hasVoted: updatedPost.hasVoted, votesCount: updatedPost.votesCount, }); } });
50. Virtual Dom div article article button div button h1 p
51. Virtual Dom PostList PostItem PostItem button div button h1 p
52. Virtual Dom PostList PostItem PostItem button div button h1 p
53. Virtual Dom PostList PostItem PostItem button div button h1 p
54. Virtual Dom PostList PostItem PostItem Vote Button div h1 p button
55. Virtual Dom PostList PostItem PostItem Vote Button div h1 p button
56. var PostItem = React.createClass({ render: function() { return ( <article className="post-item"> <VoteButton post={this.props.post} /> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
57. @rstankov Thanks :)