Introduction to React

A walkthrough of how React starts from index.html, attaches to the root element via main.jsx, renders App.jsx, and uses components for reusability and dynamic rendering.

React is a JavaScript library for building user interfaces. It focuses purely on the view layer, where your UI logic and rendering happen.
What makes React so powerful is its ability to efficiently update the UI without refreshing the entire page.

At its core, React builds your interface inside a single HTML element called the root, and from there, everything you see is dynamically rendered through JavaScript.

Flow of Control in React

The journey of a React app can be visualized as a chain of control:

index.html — The static shell that holds the root element.
main.jsx — The entry point that initializes React and links it to the root.
App.jsx — The top-level component that defines the structure of your interface.
Components — The reusable and dynamic building blocks of your UI.

Step 1: index.html — The Static Container

Every React app starts with a basic HTML file inside the public/ directory.
It looks simple, but this file is where React takes over the page.

<!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>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

That <div id="root"></div> is where React “mounts” your app.
Everything you build—every button, card, and layout—will exist inside this root div.
From this point on, React completely controls that section of the DOM.

Step 2: main.jsx — Bootstrapping React

main.jsx is the file that kickstarts React and connects it to the root div in index.html.

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

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

Here’s what’s happening:

createRoot() finds the root div from index.html.
render(<App />) tells React to start rendering your app from the App component.
StrictMode adds extra checks during development to help identify issues early.

From this point onward, React controls everything inside that root element. You no longer manually manipulate the DOM — React’s Virtual DOM handles it for you.

Step 3: App.jsx — The Top-Level Component

The App.jsx file defines the first React component your app renders.

function App() {
  return (
    <div className="app">
      <h1>Welcome to React</h1>
      <p>This content is rendered dynamically inside the root div.</p>
    </div>
  );
}

export default App;

This component acts as the root of your component tree.
Everything else — headers, sidebars, cards, and buttons — stems from this one parent component.

Whenever your app state or props change, React compares the new Virtual DOM to the previous one and updates only what changed in the real DOM.
This process, called reconciliation, is what makes React so efficient.

How React Updates the UI

Unlike traditional DOM manipulation, React doesn’t rebuild the entire page when something changes.
It maintains a lightweight Virtual DOM, figures out what’s different (called a diff), and updates just those parts of the UI.

One root element in HTML.
Virtual DOM rendered on top of it.
Selective, efficient updates whenever your data changes.

This means faster rendering and smoother user experiences.

Components — The Core of React

Components are the building blocks of React applications.
They’re like Lego pieces: small, self-contained units that can be reused and composed to build complex UIs.

Example Component

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

This component accepts a prop (name), which allows it to display dynamic content.
Props are like parameters that make components reusable and flexible.

function App() {
  return (
    <div>
      <Greeting name="Harsha" />
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

Here, the same Greeting component is used multiple times with different data — clean, efficient, and DRY (Don’t Repeat Yourself).

State — Dynamic Behavior Within Components

Props make components flexible from the outside.
State makes them dynamic from the inside.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Each time the button is clicked, React re-renders only this component — the rest of the app stays untouched.
That’s the beauty of React’s reactive data flow.

The Complete Flow

index.html defines a div with an ID of root.
main.jsx initializes React and mounts your app onto that root.
App.jsx defines the root component that represents your app’s structure.
Components break down your UI into reusable, isolated pieces.
React’s Virtual DOM efficiently updates the real DOM whenever data changes.

Why Components Changed the Game

Before React, UI updates involved manually targeting DOM nodes and re-rendering parts of the page.
Components changed everything by introducing:

Reusability: Write once, use anywhere.
Isolation: Each component manages its own logic and style.
Dynamic Data Flow: Components respond automatically to changes in state and props.
Predictable Rendering: The UI is always a reflection of the current state.

This model allows developers to focus on how data flows rather than worrying about low-level DOM operations.

Introduction to React

On this page