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

React first impressions

React first impressions

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

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