<Build Your Own React/>

Ofir Dagan

@ofirdagan2

ofird@wix.com

<Ofir Dagan/>

Ofir Dagan

@ofirdagan2

ofird@wix.com

• Team Lead @ Wix.com
• React Native + FED
• Podcast Addict
• Love Adrenaline

Syntax Sync

Before we build it we need to understand what it does

• Basicly React is a library to build a dynamic tree (in our case DOM)

For Example

const helloWorld = React.createElement('div', null, `Sveika pasaule`);
ReactDOM.render(helloWorld, document.getElementById('root'));

Will (not) surprisingly result with

https://jsbin.com/tuzucihota/1/edit?html,js,output

 +---+ element = div
     |
     |
     +--> children = [Sveika pasaule]

And now with props

const Hello = function ({name}) {
  return React.createElement('div', null, `Hello ${name}`);
};

const hello = React.createElement(Hello, {name: 'Ofir'}, null);
ReactDOM.render(helloWorld, document.getElementById('root'));


-> Hello Ofir

https://jsbin.com/dimudukiho/1/edit?html,js,output

+---+  element = hello
    |
    |
    +---+  props = {name: 'Ofir'}
    |
    |
    +--+> children = [div]
                       |
                       |
                       +--> children = [Hello Ofir]

And when the props become dynamic... we call it state

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {};
    this.fetchName();
  }
  
  fetchName() {
    setTimeout(() => this.setState({name: 'Latvia'}), 500);
  }
  
  render() {
    return React.createElement('div', null, `Hello ${this.state.name}`);
  }
}


const helloWorld = React.createElement(Hello, null, null);
ReactDOM.render(helloWorld, document.getElementById('root'));

Output
------
-> Hello undeifned
--- 500ms passes
-> Hello Latvia

https://jsbin.com/sonijocamu/1/edit?html,js,output

React Examples #1

class NameComponent extends React.Component {
  render() {
    return (      
      <h1>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <NameComponent name="Boki"/>,
  document.getElementById('root')
);

http://jsbin.com/lawatuqife/edit?js,output

React Examples #2

class NameComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props.name = 'Foo'; // ----------- NEW LINE ---------------
  }
  
  render() {
    return (      
      <h1>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <NameComponent name="Boki"/>,
  document.getElementById('root')
);

http://jsbin.com/xujaparucu/1/edit?js,output

React Examples #3

class NameComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props.name = 'Foo';
    setTimeout(() => {
      this.props.name = 'Moki' // ----------- NEW LINE ---------------
    });
  }
  
  render() {
    return (      
      <h1>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <NameComponent name="Boki"/>,
  document.getElementById('root')
);

http://jsbin.com/xujaparucu/2/edit?js,output

React Examples #4

class NameComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props.name = 'Foo';
    setTimeout(() => {
      this.props.name = 'Moki'
      this.setState({bla: '1'});  // ----------- NEW LINE ---------------
    });
  }
  
  render() {
    return (      
      <h1>Hello {this.props.name}</h1>      
    );
  }
}

React.render(
  <NameComponent name="Boki"/>,
  document.getElementById('root')
);

http://jsbin.com/xujaparucu/3/edit?js,output​

Now we can start!

https://github.com/ofirdagan/build-your-own-react

Step #1 - Hello World

Great Success

Step #2 - Non DOM Elements AKA Components :)

Recap:

• div
• element
• stateless component
• dom children
• react class

We rendered:

Step #3 - Props and State

Recap:

• props support for stateless/class components
• handled dom attributes (including class and style)
• stateful components

We implemented:

Step #4 - JSX

<JSX/>

Step #5 - Complex Examples

Wait a minute... This doesn't seem so

efficient

And where is this "virtual dom" I keep hearing about

Time to face the truth 

Let's do some performance analysis

The Naive Algorithm

• Clear the DOM
• Render the root component
• Replace all of the DOM nodes with new ones

A Better Algorithm

• We're already in javascript realm
  (everything is written in js)
• So instead of creating the DOM elements straight away let's keep a js tree object (basically json)
• Apply the render on it
• Read the real DOM 
• Figure out the differences
• Apply only the changes on the DOM

An Better Algorithm

• We already calculated the full js tree which is the same as the DOM
• So instead of diffing against the current DOM
• On rerender create a new js tree (virtual DOM)
• Diff between the two virtual DOMs (very very fast)
• Figure the changes
• Apply only the changes on the DOM

FIBER - The Next Generation

Lin Clark - A Cartoon Intro to Fiber - React Conf 2017

Other

React Renderers

• React Hardware (IOT) - <Led/> <Switch/> <pin/>
• ReactNative - <Text/> <View/> <KeyboardAvoidingView/>

Reading List and Inspirations for this talk

• Introduction to React (Original Video 😎)
• React Under The Hood (React Next 2016)
• How React works 'under the hood'
• Reconciliation
• Lifecycle Events
• How Virtual-DOM and diffing works in React

Thank You

https://github.com/ofirdagan/build-your-own-react

Ofir Dagan

@ofirdagan2

ofird@wix.com