React first impressions

React first impressions 2016.01.15 @qckanemoto 1 / 45

(1) What's that? 2 / 45

3 / 45

4 / 45

5 / 45

A JavaScript Library for Building User Interfaces 6 / 45

7 / 45

8 / 45

9 / 45

(2) Features? 10 / 45

11 / 45

12 / 45

13 / 45

14 / 45

15 / 45

16 / 45

17 / 45

(3) Example 18 / 45

var Hello = React.createClass({ render: function () { return <p>Hello,
React!</p>; } }); ReactDOM.render( <Hello />, document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 19 / 45

var Hello = React.createClass({ // It's called 'Component' render: function
() { return <p>Hello, React!</p>; } }); ReactDOM.render( <Hello />, document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 20 / 45

React!</p>; } }); ReactDOM.render( <Hello />, // Set the Component... document.getElementById('app') ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel" src="app.js"></script> </body> </html> 21 / 45

React!</p>; } }); ReactDOM.render( <Hello />, // Set the Component document.getElementById('app') // to the element '#app' ); <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React Example</title> <script src="//some/cdn/react.js"></script> <script src="//some/cdn/react-dom.js"></script> <script src="//some/cdn/babel-core/browser.min.js"></script> </head> <body> <div id="app"></div>  <script type="text/babel" src="app.js"></script> </body> </html> 22 / 45

23 / 45

Next step (2/5) 24 / 45

Use props var Hello = React.createClass({ render: function () {
return <p>Hello, React!</p>; } }); var Hello = React.createClass({ render: function () { return <p>Hello, <World name="React props" />!</p>; } }); var World = React.createClass({ render: function () { return <span>{this.props.name}</span>; } }); 25 / 45

26 / 45

props is that passed from parent. 27 / 45

Next step (3/5) 28 / 45

Use state var Hello = React.createClass({ render: function () {
return <p>Hello, <World name="React props" />!</p>; } }); var Hello = React.createClass({ getInitialState: function () { return { worldName: 'React state' }; }, render: function () { return <p>Hello, <World name={this.state.worldName} />!</p>; } }); 29 / 45

30 / 45

state is that held by itself. 31 / 45

Next step (4/5) 32 / 45

Change state var Hello = React.createClass({ getInitialState: function () {
return { worldName: 'React state' }; }, + // just change state after 1 sec + componentDidMount: function () { + var that = this; + setTimeout(function () { + that.setState({ worldName: 'Changed state' }); + }, 1000); + }, render: function () { return <p>Hello, <World name={this.state.worldName} />!</p>; } }); 33 / 45

34 / 45

35 / 45

When state updated component re-rendere whole tree under itself. 36
/ 45

Final step (5/5) 37 / 45

Make child stateful var World = React.createClass({ render: function ()
{ return <span>{this.props.name}</span>; } }); var World = React.createClass({ getInitialState: function () { return { name: this.props.name }; }, render: function () { return <span>{this.state.name}</span>; } }); 38 / 45

39 / 45

Not changed 40 / 45

props is immutable. state is mutable. 41 / 45

Conclusion 42 / 45

React is a JavaScript FW Component Oriented powered by One-way
Reactive Data Flow Virtual DOM Immutable props & Mutable state 43 / 45

Also has Two-way Binding And It's Necessary for some complicated
apps (I think) Similar to Angular2 ? 44 / 45

Thanks :) 45 / 45

React first impressions

React first impressions

More Decks by Takashi Kanemoto

Other Decks in Programming

Featured

Transcript