Introduction to React.js

My talk for Sofia Wordpress Meetup

Transcript

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

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. 
   
   {post.votesCount}
   
   {post.name}
   {post.headline}
   
   {post.commentsCount}
   
   
   {post.votesCount}
   
   {post.name}
   {post.headline}
   
   {post.commentsCount}
   
   
   
   

   View Slide

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

   View Slide

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

   View Slide

10. Render
    

    View Slide

11. component.render()
    props, state
    

    View Slide

12. Virtual DOM
    

    View Slide

13. Virtual Dom
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    

    View Slide

14. Virtual Dom
    DOM
    Element
    DOM
    Element
    DOM
    Element
    DOM
    Element
    DOM
    Element
    

    View Slide

15. Virtual Dom
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    

    View Slide

16. Virtual Dom
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    

    View Slide

17. Virtual Dom
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    

    View Slide

18. Virtual Dom
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    React
    Element
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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)
    )
    }
    });
    

    View Slide

23. Can’t tell if it is true
    or just trolling
    

    View Slide

24. var PostList = React.createClass({
    render: function() {
    var posts = this.props.posts.map(function(post) {
    return (
    
    {post.votesCount}
    
    {post.name}
    {post.headline}
    
    {post.commentsCount}
    
    );
    });
    return (
    
    {posts}
    
    )
    }
    });
    

    View Slide

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

    View Slide

26. JSX
    
    
    
    {post.name}
    {post.headline}
    
    
    
    

    View Slide

27. React.createElement("button", {className: "vote-button"}, post.votesCount))
    {post.votesCount}
    

    View Slide

28. React.createElement("div", null,
    React.createElement("h1", null, post.name),
    React.createElement("p", null, post.headline)
    )
    
    {post.name}
    {post.headline}
    
    

    View Slide

29. Code vs Template
    

    View Slide

30. render() {
    return this.props.results.map(function(result) {
    return (
    
    {result.name}
    {result.headline}
    visit
    
    );
    });
    }
    Looping
    

    View Slide

31. 
    
    {{result.name}}
    {{result.headline}}
    visit
    
    
    Looping
    

    View Slide

32. {{#each result in results}}
    
    {{result.name}}
    {{result.headline}}
    {{#link-to result.link}}visit{{/link-to}}
    
    {{/each}}
    Looping
    

    View Slide

33. render() {
    if (this.props.results.length === 0) {
    return (
    No results found
    );
    }
    return this.props.results.map(function(result) {
    return (
    
    {result.name}
    {result.headline}
    visit
    
    );
    });
    }
    Conditions
    

    View Slide

34. 
    
    No results found
    
    
    
    
    {{result.name}}
    {{result.headline}}
    visit
    
    
    
    
    Conditions
    

    View Slide

35. {{#if results}}
    {{#each result in results}}
    
    {{result.name}}
    {{result.headline}}
    {{#link-to result.link}}visit{{/link-to}}
    
    {{/each}}
    {{else}}
    No results found
    {{/if}}
    Conditions
    

    View Slide

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

    View Slide

37. render() {
    if (this.props.results.length === 0) {
    return
    }
    return
    }
    Components
    

    View Slide

38. 
    
    
    
    
    
    
    
    Components
    

    View Slide

39. 
    
    
    
    
    
    
    
    Components
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. var PostList = React.createClass({
    render: function() {
    var posts = this.props.posts.map(function(post) {
    return (
    
    {post.votesCount}
    
    {post.name}
    {post.headline}
    
    {post.commentsCount}
    
    );
    });
    return (
    
    {posts}
    
    )
    }
    });
    

    View Slide

44. View Slide

45. View Slide

46. var PostList = React.createClass({
    render: function() {
    var posts = this.props.posts.map(function(post) {
    return ;
    });
    return (
    
    {posts}
    
    )
    }
    });
    

    View Slide

47. var PostItem = React.createClass({
    render: function() {
    return (
    
    {this.props.post.votesCount}
    
    {this.props.post.name}
    {this.props.post.headline}
    
    {this.props.post.commentsCount}
    
    );
    }
    });
    

    View Slide

48. var PostItem = React.createClass({
    render: function() {
    var className = classNames('vote-button', {active: this.props.post.hasVoted});
    return (
    
    {this.props.post.votesCount}
    
    {this.props.post.name}
    {this.props.post.headline}
    
    {this.props.post.commentsCount}
    
    );
    }
    });
    

    View Slide

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 (
    
    {this.state.votesCount}
    
    {this.props.post.name}
    {this.props.post.headline}
    
    {this.props.post.commentsCount}
    
    );
    },
    handleVoteClick: function () {
    var updatedPost = toggleVote(this.props.post);
    this.setState({
    hasVoted: updatedPost.hasVoted,
    votesCount: updatedPost.votesCount,
    });
    }
    });
    

    View Slide

50. Virtual Dom
    div
    article article
    button div button
    h1 p
    

    View Slide

51. Virtual Dom
    PostList
    PostItem PostItem
    button div button
    h1 p
    

    View Slide

52. Virtual Dom
    PostList
    PostItem PostItem
    button div button
    h1 p
    

    View Slide

53. Virtual Dom
    PostList
    PostItem PostItem
    button div button
    h1 p
    

    View Slide

54. Virtual Dom
    PostList
    PostItem PostItem
    Vote
    Button
    div
    h1 p
    button
    

    View Slide

55. Virtual Dom
    PostList
    PostItem PostItem
    Vote
    Button
    div
    h1 p
    button
    

    View Slide

56. var PostItem = React.createClass({
    render: function() {
    return (
    
    
    
    {this.props.post.name}
    {this.props.post.headline}
    
    {this.props.post.commentsCount}
    
    );
    }
    });
    

    View Slide

57. @rstankov
    Thanks :)
    

    View Slide