ReactDOM render process

Introduction

The ReactDOM render process shows how React puts your components on the web page. It helps you see your app's content in the browser.

When you want to show a React component inside a web page.

When you create a new React app and need to display the main component.

When updating the UI after changes in your React app.

When testing how your React components appear in the browser.

Syntax

React

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Use ReactDOM.createRoot to start rendering in React 18+.

The render method shows the React component inside the chosen HTML element.

Examples

This renders a simple heading inside the element with id 'app'.

React

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<h1>Hello World</h1>);

This renders a custom React component called MyComponent inside the element with id 'root'.

React

import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

Sample Program

This example creates a simple React component called Greeting that shows a welcome message. Then it uses ReactDOM's render process to display it inside the HTML element with id 'root'.

React

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greeting() {
  return <h2>Welcome to React!</h2>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);

Important Notes

Always make sure the HTML element you target (like root) exists in your HTML file.

ReactDOM's render process replaces the content inside the target element with your React component.

In React 18+, use ReactDOM.createRoot instead of the old ReactDOM.render.

Summary

ReactDOM render process shows your React components on the web page.

Use ReactDOM.createRoot and root.render() to display components.

Target an existing HTML element to place your React app content.