Reactframework~30 mins

ReactDOM render process - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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