Introduction to React.js

Transcript

1. 1.

   Introduction to React.js Radoslav Stankov 22/09/2015

2. 2.

   Radoslav Stankov @rstankov http://rstankov.com http://blog.rstankov.com http://github.com/rstankov

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 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. 8.

   var PostList = React.createClass({ render: function() { } });

9. 9.

   var PostList = React.createClass({ render: function() { } }); ?

10. 10.

    Render

11. 11.

    component.render() props, state

12. 12.

    Virtual DOM

13. 13.

    Virtual Dom React Element React Element React Element React Element

    React Element
14. 14.

    Virtual Dom DOM Element DOM Element DOM Element DOM Element

    DOM Element
15. 15.

    Virtual Dom React Element React Element React Element React Element

    React Element
16. 16.

    Virtual Dom React Element React Element React Element React Element

    React Element
17. 17.

    Virtual Dom React Element React Element React Element React Element

    React Element
18. 18.

    Virtual Dom React Element React Element React Element React Element

    React Element React Element React Element React Element React Element React Element
19. 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. 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. 21.

    var PostList = React.createClass({ render: function() { } });

22. 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. 23.

    Can’t tell if it is true or just trolling

24. 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. 25.

    STILL can’t tell if it is true or just trolling

26. 26.

    JSX <article className="post-item"> <VoteButton /> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <CommentButton

    /> </article>
27. 27.

    React.createElement("button", {className: "vote-button"}, post.votesCount)) <button className="vote-button">{post.votesCount}</button>

28. 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. 29.

    Code vs Template

30. 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. 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. 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. 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. 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. 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. 36.

    render() { if (this.props.results.length === 0) { return this.renderEmptyMessage(); }

    return this.renderResultsList(); } Components
37. 37.

    render() { if (this.props.results.length === 0) { return <EmptyMessage />

    } return <ResultsList results={this.props.results} /> } Components
38. 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. 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. 40.

    {{#if results}} {{my-app-no-results}} {{else}} {{my-app-no-results-list}} {{/if}} Components

41. 41.

    {{#if results}} {{partial "no-results"}} {{else}} {{partial "results-list"}} {{/if}} Components

42. 42.

    {{#if results}} {{view "no-results"}} {{else}} {{view "results-list"}} {{/if}} Components

43. 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> ) } });
44. 44.

    None
45. 45.

    None
46. 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. 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. 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. 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. 50.

    Virtual Dom div article article button div button h1 p

51. 51.

    Virtual Dom PostList PostItem PostItem button div button h1 p

52. 52.

    Virtual Dom PostList PostItem PostItem button div button h1 p

53. 53.

    Virtual Dom PostList PostItem PostItem button div button h1 p

54. 54.

    Virtual Dom PostList PostItem PostItem Vote Button div h1 p

    button
55. 55.

    Virtual Dom PostList PostItem PostItem Vote Button div h1 p

    button
56. 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. 57.

    @rstankov Thanks :)