Introduction to React.js

Introduction to React.js

My talk for Sofia Wordpress Meetup

7a0e72a6f55811246bb5d9a946fd2e49?s=128

Radoslav Stankov

September 22, 2015
Tweet

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