Intro to React > ReactDOM

ReactDOM

ReactDOM is the package containing methods we use to mount a React app to our browser DOM. As of React 18, createRoot is used from the react-dom/client package to create a "React root" from a native DOM element. Root is then used via root.render to render a React element to the element created with the root.

If this sounds confusing, don't worry. This is a library you will typically set and forget. In most cases when building a React app from a template, you will not need to set this up at all. It does not change from app to app, it typically follows this structure, with best practice to name the root element App, as well as import from a file named App.js or similar. The file we are currently in, index.js, is typical for an "entry point" of all JavaScript in our app.

The root React component is then injected beneath the DOM node that was selected, in our case it is the <div id="root"> found in index.html. Once again, it is best practice to keep these naming conventions.

StrictMode is an optional component used to warn against potential problems in your app. It does not render anything.

ReactDOM.render vs createRoot

ReactDOM.render has been deprecated as of React 18. createRoot was introduced instead in order to "provide better ergonomics for rendering roots" as discussed in this post.

Lesson 6/22

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";

const container = document.getElementById("root");
// For React 18 and up, use createRoot
const root = createRoot(container);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

/* For React 17 and below, use ReactDOM.render
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  container
);*/

Open Sandbox