ReactDOM render process - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a React component into the root element.

React

ReactDOM.[1](<App />, document.getElementById('root'));

Drag options to blanks, or click blank then click option'

Arender

BcreateElement

Chydrate

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using createElement instead of render

Using useState which is a hook, not a render method

Using hydrate which is for server-side rendering

The render method of ReactDOM is used to display a React component inside a DOM element.

2fill in blank

medium

Complete the code to create a root for React 18+ rendering.

React

const root = ReactDOM.[1](document.getElementById('root'));

Drag options to blanks, or click blank then click option'

Arender

BcreateRoot

ChydrateRoot

DcreateElement

Attempts:

3 left

💡 Hint

Common Mistakes

Using render instead of createRoot in React 18+

Using hydrateRoot which is for hydration

Using createElement which creates React elements, not roots

In React 18+, createRoot is used to create a root for concurrent rendering.

3fill in blank

hard

Fix the error in the code to render the component using the root.

React

root.[1](<App />);

Drag options to blanks, or click blank then click option'

Ahydrate

BcreateRoot

Crender

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Calling createRoot again on the root object

Using hydrate which is for hydration

Using useEffect which is a hook, not a root method

After creating a root with createRoot, you call render on it to display the component.

4fill in blank

hard

Fill both blanks to hydrate a server-rendered React app.

React

ReactDOM.[1]Root(document.getElementById('root')).[2](<App />);

Drag options to blanks, or click blank then click option'

Ahydrate

Brender

DcreateRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using renderRoot instead of hydrateRoot

Using hydrate directly without createRoot or hydrateRoot

Mixing up render and hydrate methods

To hydrate a server-rendered app in React 18+, you use hydrateRoot to create the root and then render to display the component.

5fill in blank

hard

Fill all three blanks to create a root and render a component with strict mode.

React

const root = ReactDOM.[1](document.getElementById('root'));
root.[2](
  <React.[3]>
    <App />
  </React.[3]>
);

Drag options to blanks, or click blank then click option'

AcreateRoot

Brender

CStrictMode

DhydrateRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using hydrateRoot instead of createRoot for client rendering

Not wrapping in StrictMode

Using render on ReactDOM instead of on the root

This code creates a root with createRoot, then renders the App component wrapped in StrictMode for extra checks.

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