Download as PDF, PPTX
![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} />, ...](https://image.slidesharecdn.com/ato-react-james-pearce-141114140956-conversion-gate01/75/An-Introduction-to-ReactJS-36-2048.jpg)
![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} />
}, ...](https://image.slidesharecdn.com/ato-react-james-pearce-141114140956-conversion-gate01/75/An-Introduction-to-ReactJS-39-2048.jpg)
Uploaded byAll Things Open
An Introduction to ReactJS
The document serves as an introduction to React, outlining its declarative programming style and component-based architecture for building user interfaces. It discusses the concepts of state, props, and component lifecycle, providing examples of how to create components and manage data flow in a React application. Additionally, it emphasizes the importance of the virtual DOM and uni-directional data flow in efficient UI rendering.
In this document
Powered by AI
Introduction to React presented by James Pearce.
Describes imperative vs declarative programming. Imperative focuses on statements changing states, while declarative emphasizes logic of computations.
Introduces React as a JavaScript library designed for building user interfaces.
Directs to a resource for further learning: http://todomvc.com/
Introduces React's simplicity and declarative nature and provides a link to the official React website.
Discusses the concept of state in React, describing changes in the user interface alongside DOM mutations.
Introduces Minimum Viable Demos (MVD). Shows initial code structure for React applications, focusing on component lifecycle and state.
Example of handling events and managing state within components, showcasing a pattern for updating state.
Explains how data flows through components via props, state management, and MELD patterns in tables using state.
Highlights main features of React, including component-based UI, Virtual DOM, and uni-directional data flow.
Encourages learning with a quote and references contact details for James Pearce along with image credits.
An Introduction to ReactJS
- 1. An Introduction toReact JAMES PEARCE @jamespearce
- 3. toddler imperative programming describe computationin terms of statements that change a program state teenager declarative programming express the logic of a computation without describing control flow
- 4. A JavaScript LibraryFor Building User Interfaces
- 5.
- 8.
- 9.
- 10.
- 11. state describe for every changeof the whole user interface
- 12. state describe for every changeof the whole user interface
- 13.
- 14. state 1 state2 DOM mutations
- 15. MVD #1 * MinimumViable Demo
- 16. <!DOCTYPE html> <html> <head> <script src="react/build/react.js"></script> <scriptsrc="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 & componentlifecycle
- 21. props ! passed in fromparent ! <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.
- 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 dataflow?
- 29.
- 30.
- 31. state stored as highup as it needs to be to pass down to affected children
- 32. Table Row Cell CellCell Cell Row Cell Cell Cell Cell Row Cell Cell Cell Cell state is on cells
- 33. Table Row Cell CellCell Cell Row Cell Cell Cell Cell Row Cell Cell Cell Cell Total Total Total state is on rows
- 34. Table Row Cell CellCell 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.
- 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.
- 42. “Give it 5minutes” http://reactjs.org
- 43.