Loading lesson path
Concept visual
Start from A
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().
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:
The default content of the index.html file: <!doctype html> <html lang="en"> <head>
Formula
< 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>
Formula
< 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.The index.html file should now look like this: <!doctype html> <html lang="en"> <body> <div id="root"></div>
Formula
< 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 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.
Formula
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:
Formula
The src/main.jsx file should now look like this:import { createRoot } from 'react-dom/client'createRoot(document.getElementById('root')).render(
Formula
< h1 > Hello React!</h1 >) If you save the file, the result in the browser will look like this:
The render method defines what to render in the HTML container.
<div id="root"> element.
Display a paragraph inside the "root" element:
import { createRoot } from 'react-dom/client'createRoot(document.getElementById('root')).render(
Formula
< p > Welcome!</p >) The result will look like this:
the element id does not have to be "root", but this is the standard convention.
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:
The same example shown in our "Show React" tool:
import { createRoot } from 'react-dom/client'createRoot(document.getElementById('root')).render(
Formula
< p > Welcome!</p >)
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.
Create a variable that contains HTML code and display it in the "root" node:
import { createRoot } from 'react-dom/client'const myelement = (<table> <tr>
Formula
< th > Name </th ></tr> <tr>
Formula
< td > John </td ></tr> <tr>
Formula
< td > Elsa </td ></tr> </table>
);createRoot(document.getElementById('root')).render( myelement )
Example »
The root node is the HTML element where you want to display the result. It is like a container for content, managed by React.
<div> element and it does NOT have to have the id='root'
The root node can be called whatever you like.
<header id="sandy"> element: <!doctype html> <html lang="en"> <body> <header id="sandy"></header>
Formula
< script type ="module" src ="/src/main.jsx"></script ></body> </html>
import { createRoot } from 'react-dom/client'createRoot(document.getElementById('sandy')).render(
Formula
< p > Welcome!</p >)
Example »