ReactDOM render process - Mini Project: Build & Apply

ReactDOM Render Process

📖 Scenario: You are building a simple React app that shows a greeting message on a webpage. You will learn how to set up the React root and render a component using ReactDOM.

🎯 Goal: Build a React app that renders a Greeting component inside a root element using ReactDOM.createRoot and root.render.

📋 What You'll Learn

Create a React component called Greeting that returns a <h1> with the text 'Hello, React!'.

Create a root container using ReactDOM.createRoot targeting the HTML element with id root.

Render the Greeting component inside the root container using root.render.

💡 Why This Matters

🌍 Real World

ReactDOM rendering is the basic step to show React components on a webpage. Every React app uses this process to display UI.

💼 Career

Understanding ReactDOM render process is essential for frontend developers working with React to build interactive web applications.

1

Create the Greeting component

Create a React functional component called Greeting that returns an <h1> element with the text 'Hello, React!'.

React

// Create the Greeting component
// Your code here

Hint

Use a function named Greeting that returns JSX with an <h1> tag containing 'Hello, React!'.

2

Create the React root container

Create a constant called root and assign it the result of ReactDOM.createRoot targeting the HTML element with id root using document.getElementById('root').

React

function Greeting() {
  return Hello, React!;
}

// Create the root container
// Your code here

Hint

Use ReactDOM.createRoot with document.getElementById('root') and assign it to root.

3

Render the Greeting component

Use the root.render method to render the <Greeting /> component inside the root container.

React

function Greeting() {
  return Hello, React!;
}

const root = ReactDOM.createRoot(document.getElementById('root'));

// Render the Greeting component
// Your code here

Hint

Call root.render with <Greeting /> as the argument.

4

Add the HTML root element

Add an HTML <div> element with the id root inside the <body> of your HTML file. This is where React will render the app.

React

Hint

Make sure to add <div id="root"></div> inside the <body> tag in your HTML file.

Practice

1. What is the main purpose of ReactDOM.createRoot in React?

easy

A. To define a new React component

B. To update the state of a component

C. To create a root container to render React components into the DOM

D. To fetch data from an API

Solution

1. Step 1: Understand ReactDOM.createRoot role

   This function creates a root container that connects React with a specific DOM element.

2. Step 2: Connect React components to the DOM

   Using this root, React can render components inside the chosen HTML element.

3. Final Answer:

   To create a root container to render React components into the DOM -> Option C

4. Quick Check:

   ReactDOM.createRoot creates root container [OK]

Hint: ReactDOM.createRoot sets where React shows content [OK]

Common Mistakes:

• Confusing createRoot with component creation
• Thinking it updates state
• Assuming it fetches data

2. Which of the following is the correct syntax to render a React component App inside a DOM element with id root using React 18+?

easy

A. const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

B. ReactDOM.render(, document.getElementById('root'));

C. ReactDOM.createRoot().render(document.getElementById('root'));

D. const root = ReactDOM.render(document.getElementById('root')); root.createRoot();

Solution

1. Step 1: Identify React 18+ render syntax

   React 18+ uses ReactDOM.createRoot with root.render to mount components.

2. Step 2: Match correct method calls and parameters

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); correctly calls createRoot with the DOM element, then calls render with the component.

3. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   ReactDOM.createRoot + root.render = correct syntax [OK]

Hint: Use createRoot on element, then call render with component [OK]

Common Mistakes:

• Using old ReactDOM.render syntax in React 18+
• Swapping parameters in createRoot or render
• Calling methods in wrong order

3. Given the code below, what will be displayed on the web page?

const root = ReactDOM.createRoot(document.getElementById('root'));
function Greeting() {
  return <h1>Hello, React!</h1>;
}
root.render(<Greeting />);

medium

A. Hello, React! inside an h1 heading

B. An empty page

C. Error: Greeting is not defined

D. The text 'Greeting' displayed

Solution

1. Step 1: Understand component definition and rendering

   The Greeting function returns an h1 element with text 'Hello, React!'.

2. Step 2: ReactDOM renders Greeting component inside 'root'

   Calling root.render with <Greeting /> displays the returned h1 content in the page.

3. Final Answer:

   Hello, React! inside an h1 heading -> Option A

4. Quick Check:

   Component returns h1 with text, so page shows it [OK]

Hint: Component returns h1 with text, so that text appears [OK]

Common Mistakes:

• Thinking component name shows as text
• Expecting error without import
• Assuming empty page without render

4. What is wrong with the following ReactDOM render code?

const root = ReactDOM.createRoot('root');
root.render(<App />);

medium

A. createRoot cannot be assigned to a variable

B. root.render should be called before createRoot

C. App component must be a class component

D. The argument to createRoot should be a DOM element, not a string

Solution

1. Step 1: Check createRoot argument type

   createRoot expects a DOM element, but 'root' is a string, not an element.

2. Step 2: Correct usage requires document.getElementById('root')

   We must pass document.getElementById('root') to get the actual DOM node.

3. Final Answer:

   The argument to createRoot should be a DOM element, not a string -> Option D

4. Quick Check:

   createRoot needs DOM element, not string [OK]

Hint: Pass DOM element, not string, to createRoot [OK]

Common Mistakes:

• Passing string id instead of element
• Calling render before createRoot
• Thinking component type matters here

5. You want to render a React component Dashboard inside a div with id app-root. You also want to ensure the component updates correctly when state changes. Which code snippet correctly sets up the ReactDOM render process for this scenario?

hard

A. const root = ReactDOM.createRoot('app-root'); root.render(Dashboard);

B. const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render();

C. ReactDOM.render(, document.getElementById('app-root'));

D. const root = ReactDOM.createRoot(document.querySelector('#app-root')); root.render(Dashboard());

Solution

1. Step 1: Select the correct DOM element

   Use document.getElementById('app-root') to get the div element for rendering.

2. Step 2: Use ReactDOM.createRoot and root.render properly

   Call createRoot with the element, then render the component as JSX (<Dashboard />) to enable React updates.

3. Step 3: Avoid passing string or calling component as function

   Passing string or calling Dashboard() directly breaks React's rendering and update process.

4. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render(<Dashboard />); -> Option B

5. Quick Check:

   createRoot + render with JSX component = correct [OK]

Hint: Use createRoot on element, render JSX component for updates [OK]

Common Mistakes:

• Passing string instead of element to createRoot
• Using old ReactDOM.render in React 18+
• Calling component as function instead of JSX