Creating a project

Browsers do not understand JSX directly, so a React project needs a build tool. Vite does that job: it turns JSX into plain JavaScript, runs a development server and builds the finished site.

Creating it

Open a terminal in the folder where you keep projects and run:

npm create vite@latest todo-app -- --template react
cd todo-app
npm install
npm run dev

The first command creates a todo-app folder with a project template. npm install downloads React and Vite into node_modules. npm run dev starts the development server: the terminal shows the address http://localhost:5173. Open it — you will see the starter page with a counter.

What is inside

todo-app/
├── node_modules/      installed packages
├── public/            files copied as is
│   └── vite.svg
├── src/               your code
│   ├── assets/        images imported into code
│   ├── App.css
│   ├── App.jsx        the main component
│   ├── index.css      global styles
│   └── main.jsx       the entry point
├── index.html         the page with an empty root block
├── package.json       dependencies and commands
└── vite.config.js     Vite settings

Almost all the work happens in src/. The rest is set up once.

The entry point

src/main.jsx finds the root block on the page and renders the App component into it:

// src/main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

StrictMode turns on extra checks. It works only during development and helps you notice mistakes earlier.

The main component

Replace the whole content of src/App.jsx:

// src/App.jsx
export default function App() {
  return <h1>My tasks</h1>;
}

Save the file. The page in the browser updates by itself, no reload needed — it shows the heading "My tasks". src/App.css is no longer used, you can delete it.

Project commands

Stop the development server with Ctrl+C in the terminal.

Common mistake

If you run npm run dev before npm install, Vite is not found and the terminal shows an error like vite: not found. Every new project, or one downloaded from a repository, is installed with npm install first and started only after that.