Components

Simple functions that take in Props and State to render HTML. 

Motivation

Motivation

• Mutation triggers observers and listeners

• Can't use immutable data structures as your model

Going Functional

• Well-written components don't even need state

React has

State Less

import React, { Component } from "react";

export class HelloWorld extends Component {
    render() {
        return ( <h1>Hello, world!</h1> );
    }
}


React.render(<HelloWorld />, document.getElementById("myDiv"));

• A component implements a render method which returns one single child.

Stateful

import React, { Component } from 'react';

export class Timer extends Component {
  constructor() {
    super(props);

    this.state = {
      secondsElapsed: 0
    }
  }

  tick() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  }

  componentDidMount() {
    this.interval = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

React.render(<Timer />, mountNode);

LifeCycle Methods

• componentWillUnMount()

PROPS

• passed from parent

• created within component

• this.props → read only

• Can set default value

• Validated → propTypes

• Read with `this.state`

• this.setState() to update.

• Can become prop

Transferring props

import React, { Component } from 'react';

export class FancyCheckbox extends Component {
  render() {
    let fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';

    return (
      <div className={fancyClass} onClick={this.props.onClick}>
        {this.props.children}
      </div>
    );
  }
});

React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

Transferring props

• No need to pass along all props 

• Consume required and pass on remaining

• Use JSX spread operator != ES6 spread operator

Examples

import React, { Component } extends 'react';

export class FancyCheckbox extends Component {
  render() {
    let { checked, ...other } = this.props;
    let fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';

    return (
      <div {...other} className={fancyClass} />
    );
  }
}

React.render(
  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
    Hello world!
  </FancyCheckbox>,
  document.getElementById('example')
);

Props order matters

// code..

render() {
  var { checked, title, ...other } = this.props;
  var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
  var fancyTitle = checked ? 'X ' + title : 'O ' + title;
  
  return (
    <label>
      <input {...other}
        checked={checked}
        className={fancyClass}
        type="checkbox" // no matter what `other` is type will always be checkbox.
      />
      {fancyTitle}
    </label>
  );
}

// code..

Props Validation

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}

Counter.propTypes = { initialCount: React.PropTypes.number };

propTypes

States

• Components are just state machines

• Update the state and render new UI based on that state

• Take data from props and render it

• Components should be stateless as much as possible.

• Create several stateless component and stateful component on top of that.

Should have

• Minimal possible representation of data which triggers UI update

• computed data

• Data that can be computed later

• React Components

• duplicated data from props

Multiple Components

• Composability → finest feature of react.

• Using Components as (pure) functions or classes

• separation of concerns

• Owner Ownee relationship in React

• Parent Child relationship in DOM

DEMO TIME

Separation of Components

• composable

• resuable

• maintainable

• testable

Non DOM attributes

• key → keep component alive

• ref → access dom node

• dangerouslySetInnerHTML

Virtual DOM

• it's incosistent

• it's hard to test.

• it's brittle

• it's expensive

Virtual DOM

• Consists of light weight Javascript Objects for DOM tree

• Virtual DOM makes rerendering fast on every change

• Batched read and write for optimal performence

• When state changes Virtual and Real DOM trees are compared and real DOM tree modified only where it's required.

• Virtual DOM != Shadow DOM

Example: In JSX

import React, { Component } from 'react';

export class Button extends Component {

    constructor(props) {
        super(props);

        this.state = { liked: false };
    }

    _handleClick() {
        this.setState({liked: !this.state.liked})
    }

    render() {
        let text = this.state.liked ? 'like' : 'unlike';
        
        return (
            <p onClick={() => this._onClick()}>
                You {text} this. Click to Toggle.
            </p>
        );
        
    }
}

Compiled to JS

import React, { Component } from 'react';

export class Button extends Component {

    constructor(props) {
        super(props);

        this.state = { liked: false };
        this. _handleClick = this._handleClick.bind(this);
    }

    _handleClick() {
        this.setState({liked: !this.state.liked})
    }

    render() {
        let text = this.state.liked ? 'like' : 'unlike';
        
        return (
            React.DOM.p({ onClick: this._handleClick },
                'You ', text, 'this. Click to Toggle'
            )
        );
        
    }
}

React.render

// REACT API
// returns a reference to the Component
// callback gets called after rendering.
ReactComponent render(ReactElement element, DOMElement container, [function callback]);

• Render a ReactElement into the supplied container.

• If ReactElement exists perform update and mutate

• Does not modify the container node (only children)

• It is possible to insert a component to existing DOM without overwriting the existing children

Problem

• Transform one DOM tree to another 

• well studied and solution is o(n3)

• 1000 DOM elements ~ 1000000000 comparisons

• Sure you want to do this?

React's O(n) Solution

Based on two assumptions

• Two components
  with same class generates same tree
  with different classes generate different trees

• Its is possible provide unique keys to stable component

Pairwise Diff

Pairwise Diff

1. Different Node Types

• if two nodes or components are of different types throw away first one and build/insert second one. 

Pairwise Diff

2. Different DOM Nodes

• Look at the attributes of both and can decide which of them changed in linear time

• Treat style as key-value object instead - React

Pairwise Diff

2. Same Custom Components

• Takes all attributes from new component

• and calls component[Will/Did]ReceiveProps() on the previous one.

• Components are stateful  so can't throw old component.

Listwise Diff

• In case two ReactFragment go over both lists of children at the same time and generate mutation whenever there's difference.

// No mutation required.
renderA: <div><span>first</span></div>
renderB: <div><span>first</span><span>second</span></div>
=> [insertNode <span>second</span>]

// mutation required.
renderA: <div><span>first</span></div>
renderB: <div><span>second</span><span>first</span></div>
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>]

• This is o(n2);

Listwise Diff

• Add additional attribute `key`.

• key only has to be unique among its siblings, not globally.

• React is now able to perform all tasks in O(n) with has table.

• React is O(n). How?

Terminology

• ReactElement

• ReactNode

• ReactComponent

• ReactElement Factory

• ReactComponent Class

ReactElement

• Primary type in react

• type, props, key and ref

• No methods, nothing in prototype

ReactElement

ReactNodes

• ReactElement

• string ( aka ReactText )

• number ( aka ReactText )

• Array of reactNodes ( aka ReactFragment )

React Components

• A simple JavaScript class

• Create ReactElement from ReactClass

Create Component

• Create ReactComponent from Element

• ReactClass → ReactElement → ReactComponent

• Same ReactElement and DOM Element → same reference

Factory

• A function use to generate a ReactElement given a type

function createFactory(type) {
  return React.createElement.bind(null, type);
}

• Allow you to create shorthand

let div = React.createFactory('div');
let root = div({ className: 'my-div' });
React.render(root, document.getElementById('example'));

Flux

ReactJS is a JavaScript library for building UI

Flux is application architecture for building UI

- Wikipedia

- Flux website

Traditional data flows

• Any component can communicate with any other component

Flux

• Data flows in single direction 

• Dispatcher: Hub to manage all data flow

• Stores: Contains application state and logic 

• Views: Representation of state within stores, listen to stores from depend stores

• Actions: Dispatcher helper methods

Remember?

• Props are immutable. 

• States are mutable

• Store states on topmost component

• State can become Props.

Store, Actions And Views 

Redux

Motivation

[ ELM Time Traveling Debugger ]

Redux Principles

• Single source of truth

• Mutations are written as pure functions

Store Before

Store After

_recipes = [];

function addRecipes(recipe){
    _recipes.push(recipe);
}

let RecipeStore = Flux.createStore({
       getRecipes: function(){
       return _recipes;
    }
}, function(payload){
    if(payload.actionType === "ADD_RECIPE") {
        addRecipes(payload.text);
        RecipeStore.emitChange();
    }
});

function recipes(initialRecipes = [], action) {
    switch (action.type) {
        case 'ADD_RECIPE':
            return [..initialRecipes]
    }
}

import { combineReducers, createStore } from 'redux';
let reducer = combineReducers({ recipes });
let store = createStore(reducer);
// store.getState() will return app state

// actions
store.dispatch({
  type: 'ADD_RECIEPE',
  text: 'xyz'
});

// use connect() to receive a dispatch function
// as a prop,and any state it needs from the
// global state.