Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

How to React Appropriately

Glen Mailer
October 22, 2014

How to React Appropriately

An introduction to React's concepts, with associated code demo of building https://github.com/glenjamin/react-calendar

Glen Mailer

October 22, 2014
Tweet

More Decks by Glen Mailer

Other Decks in Technology

Transcript

  1. •  JavaScript Library •  Facebook Engineering •  Open Sourced May

    2013 •  Internal use since 2011 •  The "V" in MVC
  2. Router   Controller   Model   Template  &   Interac:on

      Angular.js Rendering Model   Template  &   Interac:on   $scope   $scope  
  3.   Component   HTML   JavaScript   CSS    

    Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS     Component   HTML   JavaScript   CSS  
  4. JSX

  5. JSX /** @jsx React.DOM */ var HelloMessage = React.createClass({ render:

    function() { return <div>Hello {this.props.name}</div>; } });
  6. JSX /** @jsx React.DOM */ var HelloMessage = React.createClass({ render:

    function() { return <div>Hello {this.props.name}</div>; } }); var HelloMessage = React.createClass({ render: function() { return React.DOM.div(null, "Hello ", this.props.name); } });
  7. JS is Fast, DOM is slow
 Minimal DOM operations
 Batched

    DOM read/write
 Enables simple optimisations
  8. Further Reading •  Facebook's React docs http://facebook.github.io/react/docs/why- react.html •  The

    original React announcement talk http://www.youtube.com/watch?v=x7cQ3mrcKaY •  Flux introduction with more about React's thinking http://www.youtube.com/watch?v=nYkdrAPrdcw •  The React github repo https://github.com/facebook/react