concept dom in category react

This is an excerpt from Manning's book Isomorphic Web Applications: Universal Development with React. Login to get full access to this book.

The server does three important things. First, it fetches the data required for the view. Then it takes that data and uses it to render the DOM. Finally, it attaches that data to the DOM so the browser can read in the app state. Figure 1.5 shows the flow on the server.

To build the view for the recipes app, I’ll show you how to take advantage of React to implement a declarative view that can be used to render both on the server and the browser. React offers a render cycle that allows you to easily separate which code will run on both the server and browser and which will run on only the browser. Additionally, React comes with built-in methods for constructing the DOM on both the server and the browser.

Listing 2.4. Browser entry point—src/main.jsx

import React from 'react'; #1 import ReactDOM from 'react-dom'; #1 import App from './components/app.jsx'; #2 require('./style.css'); #3 ReactDOM.render( #4 <App />, #4 document.getElementById('react-content') #4 ); #1 Imports React dependencies #2 Includes root App component #3 Includes styles #4 Renders the App component into the DOM—second parameter indicates the DOM element React should be rendered into

copy

Figure 3.4. The continuous update and diff cycle that React goes through to keep the DOM up-to-date

This is an excerpt from Manning's book React in Action. Login to get full access to this book.

Figure 1.3. The DOM and virtual DOM. React’s virtual DOM handles change detection in data as well as translating browser events into events that React components can understand and react to. React’s virtual DOM also aims to optimize changes made to the DOM for the sake of performance.

The best way to ensure that we understand React’s virtual DOM is to start by checking our understanding of the DOM. If you already feel you have a deep understanding of the DOM, feel free to move ahead. But if not, let’s start with an important question: what is the DOM? The DOM, or Document Object Model, is a programming interface that allows your JavaScript programs to interact with different types of documents (HTML, XML, and SVG). There are standards-driven specifications for it, which means that a public working group has created a standard set of features it should have and ways it should behave. Although other implementations exist, the DOM is mostly synonymous with web browsers like Chrome, Firefox, and Edge.

Often, you’ll build React applications in a context that involves non-React libraries that also work with the DOM. These might include things like jQuery, jQuery plugins, or even other front-end frameworks. We’ve seen that React manages the DOM for you and that this can simplify how you think about user interfaces. There are still times, though, where you need to interact with the DOM, and it’s often in the context of third-party libraries that use it. We’ll explore some ways you can go about doing that with React in this chapter as you add Mapbox maps to posts in Letters Social.

There are often situations when you’re working on a project or feature that requires you to integrate React with a non-React library. You might be working with something like Mapbox (as you are in this chapter), or it could be another third-party library that wasn’t written with React in mind. Given how React DOM manages the DOM for you, you may wonder if this is something you can even do. The good news is that React provides some nice escape hatches that make working with these sorts of libraries possible.