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

Создаём первый React-проект инструментом Vite и разбираемся, какой файл за что отвечает.

Vite — современный сборщик и дев-сервер: он мгновенно запускает проект и обновляет страницу при сохранении файла (Hot Module Replacement).

Почему Vite, а не create-react-app

Раньше стандартом был create-react-app, но он медленный и больше не развивается. Сегодня сообщество и сама команда React рекомендуют Vite: запуск за секунды, мгновенная пересборка, минимум настроек. Нам понадобится только установленный Node.js (версии 18+).

Создаём проект

Одна команда разворачивает шаблон. Флаг --template react выбирает React без TypeScript:

npm create vite@latest my-app -- --template react

Дальше переходим в папку, ставим зависимости и запускаем дев-сервер:

cd my-app
npm install
npm run dev

В терминале появится адрес вроде http://localhost:5173 — откройте его в браузере. Меняете код, сохраняете — страница обновляется сама.

Структура проекта

Вот основные файлы, которые вы увидите:

Файл / папка	Назначение
`index.html`	Единственная HTML-страница. Внутри — пустой `<div id="root"></div>`, в который React встроит приложение
`src/main.jsx`	Точка входа: связывает React с тегом `#root`
`src/App.jsx`	Корневой компонент приложения
`src/`	Весь ваш код: компоненты, стили, ассеты
`package.json`	Зависимости и скрипты (`dev`, `build`, `preview`)

Точка входа

Файл main.jsx — это мост между HTML и React. Он находит #root и просит React отрисовать туда компонент App:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

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

createRoot создаёт «корень» React внутри #root, а render рисует в нём дерево компонентов. StrictMode — обёртка, которая в режиме разработки подсвечивает потенциальные ошибки (на готовое приложение в проде она не влияет).

Корневой компонент

А вот упрощённый App.jsx — отсюда начинается ваше приложение:

function App() {
  return (
    <div>
      <h1>Привет, React!</h1>
      <p>Это мой первый компонент.</p>
    </div>
  );
}

export default App;

Сборка для прода

Дев-сервер удобен для разработки, но в интернет выкладывают собранную версию. Команда создаёт оптимизированные файлы в папке dist/:

npm run build

Итог

npm create vite@latest my-app -- --template react создаёт проект; npm install и npm run dev запускают его.
index.html содержит #root, main.jsx монтирует туда App, App.jsx — корневой компонент.
npm run build собирает оптимизированную версию в dist/.