React Setup with Vite

Learning objectives#

• Create a React project with Vite
• Understand the files in a new project
• Run the dev server and see hot reload
• Build and preview a production version

Explanation#

You need Node.js (LTS). Then npm create vite@latest my-app -- --template react (or react-ts for TypeScript) scaffolds a project.

npm install downloads dependencies; npm run dev starts the dev server at http://localhost:5173 with hot module replacement — save a file and the page updates without losing state.

index.html is the entry page; src/main.jsx mounts the app with createRoot(document.getElementById("root")).render(<App />); src/App.jsx is your first component.

npm run build produces an optimised dist/ folder (minified JS, hashed file names); npm run preview serves it locally to test.

Create React App is deprecated. For server rendering and file-based routing, React’s docs recommend frameworks such as Next.js or React Router; Vite is ideal for client-side apps and learning.

Syntax#

1npm create vite@latest shop-ui -- --template react
2cd shop-ui
3npm install
4npm run dev

Code example: The two files every Vite React app starts with#

1// src/main.jsx — mounts React into <div id="root"> in index.html
2import { StrictMode } from 'react';
3import { createRoot } from 'react-dom/client';
4import App from './App.jsx';
5import './index.css';
6

7createRoot(document.getElementById('root')).render(
8  <StrictMode>
9    <App />
10  </StrictMode>,
11);
12

13// src/App.jsx — your first component (edit it and watch the browser update)
14export default function App() {
15  return (
16    <main>
17      <h1>Shop UI</h1>
18      <p>Edit <code>src/App.jsx</code> and save to see hot reload.</p>
19    </main>
20  );
21}

npm run dev prints “Local: http://localhost:5173/”. The browser shows “Shop UI” and the hint text. Changing the heading in App.jsx and saving updates the page in well under a second.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. index.html contains <div id="root"></div> and loads /src/main.jsx as a module.
2. createRoot attaches React to that div; render(<App />) draws the App component inside it.
3. StrictMode runs extra development checks (it renders components twice in dev to reveal side effects).
4. App.jsx exports the component that main.jsx imports.

Real-world use case#

Common mistakes#

Best practices#

• Start with the react-ts template when you can
• Keep main.jsx minimal
• Commit package-lock.json
• Test the production build with npm run preview

Remember this#

Practice exercise#

1npm create vite@latest todo-app -- --template react
2cd todo-app
3npm install
4# edit src/App.jsx: return <h1>My Todos</h1>;
5npm run dev        # check it in the browser
6npm run build      # creates dist/
7npm run preview    # serves dist/ locally

Mini quiz#

Want more? Practise all React MCQs · React interview questions

Related topics#

My notes#

Saved in this browser.