Rethinking the view using React.js

Rethinking the view using React.js

Talk given at RedDotRubyConf 2015

1b0973b64704738dbc8ce24d8382bb1f?s=128

Prathamesh

June 04, 2015
Tweet

Transcript

  1. 2.
  2. 4.
  3. 7.
  4. 12.

    var Hello = React.createClass({ render: function() { return ( <div>

    Hello React World! </div> ); } }); React.render(<Hello />,document.body);
  5. 14.
  6. 16.
  7. 17.

    var TimeLine = React.createClass({ render: function() { return ( <div>

    <TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} /> </div> ); } });
  8. 22.
  9. 24.

    JSX

  10. 25.

    JSX

  11. 26.

    JSX

  12. 28.
  13. 29.
  14. 31.

    JSX is like a healthy vegetable that tastes like decadent

    chocolate cake. You feel guilty, but it’s good. Eric Elliot
  15. 33.
  16. 36.

    Any sufficiently complicated templating language contains an ad hoc, informally-specified,

    bug-ridden, slow implementation of a turing complete programming language. - Jasim A Basheer
  17. 42.
  18. 43.

    <Tweet> <div> <h1> Updated the website with a list of

    the fringe events </h1> <p>@reddotrubyconf</p> </div> </Tweet>
  19. 47.
  20. 48.
  21. 49.

    var Tweet = React.createClass({ propTypes: { author: React.PropTypes.string, content: React.PropTypes.string,

    retweetCount: React.PropTypes.number, favoritesCount: React.PropTypes.number } });
  22. 50.
  23. 52.

    var Posts = React.createClass({ getInitialState: function() { return ( {

    posts: [] } ); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
  24. 56.

    var Posts = React.createClass({ loadPosts: function() { // fetch posts

    }, componentDidMount: function() { this.loadPosts(); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
  25. 57.

    var Posts = React.createClass({ loadPosts: function() { // fetch posts

    this.setState({posts: fetchedPosts}); }, componentDidMount: function() { this.loadPosts(); }, render: function() { this.loadPosts(); var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
  26. 58.
  27. 60.

    loadPosts: function() { // fetch posts this.setState({posts: fetchedPosts}); }, componentDidMount:

    function() { this.loadPosts(); }, render: function() { var posts = this.state.posts.map(function(post) { return ( <Post author={post.author} content={post.content} /> ); }); } });
  28. 66.

    var Hello = React.createClass({displayName: "Hello", render: function() { return (

    React.createElement("div", null, "Hello React World!" ) ) } });
  29. 67.

    var Hello = React.createClass({displayName: "Hello", render: function() { return (

    React.createElement("div", null, "Hello React World!" ) ) } });
  30. 68.
  31. 76.
  32. 78.
  33. 84.

    # /app/assets/javascripts/components/posts.js.jsx var Post = React.createClass({ render () { return

    ( <tr> <td> {this.props.post.author} </td> <td> {this.props.post.content} </td> </tr> ); } });
  34. 85.
  35. 86.
  36. 88.

    render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) {

    return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
  37. 89.

    render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) {

    return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
  38. 90.

    render: function() { setTimeout(this.loadPosts, 5000); var posts = this.state.posts.map(function(post) {

    return ( <Post author={post.author} content={post.content} /> ); }); return ( <div> <h1> Posts </h1> <table className="table"> <thead> <tr> <th>Author</th> <th>Content</th> </tr> </thead> <tbody> {posts} </tbody> </table> </div> ); }
  39. 94.

    <% @posts.each do |post| %> <%= react_component 'Post', { post:

    post }, { prerender: true, tag: ‘tr' } %> <% end %>
  40. 95.

    <% @posts.each do |post| %> <%= react_component 'Post', { post:

    post }, { prerender: true, tag: ‘tr' } %> <% end %>
  41. 96.

    Caveats • No access to document • All the dependencies

    must be specified in components.js • Components must be in global namespace
  42. 99.

    var Tweet = React.createClass({ propTypes: { content: React.PropTypes.string, favCount: React.PropTypes.node

    }, render: function() { return ( <div> <div>Content: {this.props.content}</div> <div>Fav Count: {this.props.fav_count}</div> </div> ); } });