Follow the project entry point

A Vite React project starts with ordinary HTML. index.html contains the DOM node React will manage:

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

The JavaScript entry file finds that 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 />)

App becomes the top component in the React tree. It can return HTML elements and other components, which return more elements and components.

Keep the 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.

If document.getElementById('root') finds nothing, React has nowhere to render. Check that the HTML ID and JavaScript selector match.

Open both DevTools panels. Find App in one and its heading in the other.