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

An Introduction to React - All Things Open 2014

An Introduction to React - All Things Open 2014

React is a JavaScript library for building user interfaces. But more than just being a high-performance way to build rich and interactive web applications, React also represents a fresh way of thinking about how such applications can be architected. In this session, we explore those philosophies before quickly diving into practical advice on how to get started with React and build your first apps.

D7826ab49f74589fcada00cb92e5ede7?s=128

James Pearce

October 23, 2014
Tweet

Transcript

  1. An Introduction to React JAMES PEARCE
 @jamespearce

  2. None
  3. toddler
 imperative programming
 describe computation in terms of statements that

    change a program state teenager
 declarative programming
 express the logic of a computation without describing control flow
  4. A JavaScript Library For
 Building User Interfaces

  5. http://todomvc.com/

  6. None
  7. None
  8. ☕(n)

  9. Simple ! Declarative http://reactjs.org

  10. state describe

  11. state describe for every change of the whole user interface

  12. state describe for every change of the whole user interface

  13. state 1 state 2

  14. state 1 state 2 DOM mutations

  15. MVD #1 * Minimum Viable Demo

  16. <!DOCTYPE html> <html> <head> <script src="react/build/react.js"></script> <script src="react/build/JSXTransformer.js"></script> <script src="labelapp.js"

    type="text/jsx"></script> </head> <body/> </html>
  17. var LabelApp = React.createClass({ render: function () { return <div>Hello

    World!</div>; } }); ! React.render( <LabelApp />, document.body );
  18. var LabelApp = React.createClass({ render: function () { return <div>{this.props.message}</div>;

    } }); ! React.render( <LabelApp message="Hello Raleigh!" />, document.body );
  19. None
  20. State & component lifecycle

  21. props ! passed in from parent ! <MyComp foo="bar" />


    
 this.props read-only within ! can be defaulted & validated state ! created within component ! getInitialState 
 this.state to read
 
 this.setState() to update
  22. var MyComponent = React.createClass({ ! propTypes: {},
 getDefaultProps: function ()

    {}, getInitialState: function () {}, ! componentWillMount: function () {}, componentWillUnmount: function () {}, ...
 render: function () { // only read props & state -> return UI }, });
  23. var MyComponent = React.createClass({ ! iGotClicked: function () {...}, !

    render: function () { return <div onClick={this.iGotClicked}>Click</div>; }, }); Or a parent’s method passed in via props
  24. MVD #2

  25. var LabelApp = React.createClass({ getDefaultProps: function () { return {message:

    'Hello World!'}; }, ! getInitialState: function () { return {message: this.props.message}; }, ! render: function() { return <div>{this.state.message}</div>; } });
  26. onClick: function () { this.setState({message: 'Hello Raleigh!'}); }, ! render:

    function () { return ( <div onClick={this.onClick}> {this.state.message} </div> ); }
  27. None
  28. How does data flow?

  29. Component Component Component Component Component Component props props setState

  30. Component Component Component Component Component Component props props setState event


    callback
  31. state
 stored as high up as it needs to be

    
 to pass down to affected children
  32. Table Row Cell Cell Cell Cell Row Cell Cell Cell

    Cell Row Cell Cell Cell Cell state is
 on cells
  33. Table Row Cell Cell Cell Cell Row Cell Cell Cell

    Cell Row Cell Cell Cell Cell Total Total Total state is
 on rows
  34. Table Row Cell Cell Cell Cell Row Cell Cell Cell

    Cell Row Cell Cell Cell Cell Total Total Total Row Total Total Total Total Total state is
 on table
  35. MVD #3

  36. var Table = React.createClass({ getInitialState: function () { var data

    = []; for (var r = 0; r < this.props.rows; r++) { data[r] = []; for (var c = 0; c < this.props.columns; c++) { data[r][c] = 0; } } return {data: data}; }, render: function () {return <table>...</table>;} }); ! React.render(<Table columns={4} rows={3} />, ...
  37. var Row = React.createClass({ render: function () { return <tr>{this.props.children}</tr>;

    } }); ! var Total = React.createClass({ render: function () { return <th>{this.props.value}</th>; } });
  38. var Cell = React.createClass({ onChange: function (e) { this.props.onChange( this.props.row,

    this.props.column, parseInt(e.target.value) || 0 ); }, render: function () { return (<td> <input type="number" value={this.props.value}
 onChange={this.onChange} /> </td>); }, });
  39. var Table = React.createClass({ onCellChange: function(row, column, value) { this.state.data[row][column]

    = value; this.setState({data: this.state.data}); }, ! render: function() { // for rows & columns, append <Row>s containing
 // <Cell row={r} column={c} 
 // value={this.state.data[r][c]}
 // onChange={this.onCellChange} /> // // also append to each row and in a final row:
 // <Total value={total} />
 }, ...
  40. None
  41. Component-based UI
 Virtual DOM Uni-directional data flow

  42. “Give it 5 minutes” http://reactjs.org

  43. JAMES PEARCE
 @jamespearce https://www.flickr.com/photos/matthewpaulson/6773801511 https://www.flickr.com/photos/johnath/5358512977