ReactJS 101

Views

look nice
do nothing on their own
=> add a controller

Component

presentation & functionality
receive input

Breaking down into components

Components

props

render()

state

props

render()

state

what does this look like?

Life Cycle

render()
constructor()
shouldComponentUpdate()
and a couple more...

Virtual DOM

in-memory representation
before actual page render
compute diffs

<div>
  <p>Hi!</p>
  <p>10:45 AM</p>
<div>

Virtual DOM

Real DOM

<div>
  <p>Hi!</p>
  <p>10:45 AM</p>
<div>

<div>
  <p>Hi!</p>
  <p>10:46 AM</p>
<div>

<div>
  <p>Hi!</p>
  <p>10:46 AM</p>
<div>

Advantages

do fast things often
do slow things
- only when needed
- as much work as possible

Coding...

Diff calculation

class Parent {
  constructor() {
    this.obj = {val: 1};
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.obj.val += 1;
  }

  render() {
    return (
      <div>
        <Child input={this.obj}/>
        <button onClick={this.onClick} />
      </div>
    );
  }
}

class Child {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.obj.val !== 
      nextProps.obj.val;
  }

  render() {
    return <p> {this.props.obj.val} </p>;
  }
}

class Parent {
  constructor() {
    this.obj = {val: 1};
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.obj.val += 1;
  }

  render() {
    return (
      <div>
        <Child input={this.obj}/>
        <button onClick={this.onClick} />
      </div>
    );
  }
}

class Child {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.obj.val !== 
      nextProps.obj.val;
  }

  render() {
    return <p> {this.props.obj.val} </p>;
  }
}

u are mutating obj!

There is no silver bullet

Immutability

class Parent {
  constructor() {
    this.obj = Map({val: 1});
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.obj = this.obj.update(
      'val',
      val => val + 1
    );
  }

  render() {
    return (
      <div>
        <Child input={this.obj}/>
        <button onClick={this.onClick} />
      </div>
    );
  }
}

class Child {
  constructor() {
    this.shouldComponentUpdate = 
      PureRenderMixin.shouldComponentUpdate
      .bind(this);
  }

  render() {
    return <p> {this.props.obj.val} </p>;
  }
}

Coding...

Take aways

single responsibility: rendering
simple (not easy :P): Components
use plain JS
- free to architect your code as you see fit
error messages
easy & fast to test!
fast
easy to reason (using immutability)

Up next:

Q & A

Thanks!

Resources

https://github.com/horiaradu/react-demo
https://facebook.github.io/react/index.html
http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html#react-and-react-hot-loader
https://facebook.github.io/react/docs/advanced-performance.html
https://www.codeschool.com/courses/powering-up-with-react