React  

What Actually Happens When You Render a React Component

Introduction

How does designing your own component in React end up rendering an actual UI in your browser? Even though when you check View Source, your component's code don’t appear at all?

That’s because React follows a specific rendering flow. Once you understand that flow, everything starts to click. So let’s go behind the scenes and see how it all works under the hood.

1. We all know that an App Starts with index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description"content="Web site created using create-react-app" />

    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Code snippet 1: index.html

When I run the React app and view the page source (right-click on the page and select "View Page Source"), I see the following code. Everything looks exactly like index.html except for one change: there's an extra line added (highlighted below).

React app

Image 1: View source of index.html

2. The App Loads the bundle.js File

<script defer src="/static/js/bundle.js"></script>

What is it doing?

  • It includes your entire React app, all your JavaScript files compiled into one bundle.
  • The defer attribute tells the browser: "Download this script but wait to run it until the HTML is parsed".

That bundle file contains your index.js, App.js, and everything else you wrote! This means I don't have to manually add index.js; React includes it automatically during the build process.

3. index.js Takes Control

Inside your bundle.js, React starts at src/index.js.

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

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

Code snippet 2: index.js

Let’s walk through what’s happening step by step.

Imports

  • React and ReactDOM are imported to build and render the UI.
  • index.css applies global styles (optional).
  • The app is the root component of your application.
  • reportWebVitals is used to measure app performance (optional).

Now the code,

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

document.getElementById('root') selects the <div> from index.html, see line 18 in Code Snippet 1.

React uses JavaScript to dynamically inject your UI after the page loads. The index.html file is just a shell, the actual UI gets injected into.

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  • root.render(<App />) renders your App component into the DOM. Everything inside <App /> gets turned into real HTML.
  • <React.StrictMode> doesn’t affect what’s shown on screen but helps catch bugs and warns about deprecated APIs during development.
reportWebVitals();

This function can be used to log or send performance metrics (like load time) to an analytics endpoint.

4. React Renders the App Component: App.js

Here's what your App.js file looks like.

import Header from './components/Header';
import './App.css';

function App() {
  return (
    <div className="App">
       <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
                Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
                Learn React
            </a>
        </header>
    </div>
  );
}

export default App;

Code snippet 3: App.js

This file defines a React component, a JavaScript function that returns JSX (JavaScript XML), which looks like HTML but is processed by JavaScript.

The App component here is exported as the default export from this file.

When we import an App in index.js and render it using <App />, React invokes the App function, takes the returned JSX, and transforms it into actual DOM elements that are rendered in the browser.

5. React Injects UI into the DOM

At this point, React has,

  • Grabbed the #root div
  • Rendered <App />

Open your browser’s Elements tab (right-click anywhere on the page and select Inspect, then click on the Elements tab), and you’ll now see:

Elements tab

GIF 1: Inspecting the Elements of a React App

6. Create a New Component: Header.js

Let me add a new component and walk you through how this newly added component, nested inside the App component, gets rendered in the DOM.

import logo from '../logo.svg';

function Header() {
    return (
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
                Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
                Learn React
            </a>
        </header>
    );
}


export default Header;

Code Snippet 4: Header.js

Now, let's integrate the header component into the App component. Go ahead and update the App component as follows.

import Header from './components/Header';
import './App.css';

function App() {
  return (
    <div className="App">
      <Header></Header>
    </div>
  );
}

export default App;

Code snippet 5: App.js

Now go back to the browser, you’ll see exactly the same UI.

Same UI

Image 2: Displaying the newly added Header component

But Wait… Why Do I Still See <header>, Not <Header>?

Awesome question and this is where things start to get interesting!

In code snippet 5, we called a header component like this.

<Header></Header>

But when you inspect the DOM in your browser, you’ll notice something surprising.

<header class="App-header">...</header>

So where did <Header> go?

Here’s what’s happening

React uses something called the virtual DOM, a lightweight copy of the actual DOM, to efficiently figure out what needs to be updated on the screen. When you render a component like <Header />, React doesn’t directly add a <Header> tag to the HTML. Instead, it evaluates the Header component and replaces it with whatever valid HTML it returns.

In our case, your Header component returned.

<header className="App-header">...</header>

So that’s what ends up in the real DOM.

React components are functions, not real HTML elements, so they disappear after they run, just like JavaScript functions don’t show up in your final webpage, only their output does.

Also worth knowing

Your header component is actually nested inside your App-component, and React builds a full component tree based on how you compose your UI. It goes something like:

<App>
  └── <Header>
         └── <header>...</header>

And in the browser’s DOM, you’ll only see the final output:

    <div id="root">
      <div class="App">
        <header class="App-header">
          ...
        </header>
      </div>
    </div>

Code snippet 6: root div of index.html

So, React takes your App-component, renders any nested components (like Header), and finally injects plain HTML into the real DOM, right back into the <div id="root"> inside index.html. The file where it all started comes full circle.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>React App</title>
  </head>
  <body>
    <div id="root">
      <div class="App">
        <header class="App-header">
          ...
        </header>
      </div>
    </div>
  </body>
</html>

Code snippet 7: index.html

Now that I have you here let me also explain.

Why Component Names Must Start with a Capital Letter?

React uses this rule.

  • Tags that start with lowercase letters (like <div> or <header>) are assumed to be built-in HTML elements.
  • Tags that start with uppercase letters (like <Header>) are treated as React components.

So this is why your custom components must be capitalized.

Final Flow Recap: From Load to UI

Let’s summarize the exact order of execution.

  1. HTML loads: index.html contains <div id="root">
  2. JS loads: <script defer src="/static/js/bundle.js"> kicks in
  3. Entry point: index.js runs, selects #root
  4. React takes over: ReactDOM.createRoot().render(<App />)
  5. Components render: App.js, then Header.js, etc.
  6. UI injected: React builds DOM and puts it inside #root
  7. The browser shows it all.

Conclusion

Understanding this flow gives you a huge advantage:

You can debug more confidently You know where things live and why.

From a blank div to a full UI, now you know exactly how it happens.

Happy Coding See you around!

Membership not found