Synthetic events and the Virtual DOM

Let's explore the differences between the regular DOM and the virtual DOM and what you need to consider when writing your code.

The DOM

The Document Object Model (DOM) is a programming API for HTML documents. Whenever you ask a browser to render HTML, it parses what you have written and turns it into a DOM and then displays it in the browser. It is very forgiving, so you can write invalid HTML and still get the result you want without even knowing you made a mistake.

For instance, say, you write the following line of code and parse it with a web browser:

       <p>I made a new paragraph! :)

After this, the DOM will show the following structure:

The closing </p> tag is automatically inserted for you, and a DOM element for ...

Get ReactJS Blueprints now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.