crash course​

react

agenda

[
    "Kick Off",
    "Hands-On Coding",
    "Review & Next Steps"
]

What is React?

why React?

Declarative

Composable

Performant

Declarative

…we should shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in time) as trivial as possible.

Edsger W. Dijkstra

Composable

stay dry, subdivide

and

dont make me think

Performant

Javascript is fast

React.createElement('div', null, 'Hello World');

Browsers are slow

var div = document.createElement('div');
div.innerText = "Hello World";

components

up and running

React.render(
    React.createElement('h1', null, 'Hello, world.'),
    document.body);

var Greeting = React.createClass({
    render: function () {
        return React.createElement('h1', null, 'Hello, world.');
    }
});

React.render(React.createElement(Greeting), document.body)

breaking it down

Splitting it up

var Heading = React.createClass({
    render: function () {
        return React.createElement('h1', null, this.props.children)
    }
});

var Greeting = React.createClass({
    render: function () {
        return React.createElement(Heading, null, 'Hello, world.')
    }
});

React.render(React.createElement(Greeting), document.body);

hands on

bit.ly/react-live

Props

var Heading = React.createClass({
    render: function () {
        return React.createElement('h1', null, this.props.children);
    }
});

var Greeting = React.createClass({
    render: function () {
        var name = this.props.name;
        return React.createElement(Heading, null, 'Hello, ' + name);
    }
});

React.render(
    React.createElement(Greeting, {name: 'world'}), document.body);

state

var Greeting = React.createClass({
    getInitialState: function () {
        return {name: 'world'};
    },
    componentDidMount: function () {
        this.setState({name: this.props.name})
    },
    render: function () {
        var name = this.state.name;
        return React.createElement(Heading, null, 'Hello, ' + name);
    }
});

React.render(
    React.createElement(Greeting, {name: 'world'}), document.body);

Updating State

React.createClass({
  getInitialState: function () {
    return {name: 'world.'};
  },
  onChange: function (event) {
    this.setState({name: event.target.value});
  },
  render: function () {
      var name = this.state && this.state.name;
      return (
        React.createElement('h1', null,
          'Hello, ' + name,
          React.createElement('input', {
            value: name, onChange: this.onChange})
      ))
  }
});

Updating State

Updating State

<JSX/>

JSX

Structure

Communicating with your children

var Parent = React.createClass({
    getInitialState: function() { return {value: 0}; },
    update: function (value) {
        this.setState({value: value});
    },
    render: function () {
        return <div>
            {value}
            <Child value={this.state.value} onChange={this.update}/>
        </div>
    }
});

var Child = React.createClass({
    render: function () {
        var value = this.props.value;
        var onChange = this.props.onChange;

        return <button onClick={onChange.bind(null, value + 1)}>
            Click me!
        </button>
    }
});

component Lifecycle

// Creation
componentWillMount()        // set state based on props
componentDidMount()         // fetch data or add event listeners

// Updating
componentWillReceiveProps() // set state based on prop changes
shouldComponentUpdate()     // stop re-render when there's no real change
componentWillUpdate()       // house keeping (state is frozen)
componentDidUpdate()        // suggested use: DOM manipulation post update

// Destruction
componentWillUnmount()      // unmount all event listeners

Mixins

var Timer = React.createClass({
    componentDidMount() {
        var self = this;
        var timer = setInterval(function () {
            this.setState({count: self.state.count++});
        }, 1000);

        this.setState({ count: 0, timer: timer });
    },
    componentWillUnmount() {
        cancelInvertal(this.timer);
    }
});

var Component = React.createClass({
    mixins: [Timer],
    render: function () {
        return <h1>We've been waiting {this.state.count} seconds</h1>
    }
});

Workflow

Start with pencil and paper design

Translate to components focusing on what has to be rendered

Concentrate state at the root of the app

Send events up the component tree with callbacks

hands-on

bit.ly/echosuggest