Tweet
Tweet

Slide 1

Slide 1 text

An Introduction to React JAMES PEARCE
 @jamespearce

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

A JavaScript Library For
 Building User Interfaces

Slide 5

Slide 5 text

http://todomvc.com/

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

☕(n)

Slide 9

Slide 9 text

Simple ! Declarative http://reactjs.org

Slide 10

Slide 10 text

state describe

Slide 11

Slide 11 text

state describe for every change of the whole user interface

Slide 12

Slide 12 text

state describe for every change of the whole user interface

Slide 13

Slide 13 text

state 1 state 2

Slide 14

Slide 14 text

state 1 state 2 DOM mutations

Slide 15

Slide 15 text

MVD #1 * Minimum Viable Demo

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

var LabelApp = React.createClass({ render: function () { return
{this.props.message}
; } }); ! React.render( , document.body );

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

State & component lifecycle

Slide 21

Slide 21 text

props ! passed in from parent ! 
 
 this.props read-only within ! can be defaulted & validated state ! created within component ! getInitialState 
 this.state to read
 
 this.setState() to update

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

MVD #2

Slide 25

Slide 25 text

var LabelApp = React.createClass({ getDefaultProps: function () { return {message: 'Hello World!'}; }, ! getInitialState: function () { return {message: this.props.message}; }, ! render: function() { return
{this.state.message}
; } });

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

How does data flow?

Slide 29

Slide 29 text

Component Component Component Component Component Component props props setState

Slide 30

Slide 30 text

Component Component Component Component Component Component props props setState event
 callback

Slide 31

Slide 31 text

state
 stored as high up as it needs to be 
 to pass down to affected children

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

MVD #3

Slide 36

Slide 36 text

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 ...;} }); ! React.render(, ...

Slide 37

Slide 37 text

var Row = React.createClass({ render: function () { return {this.props.children}; } }); ! var Total = React.createClass({ render: function () { return {this.props.value}; } });

Slide 38

Slide 38 text

var Cell = React.createClass({ onChange: function (e) { this.props.onChange( this.props.row, this.props.column, parseInt(e.target.value) || 0 ); }, render: function () { return ( ); }, });

Slide 39

Slide 39 text

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 s containing
 // // // also append to each row and in a final row:
 // 
 }, ...

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Component-based UI
 Virtual DOM Uni-directional data flow

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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