React DOM rendering process

Single Page Application (SPA) is:

Loads a single HTML page initially.
Dynamically updates the content of the page using JavaScript.
Uses client-side routing to change the URL without reloading the page.
Provides a faster and smoother user experience.

React is ideal for building SPAs because it allows developers to create reusable components, manage state efficiently, and handle routing on the client side.

To achieve Single Page Application (SPA) features in React Js there are three 3 main files play role in it.

index.html
index.jsx
App.jsx

1. index.html

Location: Found in the public/ folder of a React project.

Purpose:

This is the single HTML file that serves as the entry point for the React application.
It contains a <div> element with an id (usually root), which acts as the mounting point for the React application.
React dynamically injects the entire application into this div using JavaScript.

Key Features:

It is static and does not change during runtime.
Any global assets like meta tags, external stylesheets, or scripts can be added here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!-- React will inject the app here -->
</body>
</html>

2. index.jsx

Location:
- Found in the src/ folder of a React project.
Purpose:
- This is the main JavaScript/JSX file that initializes the React application.
- It renders the root React component (usuallyApp.jsx) into thedivwith theid="root"inindex.html.
- It is responsible for setting up the React rendering process and often includes configurations like React Router or Redux.
Key Features:
- Uses ReactDOM.createRoot() (or ReactDOM.render() in older versions) to render the React app.
- Typically imports global styles and libraries.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from'./App';
import './index.css'; // Global styles


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

3. App.jsx

Location: Found in the src/ folder of a React project.
Purpose:
- This is the root component of the React application.
- It acts as the central hub for the app, where other components are imported and rendered.
- It defines the structure and layout of the application.
Key Features:
- Contains the main UI logic and layout.
- Often includes routing logic (if using React Router).
- Serves as the parent component for all other components in the app.

import React from 'react';
const App= () => {
return (
<div>
<h1>Welcome to My React App</h1>
<p>This is the main application component.</p>
</div>
  );
};
export default App;

ReactDOM and Its Utility

ReactDOM is a core package in the React library that provides methods to interact with the DOM (Document Object Model). It acts as the bridge between React components and the browser's DOM, enabling React to render components, update the UI, and manage DOM elements efficiently. ReactDOM is essential for rendering React applications in the browser or other environments.

Key Utilities of ReactDOM

1. Rendering Components to the DOM

The ReactDOM.render() method is used to render React components into a specific DOM node in the browser.

Example:

import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));

In this example, the App component is rendered into the DOM element with the ID root.

2. Hydrating Server-Side Rendered Applications

The ReactDOM.hydrate() method is used to hydrate a server-rendered React application. It attaches event listeners to the existing HTML generated by the server.
This is particularly useful for server-side rendering (SSR) to improve performance and SEO.

Example:

ReactDOM.hydrate(<App />, document.getElementById('root'));

3.Creating Portals

The ReactDOM.createPortal() method allows rendering child components into a DOM node outside the parent component's hierarchy. This is useful for creating modals, tooltips, or popups.

import ReactDOM from 'react-dom';
function Modal({ children }) {
  return ReactDOM.createPortal(
<divclassName="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

In this example, the modal content is rendered into a separate DOM node (modal-root), outside the main application hierarchy.

4. Unmounting Components

The ReactDOM.unmountComponentAtNode() method is used to unmount a React component from a specific DOM node. This cleans up resources and removes event listeners associated with the component.

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

5. Client-Side Rendering with `createRoot()`

Starting with React 18, ReactDOM.createRoot() is used to create a root for rendering components. It enables concurrent rendering, which improves performance and responsiveness.

import React from 'react';
import ReactDOM from'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

This method replaces the older ReactDOM.render() and is now the recommended way to render components in React 18 and beyond.

Comments