O'Reilly logo

React 16 Tooling by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The DOM render target

The second part of the React core is the Document Object Model (DOM) itself. In fact, the name virtual DOM is rooted in the idea that React is creating DOM representations in JavaScript before it actually talks to the DOM APIs. However, the render tree is a better name because React is creating an AST (short for Abstract Syntax Tree) based on the React components and their states. This is why the same React library is able to work with projects like React Native.

The react-dom package is used to actually translate the render tree into DOM elements in the browser by directly communicating with the browser DOM APIs. Here's what the previous diagram looks like with react-dom included:

This is a nice architecture—it means ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required