Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
An Introduction to React
JAMES PEARCE

@jamespearce
toddler

imperative programming

describe computation in terms
of statements that change a
program state
teenager

declara...
A JavaScript Library For

Building User Interfaces
http://todomvc.com/
☕(n)
Simple
!
Declarative
http://reactjs.org
state describe
state describe
for every
change of
the whole
user interface
state describe
for every
change of
the whole
user interface
state 1 state 2
state 1 state 2
DOM mutations
MVD #1
* Minimum Viable Demo
<!DOCTYPE html>
<html>
<head>
<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></s...
var LabelApp = React.createClass({
render: function () {
return <div>Hello World!</div>;
}
});
!
React.render(
<LabelApp /...
var LabelApp = React.createClass({
render: function () {
return <div>{this.props.message}</div>;
}
});
!
React.render(
<La...
State & component lifecycle
props
!
passed in from parent
!
<MyComp foo="bar" />



this.props read-only within
!
can be defaulted & validated
state
!...
var MyComponent = React.createClass({
!
propTypes: {},

getDefaultProps: function () {},
getInitialState: function () {},
...
var MyComponent = React.createClass({
!
iGotClicked: function () {...},
!
render: function () {
return <div onClick={this....
MVD #2
var LabelApp = React.createClass({
getDefaultProps: function () {
return {message: 'Hello World!'};
},
!
getInitialState: ...
onClick: function () {
this.setState({message: 'Hello Raleigh!'});
},
!
render: function () {
return (
<div onClick={this....
How does data flow?
Component
Component
Component
Component
Component Component
props
props
setState
Component
Component
Component
Component
Component Component
props
props
setState
event

callback
state

stored as high up as it needs to be 

to pass down to affected children
Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
state is

on cells
Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Total
Total
Total
state is

on rows
Table
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Row Cell Cell Cell Cell
Total
Total
Total
Row Total Total Total Tota...
MVD #3
var Table = React.createClass({
getInitialState: function () {
var data = [];
for (var r = 0; r < this.props.rows; r++) {
...
var Row = React.createClass({
render: function () {
return <tr>{this.props.children}</tr>;
}
});
!
var Total = React.creat...
var Cell = React.createClass({
onChange: function (e) {
this.props.onChange(
this.props.row,
this.props.column,
parseInt(e...
var Table = React.createClass({
onCellChange: function(row, column, value) {
this.state.data[row][column] = value;
this.se...
Component-based UI

Virtual DOM
Uni-directional data flow
“Give it 5 minutes”
http://reactjs.org
JAMES PEARCE

@jamespearce
https://www.flickr.com/photos/matthewpaulson/6773801511
https://www.flickr.com/photos/johnath/5...
An Introduction to ReactJS
An Introduction to ReactJS
An Introduction to ReactJS
An Introduction to ReactJS
An Introduction to ReactJS
An Introduction to ReactJS
Upcoming SlideShare
Loading in …5
×

An Introduction to ReactJS

10,208 views

Published on

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

Published in: Technology
  • Be the first to comment

An Introduction to ReactJS

  1. 1. An Introduction to React JAMES PEARCE
 @jamespearce
  2. 2. 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
  3. 3. A JavaScript Library For
 Building User Interfaces
  4. 4. http://todomvc.com/
  5. 5. ☕(n)
  6. 6. Simple ! Declarative http://reactjs.org
  7. 7. state describe
  8. 8. state describe for every change of the whole user interface
  9. 9. state describe for every change of the whole user interface
  10. 10. state 1 state 2
  11. 11. state 1 state 2 DOM mutations
  12. 12. MVD #1 * Minimum Viable Demo
  13. 13. <!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>
  14. 14. var LabelApp = React.createClass({ render: function () { return <div>Hello World!</div>; } }); ! React.render( <LabelApp />, document.body );
  15. 15. var LabelApp = React.createClass({ render: function () { return <div>{this.props.message}</div>; } }); ! React.render( <LabelApp message="Hello Raleigh!" />, document.body );
  16. 16. State & component lifecycle
  17. 17. 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
  18. 18. var MyComponent = React.createClass({ ! propTypes: {},
 getDefaultProps: function () {}, getInitialState: function () {}, ! componentWillMount: function () {}, componentWillUnmount: function () {}, ...
 render: function () { // only read props & state -> return UI }, });
  19. 19. var MyComponent = React.createClass({ ! iGotClicked: function () {...}, ! render: function () { return <div onClick={this.iGotClicked}>Click</div>; }, }); Or a parent’s method passed in via props
  20. 20. MVD #2
  21. 21. 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>; } });
  22. 22. onClick: function () { this.setState({message: 'Hello Raleigh!'}); }, ! render: function () { return ( <div onClick={this.onClick}> {this.state.message} </div> ); }
  23. 23. How does data flow?
  24. 24. Component Component Component Component Component Component props props setState
  25. 25. Component Component Component Component Component Component props props setState event
 callback
  26. 26. state
 stored as high up as it needs to be 
 to pass down to affected children
  27. 27. Table Row Cell Cell Cell Cell Row Cell Cell Cell Cell Row Cell Cell Cell Cell state is
 on cells
  28. 28. Table Row Cell Cell Cell Cell Row Cell Cell Cell Cell Row Cell Cell Cell Cell Total Total Total state is
 on rows
  29. 29. 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
  30. 30. MVD #3
  31. 31. 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} />, ...
  32. 32. var Row = React.createClass({ render: function () { return <tr>{this.props.children}</tr>; } }); ! var Total = React.createClass({ render: function () { return <th>{this.props.value}</th>; } });
  33. 33. 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>); }, });
  34. 34. 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} />
 }, ...
  35. 35. Component-based UI
 Virtual DOM Uni-directional data flow
  36. 36. “Give it 5 minutes” http://reactjs.org
  37. 37. JAMES PEARCE
 @jamespearce https://www.flickr.com/photos/matthewpaulson/6773801511 https://www.flickr.com/photos/johnath/5358512977

×