An Introduction to ReactJS

An Introduction to React
JAMES PEARCE 
@jamespearce

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 ﬂow

A JavaScript Library For 
Building User Interfaces

Simple
!
Declarative
http://reactjs.org

state describe
for every
change of
the whole
user interface

<!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>

var LabelApp = React.createClass({
render: function () {
return <div>Hello World!</div>;
}
});
!
React.render(
<LabelApp />,
document.body
);

return <div>{this.props.message}</div>;
}
});
!
React.render(
<LabelApp message="Hello Raleigh!" />,
document.body
);

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

var MyComponent = React.createClass({
!
propTypes: {}, 
getDefaultProps: function () {},
getInitialState: function () {},
!
componentWillMount: function () {},
componentWillUnmount: function () {},
... 
// only read props & state -> return UI
},
});

var MyComponent = React.createClass({
!
iGotClicked: function () {...},
!
return <div onClick={this.iGotClicked}>Click</div>;
},
});
Or a parent’s method passed in via props

getDefaultProps: function () {
return {message: 'Hello World!'};
},
!
getInitialState: function () {
return {message: this.props.message};
},
!
render: function() {
return <div>{this.state.message}</div>;
}
});

onClick: function () {
this.setState({message: 'Hello Raleigh!'});
},
!
return (
<div onClick={this.onClick}>
{this.state.message}
</div>
);
}

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 aﬀected children

Table
Row Cell Cell Cell Cell
state is 
on cells

Table
Total
Total
Total
state is 
on rows

Table
Total
Total
Total
Row Total Total Total Total Total
state is 
on table

var Row = React.createClass({
return <tr>{this.props.children}</tr>;
}
});
!
var Total = React.createClass({
return <th>{this.props.value}</th>;
}
});

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} /> 
},
...

Component-based UI 
Virtual DOM
Uni-directional data ﬂow

“Give it 5 minutes”
http://reactjs.org

JAMES PEARCE 
@jamespearce
https://www.flickr.com/photos/matthewpaulson/6773801511
https://www.flickr.com/photos/johnath/5358512977

An Introduction to ReactJS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to An Introduction to ReactJS

Similar to An Introduction to ReactJS (20)

More from All Things Open

More from All Things Open (20)

Recently uploaded

Recently uploaded (20)

An Introduction to ReactJS