Rethinking the view using React.js

1.

Rethinking the View using React Prathamesh Sonpatki @_cha1tanya

2.

None

3.

Thank You!

4.

React

5.

Build UI

6.

V in MVC

7.

Simple

8.

if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader();

9.

if encodingCompleted removeLoader(); updateHeaderText(‘Encoding completed.’) else showLoader(); if encodingCompleted <header>Encoding
Completed</header> else <div>Loading…</div>

10.

Unconventional ideas

11.

Components

12.

var Hello = React.createClass({ render: function() { return ( <div>
Hello React World! </div> ); } }); React.render(<Hello />,document.body);

13.

Component is fn()

14.

None

15.

<TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} />

16.

Reusable

17.

var TimeLine = React.createClass({ render: function() { return ( <div>
<TweetCounts tweets=“3062” following=“509”/> <Tweets tweets={[..]}/> <Trends location=“pune" list={[..]} /> </div> ); } });

18.

Composable

19.

Separation of concerns

20.

Hello React World! </div> ) } });

21.


22.

ಠ_ಠ

23.


24.

JSX

25.

JSX

26.

JSX

27.

JSX is so bad, it even trolls Google!

28.

None

29.

None

30.


31.

JSX is like a healthy vegetable that tastes like decadent
chocolate cake. You feel guilty, but it’s good. Eric Elliot

32.

JSX is like Durian Prathamesh Sonpatki

33.

None

34.

Give it 5 minutes https://signalvnoise.com/posts/3124- give-it-ﬁve-minutes

35.

No templates

36.

Any suﬀiciently complicated templating language contains an ad hoc, informally-speciﬁed,
bug-ridden, slow implementation of a turing complete programming language. - Jasim A Basheer

37.

var tweets = [……] tweets.map(function(tweet) { return ( <Tweet author={tweet.author}
content={tweet.content} /> ); });

38.

var tweets = [……] tweets.map(function(tweet) { return ( <Tweet author={tweet.author}
content={tweet.content} /> ); });

39.

React === JavaScript #=> true

40.

Managing Data

41.

Data changing over time is root of evil Pete Hunt

42.

Props

43.

<Tweet> <div> <h1> Updated the website with a list of
the fringe events </h1> <p>@reddotrubyconf</p> </div> </Tweet>

44.

Props come from above

45.

<TweetsList> <Tweet author={tweet.author} content={tweet.content} /> <TweetsList/> <Tweet> <div> <h1> {this.props.author}
</h1> <p>@{this.props.content}</p> </div> </Tweet>

46.

One way data ﬂow

47.

Immutable

48.

propTypes

49.

var Tweet = React.createClass({ propTypes: { author: React.PropTypes.string, content: React.PropTypes.string,
retweetCount: React.PropTypes.number, favoritesCount: React.PropTypes.number } });

50.

State

51.

State is internal

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

53.

Avoid state as much as possible

54.

props > state

55.

Responding to state changes

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

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

58.

Refresh

59.

Re-Rendering the component

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

61.

Re-Rendering the component tree

62.

Re-Rendering

63.

Isn’t it too slow?

64.

Virtual DOM

65.


66.

var Hello = React.createClass({displayName: "Hello", render: function() { return (
React.createElement("div", null, "Hello React World!" ) ) } });

67.

var Hello = React.createClass({displayName: "Hello", render: function() { return (
React.createElement("div", null, "Hello React World!" ) ) } });

68.

Diﬀ

69.

Minimal set of changes

70.

Batch updates

71.

Nothing is new!

72.

React❤Rails

73.

gem “react-rails”

74.

rails g react:install

75.

//= require react //= require react_ujs //= require components app/assets/javascripts/components
app/assets/javascripts /component.js

76.

JSX.to_js

77.

<% @posts.each do |post| %> <tr> <td><%= post.author %></td> <td><%=
post.content %></td> </tr> <% end %>

78.

None

79.

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

80.


81.


82.


83.

<tr data-react-class="Post" data-react-props=“{‘post’:{'id':9, ‘author':'Prathamesh', 'content':'Getting ready for my talk’, ‘created_at':'2015-05-31T05:55:27.318Z',
'updated_at':'2015-05-31T05:55:27.318Z'}}" > </tr>

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

85.

None

86.

None

87.

<%= react_component 'Posts', posts_url: posts_path %>

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

89.


90.


91.

Syncs with asset pipeline

92.

config.react.variant = :development config.react.variant = :production

93.

Server side rendering

94.

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

95.

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

96.

Caveats • No access to document • All the dependencies
must be speciﬁed in components.js • Components must be in global namespace

97.

Component Generator

98.

rails g react:component Tweet content:string fav_count:integer

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

100.

React Native

101.

A FRAMEWORK FOR BUILDING NATIVE APPS USING REACT

102.

Learn once, write everywhere

103.

Learning Curve

104.

Just JavaScript

105.

Just JavaScript & JSX

106.

Just JavaScript

107.

Easy to sneak into existing projects

108.

Let me know your experience!

109.

Thanks! @_cha1tanya @BigBinary React video series http://videos.bigbinary.com/categories/react http://videos.bigbinary.com/categories/tiny-reactjs-concepts

Rethinking the view using React.js

Rethinking the view using React.js

Want more?

Transcript