A quick guide to learn React and how its Virtual DOM works

This is part of my “React for beginners” series on introducing React, its core features and best practices to follow. More articles are coming!

Next article >

Do you want to learn React without crawling the documentation (well written by the way)? You clicked on the right article.

We will learn how to run React with a single HTML file and then expose ourselves to a first snippet.

By the end, you will be able to explain these concepts: props, functional component, JSX, and Virtual DOM.

The goal is to make a watch which displays hours and minutes. React offers to architect our code with components. `Let’s create our watch component.

<!-- Skipping all HTML5 boilerplate -->
<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>

<!-- For JSX support (with babel) -->
<script src="https://unpkg.com/babel-standalone@6.24.2/babel.min.js" charset="utf-8"></script> 

<div id="app"></div> <!-- React mounting point-->

<script type="text/babel">
  class Watch extends React.Component {
    render() {
      return <div>{this.props.hours}:{this.props.minutes}</div>;
    }
  }

  ReactDOM.render(<Watch hours="9" minutes="15"/>, document.getElementById('app'));
</script>

Ignore HTML boilerplate and script imports for dependencies (with unpkg, see React example). The few remaining lines are actually React code.

First, define the Watch component and its template. Then mount React into the DOM and ask to render a watch.

Inject data into the component

Our watch is quite stupid, it displays the hours and minutes we provided to it.

You can try to play around and change the value for those properties (called props in React). It will always display what you asked for even if it’s not numbers.

This kind of React component with only a render function are functional component. They have a more concise syntax compared to classes.

const Watch = (props) =>
  <div>{props.hours}:{props.minutes}</div>;

ReactDOM.render(<Watch hours="Hello" minutes="World"/>, document.getElementById('app'));

Props are only data passed to a component, generally by a surrounding component. The component uses props for business logic and rendering.

But as soon as props do not belong to the component they are immutable. Thus, the component which provided the props is the only piece of code able to update props values.

Using props is pretty straightforward. Create a DOM node with your component name as the tag name. Then give it attributes named after props. Then the props will be available through this.props in the component.

What about unquoted HTML ?

I was sure you will notice the unquoted HTML returned by the render function. This code is using JSX language, it’s a shorthand syntax to define HTML template in React components.

// Equivalent to JSX: <Watch hours="9" minutes="15"/>
React.createElement(Watch, {'hours': '9', 'minutes': '15'});

Now you may want to avoid JSX to define the component’s template. Actually, JSX looks like syntactic sugar.

Take a look at the following snippet which shows both JSX and React syntax to build your opinion.

// Using JS with React.createElement
React.createElement('form', null, 
  React.createElement('div', {'className': 'form-group'},
    React.createElement('label', {'htmlFor': 'email'}, 'Email address'),
    React.createElement('input', {'type': 'email', 'id': 'email', 'className': 'form-control'}),
  ),
  React.createElement('button', {'type': 'submit', 'className': 'btn btn-primary'}, 'Submit')
)

// Using JSX
<form>
  <div className="form-group">
    <label htmlFor="email">Email address</label>
    <input type="email" id="email" className="form-control"/>
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>

Going further with the Virtual DOM

This last part is more complicated but very interesting. It will help you to understand how React is working under the hood.

Updating elements on a webpage (a node in the DOM tree) involves using the DOM API. It will repaint the page but it can be slow (see this article for why).

Many frameworks such as React and Vue.js get around this problem. They come up with a solution called the Virtual DOM.

{
   "type":"div",
   "props":{ "className":"form-group" },
   "children":[
     {
       "type":"label",
       "props":{ "htmlFor":"email" },
       "children":[ "Email address"]
     },
     {
       "type":"input",
       "props":{ "type":"email", "id":"email", "className":"form-control"},
       "children":[]
     }
  ]
}

The idea is simple. Reading and updating the DOM tree is very expensive. So make as few changes as possible and update as few nodes as possible.

Reducing calls to DOM API involves keeping DOM tree representation in memory. Since we are talking about JavaScript frameworks, choosing JSON sounds legitimate.

This approach immediately reflects changes in the Virtual DOM.

Besides, it gathers a few updates to apply later on the Real DOM at once (to avoid performance issues).

Do you remember React.createElement ? Actually, this function (called directly or through JSX) creates a new node in the Virtual DOM.

// React.createElement naive implementation (using ES6 features)
function createElement(type, props, ...children) {
  return { type, props, children };
}

To apply updates, the Virtual DOM core feature comes into play, the reconciliation algorithm.

Its job is to come up with the most optimized solution to resolve the difference between previous and current Virtual DOM state.

A quick guide to learn React and how its Virtual DOM works

Inject data into the component

What about unquoted HTML ?

Going further with the Virtual DOM

Further readings

Check out my Other Articles

➥ JavaScript

➥ Tips & tricks