An Introduction to React - All Things Open 2014

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

http://todomvc.com/

☕(n)

Simple ! Declarative http://reactjs.org

state describe

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"></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 );

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

State & component lifecycle

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 () {}, ...  render: function () { // only read props & state -> return UI }, });

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

MVD #2

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

How does data ﬂow?

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 Row Cell Cell Cell
Cell Row Cell Cell Cell Cell state is  on cells

Cell Row Cell Cell Cell Cell Total Total Total state is  on rows

Cell Row Cell Cell Cell Cell Total Total Total Row Total Total Total Total Total state is  on table

MVD #3

var Row = React.createClass({ render: function () { return <tr>{this.props.children}</tr>;
} }); ! var Total = React.createClass({ render: function () { 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 React - All Things Open 2014

An Introduction to React - All Things Open 2014

More Decks by James Pearce

Other Decks in Technology

Featured

Transcript