Introduction to React.js

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

3. None
4. None
5. None
6. None

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

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 :)