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.

James Pearce

October 23, 2014
Tweet

More Decks by James Pearce

Other Decks in Technology

Transcript

  1. 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
  2. var LabelApp = React.createClass({ render: function () { return <div>Hello

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

    } }); ! React.render( <LabelApp message="Hello Raleigh!" />, document.body );
  4. 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
  5. var MyComponent = React.createClass({ ! propTypes: {},
 getDefaultProps: function ()

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

    render: function () { return <div onClick={this.iGotClicked}>Click</div>; }, }); Or a parent’s method passed in via props
  7. 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>; } });
  8. onClick: function () { this.setState({message: 'Hello Raleigh!'}); }, ! render:

    function () { return ( <div onClick={this.onClick}> {this.state.message} </div> ); }
  9. state
 stored as high up as it needs to be

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

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

    Cell Row Cell Cell Cell Cell Total Total Total state is
 on rows
  12. 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
  13. 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} />, ...
  14. var Row = React.createClass({ render: function () { return <tr>{this.props.children}</tr>;

    } }); ! var Total = React.createClass({ render: function () { return <th>{this.props.value}</th>; } });
  15. 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>); }, });
  16. 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} />
 }, ...