Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SASS VUE GEN AI SCIPY CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING BASH RUST

React Render HTML


React's goal is in many ways to render HTML in a web page.

React renders HTML to the web page via a container, and a function called createRoot().


The Container

React uses a container to render HTML in a web page.

Typically, this container is a <div id="root"></div> element in the index.html file.

If you have followed the steps in the previous chapter, you should have a file called index.html in the root directory of your project:

Example

The default content of the index.html file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

To better understand the content of the index.html file, let's remove all the code we don't need.

Example

The index.html file should now look like this:

<!doctype html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

The file is now stripped from unnecessary code, and we can concentrate on learning React without any disturbing elements.


The createRoot Function

The createRoot function is located in the main.jsx file in the src folder, and is a built-in function that is used to create a root node for a React application.

Example

The default content of the src/main.jsx file:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <App />
    </StrictMode>
  )  

The createRoot() function takes one argument, an HTML element.

The purpose of the function is to define the HTML element where a React component should be displayed.

To better understand the createRoot function, let's remove unnecessary code and write our own "Hello React!" example:

Example

The src/main.jsx file should now look like this:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <h1>Hello React!</h1>
)  

If you save the file, the result in the browser will look like this:


The render Method

Did you notice the render method?

The render method defines what to render in the HTML container.

The result is displayed in the <div id="root"> element.

Example

Display a paragraph inside the "root" element:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>Welcome!</p>
) 

The result will look like this:


Note: the element id does not have to be "root", but this is the standard convention.



Show React

W3Schools has its own "Show React" tool where we will show the result of the code we explain in the tutorial.

Click the "Run Example" button to see the result:

Example

The same example shown in our "Show React" tool:

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('root')).render(
  <p>Welcome!</p>
) 
Run Example »

The HTML Code

The HTML code in this tutorial uses JSX which allows you to write HTML tags inside the JavaScript code:

Don't worry if the syntax is unfamiliar, you will learn more about JSX later in this tutorial.

Example

Create a variable that contains HTML code and display it in the "root" node:

import { createRoot } from 'react-dom/client'

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

createRoot(document.getElementById('root')).render(
  myelement
)

Run Example »


The Root Node

The root node is the HTML element where you want to display the result.

It is like a container for content, managed by React.

It does NOT have to be a <div> element and it does NOT have to have the id='root':

Example

The root node can be called whatever you like.

Display the result in the <header id="sandy"> element:

<!doctype html>
<html lang="en">
  <body>
    <header id="sandy"></header>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('sandy')).render(
  <p>Welcome!</p>
) 

Run Example »



×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.