Entry File
Last updated: 2026-11-02
Entry File Entry File
The entry file — usually src/main.jsx — is where a React application starts: it mounts the root component onto the DOM node declared in index.html. You rarely change it during day-to-day development, but understanding the mounting flow helps you debug startup problems such as a blank page. It is also the file that decides which build pipeline and which plugins apply to the whole app.
| Group | Core Concepts |
|---|---|
| Kind | Tooling |
| Since | React 18 (createRoot API) |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
// src/main.jsx — the application starts here
import { createRoot } from 'react-dom/client'
import App from './App'
createRoot(document.getElementById('root')).render(<App />)
// ↑ finds the #root node in index.html ↑ mounts the root componentReturns：No return value — this is the startup file of the project.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A card titled "Application startup flow" shows only step ① at first; every button click reveals one more line, and after the fourth step the next click starts over, simulating the full chain through which the entry file mounts the application.💡 Key Points
⚠️ Warning For a blank page, check two things first: whether #root exists in index.html and whether main.jsx is correctly included by index.html.
ℹ️ Info Since React 18 the createRoot API is used; the older ReactDOM.render call belongs to the React 17 era.
💡 Tip A page should mount the root component exactly once; when several React apps coexist, give each one its own mount node.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Which file is the React entry file?
A In a Vite project it is src/main.jsx by default (main.tsx for the TypeScript template). index.html loads it with a <script> tag and it is responsible for mounting the root component.
Q What does createRoot do?
A It creates a React root on the given DOM node and returns a root instance with a render method; all of React 18's concurrent features are enabled through this createRoot entry point.
Q How is a blank page related to the entry file?
A Very often: a mismatched #root id, a missing entry script, or an error thrown by the root component all produce a blank page. Read the console error first, then check the entry file.
