Почему Vite, а не Create React App

Create React App официально признан устаревшим: он тянет сотни пакетов, собирает проект десятки секунд и не обновлялся годами. Vite запускает сервер разработки за секунды, пересобирает только изменённый модуль и остаётся стандартом для новых проектов.

Шаг 1. Node.js

Скачайте LTS-версию с nodejs.org и установите со значениями по умолчанию. Проверка в терминале:

node --version
npm --version

Нужна версия Node.js 18 или новее. Если команда не находится — перезапустите терминал: установщик добавляет путь в PATH.

Шаг 2. Создать проект

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

Флаг --template react создаёт проект на JavaScript. Для TypeScript используйте --template react-ts. Мастер спросит имя проекта — можно согласиться с предложенным.

Шаг 3. Установить зависимости и запустить

cd my-app
npm install
npm run dev

В терминале появится адрес вида http://localhost:5173. Откройте его — увидите стартовую страницу с логотипом React и счётчиком.

Что внутри проекта

• index.html — единственная HTML-страница, в неё монтируется приложение.
• src/main.jsx — точка входа, здесь приложение подключается к странице.
• src/App.jsx — корневой компонент, с него начинается ваш код.
• vite.config.js — настройки сборки и плагинов.

Первый компонент

Откройте src/App.jsx и замените содержимое на своё:

export default function App() {
  return (
    <main>
      <h1>Мой первый проект</h1>
      <p>React работает.</p>
    </main>
  );
}

Сохраните файл — браузер обновится сам, без перезагрузки страницы. Это режим горячей замены модулей (HMR).

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

npm run build

Готовые файлы появятся в папке dist: минифицированный JavaScript, CSS и HTML. Именно эту папку выкладывают на хостинг. Проверить локально можно командой npm run preview.

Частые ошибки

• npm не найден. Node.js не установлен или терминал открыт до установки.
• Порт 5173 занят. Vite выберет следующий свободный и напишет его в консоли.
• Пустой экран после сборки. Обычно неверный путь в настройках хостинга: приложение ищет файлы от корня, а лежит в подпапке.
• Не ставятся пакеты. Проверьте прокси и версию npm, иногда помогает npm cache clean --force.

Нужен сайт на React, а не статья?

Соберу интерфейс под ключ: компоненты, состояние, запросы к API, роутинг, сборка Vite и деплой. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: React с нуля, про Django, примеры HTML.