Создание проекта

Браузер не понимает JSX напрямую, поэтому React-проекту нужен инструмент сборки. Его роль выполняет Vite: он превращает JSX в обычный JavaScript, запускает сервер разработки и собирает готовый сайт.

Создание

Откройте терминал в папке, где будут лежать проекты, и выполните:

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

Первая команда создаёт папку todo-app с заготовкой проекта. npm install скачивает React и Vite в папку node_modules. npm run dev запускает сервер разработки: в терминале появится адрес http://localhost:5173. Откройте его — вы увидите стартовую страницу со счётчиком.

Что внутри

todo-app/
├── node_modules/      установленные пакеты
├── public/            файлы, которые копируются как есть
│   └── vite.svg
├── src/               ваш код
│   ├── assets/        картинки, которые импортируются в код
│   ├── App.css
│   ├── App.jsx        главный компонент
│   ├── index.css      общие стили
│   └── main.jsx       точка входа
├── index.html         страница с пустым блоком root
├── package.json       зависимости и команды
└── vite.config.js     настройки Vite

Почти вся работа идёт в папке src/. Остальное настраивают один раз.

Точка входа

Файл src/main.jsx находит на странице блок root и выводит в него компонент App:

// 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 — режим дополнительных проверок. Он работает только при разработке и помогает заметить ошибки раньше.

Главный компонент

Замените всё содержимое src/App.jsx:

// src/App.jsx
export default function App() {
  return <h1>Мои задачи</h1>;
}

Сохраните файл. Страница в браузере обновится сама, перезагружать её не нужно, — на ней будет заголовок «Мои задачи». Файл src/App.css больше не используется, его можно удалить.

Команды проекта

Остановить сервер разработки можно сочетанием Ctrl+C в терминале.

Частая ошибка

Если запустить npm run dev до npm install, Vite не найдётся и терминал покажет ошибку вроде vite: not found. Каждый новый или скачанный из репозитория проект сначала устанавливают командой npm install, и только потом запускают.