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.
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to An Introduction to ReactJS
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
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.