React Basics

React ES6

React Hooks

React Render HTML

❮ Previous Next ❯

React Render HTML

React's goal is in many ways to render HTML to the webpage. React achieves this by using a syntax extension called JSX, which allows you to write HTML elements directly inside your JavaScript code.

To render React components or HTML elements into the browser's DOM, we use the createRoot function provided by the react-dom/client library.

The Render Function

In modern React (React 18+), rendering usually happens in the src/index.js or src/main.jsx file like this:

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


const container = document.getElementById('root');
const root = createRoot(container);


root.render(<h1>Hello World!</h1>);

This code finds the <div> with the id of root inside your public/index.html file and renders the <h1> element inside it.

❮ Previous Next ❯