In this lesson, we are going to learn how to modify a React application, understand how React renders content to a web page, and explore the purpose of the
createRoot()andrender()methods. We will examine the roles of theApp.jsx,main.jsx, andindex.htmlfiles, and discover how they work together to display React components in the browser. The lesson will also introduce the concept of the root node and explain how JSX is rendered within a React application. By the end of this lesson, students will be able to create and render simple React components while gaining a clear understanding of the React rendering process.
Now that or development environment is set up, let’s try to modify the default app to display “Hello, World!”.
Modify the React App
Look in the project directory, and you will find a src folder. Inside the src folder there is a file called App.jsx, open it and it will look like this:
Example
This is the default content of the App.jsx file in the src folder:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from './assets/vite.svg'
import heroImg from './assets/hero.png'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<section id="center">
<div className="hero">
<img src={heroImg} className="base" width="170" height="179" alt="" />
<img src={reactLogo} className="framework" alt="React logo" />
<img src={viteLogo} className="vite" alt="Vite logo" />
</div>
<div>
<h1>Get started</h1>
<p>
Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
</p>
</div>
<button
type="button"
className="counter"
onClick={() => setCount((count) => count + 1)}
>
Count is {count}
</button>
</section>
<div className="ticks"></div>
<section id="next-steps">
<div id="docs">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#documentation-icon"></use>
</svg>
<h2>Documentation</h2>
<p>Your questions, answered</p>
<ul>
<li>
<a href="https://vite.dev/" target="_blank">
<img className="logo" src={viteLogo} alt="" />
Explore Vite
</a>
</li>
<li>
<a href="https://react.dev/" target="_blank">
<img className="button-icon" src={reactLogo} alt="" />
Learn more
</a>
</li>
</ul>
</div>
<div id="social">
<svg className="icon" role="presentation" aria-hidden="true">
<use href="/icons.svg#social-icon"></use>
</svg>
<h2>Connect with us</h2>
<p>Join the Vite community</p>
<ul>
<li>
<a href="https://github.com/vitejs/vite" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#github-icon"></use>
</svg>
GitHub
</a>
</li>
<li>
<a href="https://chat.vite.dev/" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#discord-icon"></use>
</svg>
Discord
</a>
</li>
<li>
<a href="https://x.com/vite_js" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#x-icon"></use>
</svg>
X.com
</a>
</li>
<li>
<a href="https://bsky.app/profile/vite.dev" target="_blank">
<svg
className="button-icon"
role="presentation"
aria-hidden="true"
>
<use href="/icons.svg#bluesky-icon"></use>
</svg>
Bluesky
</a>
</li>
</ul>
</div>
</section>
<div className="ticks"></div>
<section id="spacer"></section>
</>
)
}
export default AppTry replacing the entire file content with the code below and save the file.
Example
Replace all the content of the App.jsx file with the code below:
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;See the changes in the browser when you click Save.
Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!
The result:
Congratulations! You’ve just modified your first React application.
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="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</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.
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>
)
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
)
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>
— End of Lesson —
