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

React first impressions

React first impressions

カルテット開発部社内勉強会 LT 資料

Avatar for Takashi Kanemoto

Takashi Kanemoto

January 15, 2016
Tweet

More Decks by Takashi Kanemoto

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. var Hello = React.createClass({ render: function () { return <p>Hello,

    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
  4. var Hello = React.createClass({ render: function () { return <p>Hello,

    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> <!-- Here --> <script type="text/babel" src="app.js"></script> </body> </html> 22 / 45
  5. 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
  6. 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
  7. 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
  8. 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
  9. React is a JavaScript FW Component Oriented powered by One-way

    Reactive Data Flow Virtual DOM Immutable props & Mutable state 43 / 45
  10. Also has Two-way Binding And It's Necessary for some complicated

    apps (I think) Similar to Angular2 ? 44 / 45