Follow the project entry point

Every Vite React project starts with ordinary HTML. Open index.html and you will find the DOM node React will manage:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

The script tag loads your JavaScript entry file. That file finds the root node and creates a React root:

import { createRoot } from 'react-dom/client'
import App from './App.jsx'

const container = document.getElementById('root')
const root = createRoot(container)

root.render(<App />)

Run the dev server and open the page. You should see whatever App returns on screen. App becomes the top component in the React tree. It can return HTML elements and other components, which return more elements and components.

Keep two trees separate in your mind:

• The component tree describes which React components render other components.
• The DOM tree contains the browser elements React produced.

React DevTools shows the component tree. The Elements panel shows the DOM tree. A component may return several DOM elements, or return another component without adding a wrapper.

Hot module replacement in Vite updates your components when you save a file. The root and createRoot call stay the same. Only the component functions inside the tree change.

If document.getElementById('root') finds nothing, React has nowhere to render. The page stays blank. Check that the HTML ID and JavaScript selector match exactly. A typo in 'root' is enough to break the whole app.

The entry file is usually named main.jsx or main.tsx in a Vite project. Create React App used index.js instead. The filename varies, but the pattern is the same: find the root element, call createRoot, then render.

Open both DevTools panels. Find App in the Components tab and its heading in the Elements tab. That split view is the mental model for everything that follows in this course.