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

Introduction To React

Introduction To React

Kazuhito Hokamura

February 21, 2015
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Programming

Transcript

  1. // Submit͞ΕͨΒ $('form').on('submit', functino() { // ཁૉ࡞ͬͯ var $li =

    $('<li>'); // ... // Ϧετʹ௥Ճ $('ul').append($li); });
  2. var FormView = Backbone.View.extend({ onSubmit: function() { // dataΛ࡞ͬͯϞσϧʹ௥Ճ͢Δ͚ͩ this.collection.add(data)

    } }); var ListView = Backbone.View.extend({ initialize: function() { // Ϟσϧ͕ߋ৽͞ΕͨΒϦετΛߋ৽ this.collection.on('add', this.render); } });
  3. <form ng-submit="onSubmit()"> <input type="text" ng-model="text"> </form> <ul> <li ng-repeat="item in

    list"> {{item.text}} </li> </ul> // Controller $scope.onSubmit = function() { // σʔλΛߋ৽ͨ͠ΒউखʹView͕มΘΔ $scope.list.push(newItem); };
  4. var Form = React.createClass({ onSubmit: function() { // ਌ʹσʔλͷߋ৽Λ௨஌ },

    render: function() { return <form onSubmit={this.onSubmit}>...</form>; } }); var List = React.createClass({ render: function() { // ਌͔Β΋ΒͬͨσʔλΛݩʹߏங͢Δ͚ͩ return <ul>{this.props.list.map(...)</ul>; } });
  5. var MyComponent = React.createClass({ render: function() { return React.createElement("div", {className:

    "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name ) ); });
  6. var ListView = Backbone.View.extend({ initialize: function() { this.collection.on('add', this.onAdd); this.collection.on('change',

    this.onChange); this.collection.on('destroy', this.onRemove); }, onAdd: function() { /* ௥Ճͷॲཧ */ }, onChange: function() { /* มߋͷॲཧ */ }, onDestroy: function() { /* ࡟আͷॲཧ */ } }); 1. ඞཁͳ෦෼͚ͩ࠶ඳը
  7. var ListView = Backbone.View.extend({ initialize: function() { this.collection .on('add change

    destroy', this.render); }, render: function() { // ࠶ඳը } }); 2. σʔλ͕มΘͬͨΒશ෦࠶ඳը
  8. 3. ࠩ෼ܭࢉͯ͠ඳը var App = React.createClass({ handleChange: function() { this.setState({

    list: getNewList() }); }, render: function() { return ( <div className="app"> <Form /> <List list={this.state.list} /> </div> ); } });
  9. ࣮ߦ࣌ؒʢNTʣ      #BDLCPOF
 ෦෼త࠶ඳը #BDLCPOF
 શͯ࠶ඳը

    3FBDU      TODO MVC IUUQIPLBDDIBHJUIVCJPUPEPNWDQFSGDPNQBSJTPO
  10. JSX

  11. React.createElement("div", {className: "foo"}, React.createElement("div", {className: "bar"}, "Hello ", this.props.name )

    ) <div className="foo"> <div className="bar"> Hello {this.props.name} </div> </div>
  12. var Box = React.createClass({ render: function() { return ( <div

    className="foo"> <div className="bar"> Hello {this.props.name} </div> </div> ); } });
  13. ଞͷίϯϙʔωϯτΛར༻Մೳ var Foo = React.createClass({ ... }); var Bar =

    React.createClass({ render: function() { return <div><Foo /></div>; } });
  14. ଐੑͰpropsΛ౉ͤΔ var Foo = React.createClass({ render: function() { return <div>{this.props.text}</div>;

    } }); var Bar = React.createClass({ render: function() { return <div><Foo text="foo" /></div>; } });
  15. // components/app.js React.createClass({ render() { return ( <div> <Header {this.props.data}

    /> <Main {this.props.data} /> <Footer {this.props.data} /> </div> ); } });
  16. // server side var React = require('react'); var App =

    require('./components/app'); app.get('/', function(req, res) { var html = React.renderToString( React.createElement(App, { data: data }) ); res.render({ html: html }); });
  17. /* @flow */ function foo(x: number, y: number): number {

    return x * y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:2:17,22: number Found 1 error
  18. /* @flow */ function foo(x, y) { return x *

    y; } foo('foo', 2); $ flow check /Users/hokamura/flow/foo.js:5:5,9: string This type is incompatible with /Users/hokamura/flow/foo.js:3:10,14: number Found 1 error
  19. JSXͷαϙʔτ /* @flow */ var App = React.createClass({ render: function()

    { return <div className="foo">foo</div>; }, });
  20. propTypesͷαϙʔτ /* @flow */ var Foo = React.createClass({ propTypes: {

    text: React.PropTypes.string } }); var Bar = React.createClass({ render: function() { return <Foo text={2} />; } });
  21. $ jsx --strip-types foo.js /* @flow */ function foo(x ,

    y ) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }
  22. $ babel foo.js "use strict"; /* @flow */ function foo(x,

    y) { return x * y; } /* @flow */ function foo(x:number, y:number) :number { return x * y; }