Setup and Vite

Start a new React project with Vite and get to know the project structure.

Setup and Vite

The fastest way to start a new React project is Vite. Vite opens the dev server in seconds and reflects changes on screen instantly.

In the terminal you run: npm create vite@latest my-app -- --template react. This creates a folder named my-app and drops an initial React project inside.

Then you cd my-app, install dependencies with npm install, and start the dev server with npm run dev. The browser opens at http://localhost:5173.

Project structure

A Vite project has a few key files:

index.html: the app's entry HTML; holds a <div id="root">
src/main.jsx: the file that boots React; calls ReactDOM.createRoot
src/App.jsx: the default root component
package.json: dependencies and scripts

Inside main.jsx, the line createRoot(document.getElementById('root')).render(<App />) attaches React to the #root node.

Exercise main.jsx contents

Complete the skeleton. Add a createRoot call in main.jsx: take the document.getElementById('root') node and render <App /> into it.

Show example solution

createRoot(document.getElementById('root')).render(<App />);

Test yourself

Which command opens a Vite React project?
- npm start react my-app
- npm create vite@latest my-app -- --template react
- npm new react my-app
- npm init react-app my-app --vite
Show answer

npm create vite@latest my-app -- --template react — Vite is started with npm create vite@latest ... -- --template react.

The div that hosts React

React renders into the node with ____ id="root".

Show answer

React renders into the node with div id="root".

Match the files

index.html

Entry HTML
main.jsx

Boots React
App.jsx

Root component
package.json

Dependencies

Next lesson: Your first component

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies