1. 1. Introduction to React.js
2. 2. React.js React? jQuery?
3. 3. React.js
4. 4. Virtual DOM JSSEO
5. 5. Facebook Instagram Yahoo Atom Editor(ReactVanillaJS ) Airbnb
6. 6. React.js
7. 7. React Component JSX Virtual DOM Server-Side Rendering Flux
8. 8. React.jsComponent
9. 9. jQuery DOM? $('#target').click(function() { $('#output').html(function(i, val) { return val*1+1 }); }); DOM
10. 10. React.jsvar Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return (
    count:{this.state.count}

    click!
    ); } }); DOMJS DOM
11. 11. DOM DOM Facebook
12. 12. var Counter = React.createClass({ getInitialState() { return { count: 0 }; }, onClick() { this.setState({count: this.state.count + 1}); }, render() { return (
    count:{this.state.count}

    click!
    ); } }); HTML
13. 13. JSX
14. 14. JS HTML JS
15. 15.
    Hello {this.props.name}
    React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ) JSX JS