Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to React.js

Introduction to React.js

My talk for Sofia Wordpress Meetup

Radoslav Stankov

September 22, 2015
Tweet

More Decks by Radoslav Stankov

Other Decks in Technology

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