Separate React & react-dom

• react transforms props into virtual DOM
• react-dom renders virtual DOM to real DOM

Props to virtual DOM

import React from 'react';

const Item = ({id, name}) => <li>{id} {name}</li>;
const List = ({items}) => <ul>{items.map(Item)}</ul>;

Virtual DOM to real DOM

import {render} from 'react-dom';

const items = [
  {id:1, name: 'test'},
  {id:2, name: 'test'}
];

// assuming there is an element with id 'app' in the DOM
render(<List items={items}/>, document.getElementById('app'));

Most components are dumb

They are props renderers

import React from 'react';

const Item = ({id, name}) => <li>{id} {name}</li>;
const List = ({items}) => <ul>{items.map(Item)}</ul>;

SMART COMPONENTS HOLD THE application data

• Via stores
  • flux implementations
  • redux (come to the Gaby's session about Redux tomorrow ;) )
• Via the root component state
  • only in the example of this session, to keep concentrated on React !

class App extends ReactComponent {
  state = {
    items: [ /* ... */ ]
  };
  render() {
    return (
      <List items={this.state.items}/>
    );
  }
}

Thinking React

https://facebook.github.io/react/docs/thinking-in-react.html

Component mount phase

• will mount
• render
• did mount

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

  componentWillMount() { /* e.g.: update the state from initial props */ }

  componentDidMount() { /* e.g.: bind an external UI component */ }

  render() { /* ... */ }

};

Component update phase

• will receive props
• should it update ?
• will update
• render
• did update

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

  componentWillReceiveProps(nextProps) { /* e.g.: update the state from new props */ }

  shouldComponentUpdate(nextProps, nextState) { /* e.g.: shallow comparison */ }

  componentWillUpdate(nextProps, nextState) { /* e.g.: make some computations */ }

  render() { /* ... */ }

  componentDidUpdate(prevProps, prevState) { /* e.g.: update UI bindings */ }

};

Component unmount phase

• will unmount

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

  componentWillUnmount() { /* e.g.: unbind external UI widgets */ }

};

One way binding

• render a prop
• call a callback on user input
• render the resulting prop

→ components do not manipulate their props

One way binding

This code won't update the input value while typing.

import React from 'react';
import {render} from 'react-dom';

const MyInput = ({value, onChange}) => (
  <input 
    value={value}
    onChange={(event) => onChange(event.target.value)}
    />
);

render(<MyInput value={'test'} onChange={() => {}} />, document.getElementById('app'));

One way binding

This code will update the input value while typing.

import React from 'react';
import {render} from 'react-dom';

const MyInput = ({value, onChange}) => (
  <input 
    value={value}
    onChange={(event) => onChange(event.target.value)}
    />
);

class App extends React.Component {
  state = { value: 'test' };
  render() {
    return (
      <MyInput
        value={this.state.value}
        onChange={(value) => this.setState({value})}
        />
    );
  }
};

render(<App />, document.getElementById('app'));

Immutability

This is a mutation.

This is not a mutation.

let list = [0, 1, 2];
list.push(3);
let nextList = list;

let list = [0, 1, 2];
let nextList = [...list, 3];

comparison

To know if the array has changed, we should compare each item

let list = [0, 1, 2];
list.push(3);
let nextList = list;

To know if the array has changed, we compare references

let list = [0, 1, 2];
let nextList = [...list, 3];

Shallow comparison

To know if the props or state has changed, we do a shallow comparison

import React from 'react';
import {render} from 'react-dom';
import shallowCompare from 'react-addons-shallow-compare';

class App extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {

    return shallowCompare(this, nextProps, nextState);

  }

};

https://facebook.github.io/react/docs/update.html

A Todo list

Why a todo list again ?

• Because there is no feature to explain

Features:

• Display checkable todos in a list
• Add a way to create a new todo

Questions to ask yourself before starting:

• What components is it made of ?
• What is the data structure of the application state ?

Todo list for the todo list

1. array of todo objects
2. state made of this array
3. render as a simple list
4. render Todo elements
5. let user check a todo
6. state made of a newTodo object
7. render NewTodo element
8. let user type in
9. let user submit

Bin

• http://www.webpackbin.com/Vyx4Vgh3-
  https://gist.github.com/atondelier/933af2115f4a916b7e555a1ed2befe2c​

Gitbook

• https://www.gitbook.com/book/developmentarc/react-indepth/details
  https://developmentarc.gitbooks.io/react-indepth/content/