An Introduction to ReactJS
•
51 gefällt mir•12,692 views
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
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie An Introduction to ReactJS
Ähnlich wie An Introduction to ReactJS (20)
Mehr von All Things Open
Mehr von All Things Open (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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