An Introduction to ReactJS
•
51 j'aime•12,694 vues
All Things Open 2014 - Day 2 Thursday, October 23rd, 2014 James Pearce Head of Open Source with Facebook Front Dev 1 An Introduction to ReactJS Find more by James here: https://speakerdeck.com/jamesgpearce
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à An Introduction to ReactJS
Similaire à An Introduction to ReactJS (20)
Plus de All Things Open
Plus de All Things Open (20)
Dernier
Dernier (20)
An Introduction to ReactJS
- 1. An Introduction to React JAMES PEARCE @jamespearce
- 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
- 8. ☕(n)
- 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 );
- 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> ); }
- 28. How does data flow?
- 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} /> }, ...
- 41. Component-based UI Virtual DOM Uni-directional data flow
- 42. “Give it 5 minutes” http://reactjs.org