by jbardon⚡

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

Picture by @simonmigaj from Unsplash
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.

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.

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 renderfunction. This code is using JSX language, it’s a shorthand syntax to define HTML template in React components.

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.

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.

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.

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.

And then apply the new Virtual DOM to the real DOM.

Further readings

This article goes far on React internal and Virtual DOM explanations. Still, it’s important to know a bit about how a framework works when using it.

If you want to learn how the Virtual DOM works in details, follow my reading recommendations. You can write your own Virtual DOM and learn about DOM rendering.

How to write your own Virtual DOM
There are two things you need to know to build your own Virtual DOM. You do not even need to dive into React’s source…medium.com

Thank you for reading. Sorry if this is too technical for your first step in React. But I hope now you are aware of what props, functional component, JSX, and Virtual DOM are.

If you found this article useful, please click on the ? button a few times to make others find the article and to show your support! ?

Don’t forget to follow me to get notified of my upcoming articles ?

This is part of my “React for beginners” series on introducing React, its core features and best practices to follow.
Next article >

➥ JavaScript

➥ Tips & tricks

Originally published at www.linkedin.com on February 6, 2018.