Introduction to ReactDOM

What is ReactDOM?

React is excellent for building user interfaces with components, but on its own, it doesn't know how to interact with a web browser. React components are essentially blueprints, describing what the UI should look like in a given state. They are JavaScript objects, not actual HTML elements that a browser can display.

This is where ReactDOM comes in. It acts as the bridge between your React components and the Document Object Model (DOM) of the browser. Think of React as the architect who designs the house, and ReactDOM as the construction crew that takes those blueprints and builds the physical house on a piece of land.

ReactDOM's main job is to translate your React components into the actual elements you see on a webpage.

The DOM is a tree-like structure of all the HTML elements on a page. When you want to change something on the screen, like adding a new item to a list or showing a pop-up, you need to change the DOM. ReactDOM handles this process efficiently. Instead of you manually telling the browser to create a new <div> or update a <p> tag, ReactDOM takes care of it based on your component's instructions.

Connecting to the Browser

A React application needs a starting point, a place in your HTML file where the entire app will live. Typically, this is a single, empty <div> element. This element is the container, or “root,” for everything React will render.

<!-- public/index.html -->

<div id="root"></div>

Your React code then targets this specific div to inject the application. This is done using one of ReactDOM's core methods. Let's look at how it works.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';

// 1. Find the root element in our HTML.
const rootElement = document.getElementById('root');

// 2. Tell ReactDOM to create a root for our app in that element.
const root = ReactDOM.createRoot(rootElement);

// 3. Define a simple React component.
function App() {
  return <h1>Hello from React!</h1>;
}

// 4. Render the component into the root.
root.render(<App />);

Let’s break that down:

We use standard JavaScript, document.getElementById('root'), to grab the empty div from our HTML file.
ReactDOM.createRoot() prepares that div to be managed by React. It establishes it as the main entry point.
We create a simple component called App.
Finally, root.render(<App />) tells React to take our App component, turn it into real DOM nodes, and place it inside the root div.

Key ReactDOM Methods

While you'll mostly use createRoot and render, it's good to know about a few other ReactDOM methods you might encounter.

Method	Purpose
`createRoot()`	Creates a root to display React components inside a browser DOM node. This is the modern way to start a React app.
`root.render()`	Renders a React element (like `<App />`) into the root. React will manage the content inside.
`hydrateRoot()`	Similar to `createRoot`, but used when you have HTML already rendered from a server (Server-Side Rendering). It attaches React to the existing markup.

The main takeaway is that ReactDOM is the specific library that gives React its power within a web browser. It connects your abstract components to the tangible page the user sees and interacts with.

Mastering React DOM

Mastering React DOM

Introduction to ReactDOM

What is ReactDOM?

Connecting to the Browser

Key ReactDOM Methods