How a React 19 Application Loads and Gets Started
Whenever we create a React 19 project with Vite and run it with the help of the npm run dev command, it looks like the below image.
Now, we will try to understand how a React19 application is loaded and started. For this, try to understand these 3 steps:
Step 1
It renders the “index.html” page. On this page, inside the body tag, there is a “div” having id “root”, like this:
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
This is the place (div) where a React application gets loaded.
Step 2
Now, this id (root) can be seen in the file “main.jsx” file inside the render method, like this:
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
// Selecting the root DOM element
const container = document.getElementById('root');
// Creating a React root
const root = createRoot(container);
// Rendering the App component
root.render(<App />);
But where does this App component come from? It is defined in the App.jsx file. To use it in the index.js file, you must import it like this:
import App from './App';
Step 3
Let’s navigate to the App.js file, where we find the first and only React component provided by default in our application.
function App() {
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Welcome to Vite + React 19</h1>
<p className="read-the-docs">
Application Developed By Study Trigger
</p>
</>
)
}
We save the changes and run our application; the browser will now display output similar to the image below.
Conclusion:
From the above article, let’s quickly review how a React19 application gets loaded.
