Vite: Быстрый старт вашего React-проекта

На предыдущем этапе мы подготовили фундамент — установили Node.js. Теперь пора возвести стены нашего приложения. Чтобы не строить их вручную из кирпичей и раствора, мы воспользуемся «автоматическим краном».

Что такое Vite и зачем он нужен

В современной разработке никто не создает десятки файлов React-приложения с чистого листа. Это долго и легко запутаться в настройках. Вместо этого используют Vite (произносится как «Вит», с французского — «быстрый»).

Vite — это инструмент-ускоритель. Его главная задача — сборка проекта. Представьте, что у вас есть сотни разрозненных файлов с кодом. Vite берет их, склеивает, оптимизирует и превращает в компактный набор инструкций, который понимает браузер.

Сегодня Vite — стандарт индустрии. Он работает в десятки раз быстрее старых инструментов, поэтому ожидание при запуске почти нулевое. Как выглядит этот процесс, можно увидеть на Схеме 1.

Создаем первый проект

Вам понадобится терминал. Мы выполним три шага, чтобы развернуть рабочую среду.

Шаг 1: Запуск генератора

Откройте терминал и введите команду для создания папки my-react-app:

npm create vite@latest my-react-app

Шаг 2: Выбор настроек

Vite — универсальный мастер, он уточнит, какой именно проект собрать. Используйте стрелочки на клавиатуре и Enter:

1. Select a framework: выберите React.
2. Select a variant: выберите JavaScript.

🛠 Совет: Если возникла ошибка «command not found», значит, Node.js установлен некорректно. Вернитесь к прошлому уроку и проверьте установку.

Шаг 3: Оживление проекта

Vite создал папку, но она пока пуста внутри — там нет самого React. Нужно зайти в папку и скачать библиотеки (зависимости). Введите команды по очереди:

cd my-react-app
npm install

Команда npm install скачивает «мозги» вашего приложения из интернета. Это займет около минуты.

Запуск сервера разработки

Чтобы увидеть результат работы, нам нужен сервер разработки.

Сервер разработки — это программа, которая запускает ваш сайт на вашем же компьютере. Она создает локальный «мини-интернет». Главная фишка: сервер следит за вашим кодом. Как только вы измените букву в файле, сайт в браузере обновится мгновенно.

Введите финальную команду:

npm run dev

В терминале появится ссылка, например http://localhost:5173. Кликните по ней — ваш первый профессиональный React-проект запущен 🚀

Что лежит внутри

Загляните в папку my-react-app. Файлов много, но сейчас важны только три зоны:

Файл или папка	Зачем это нужно	Можно ли трогать?
node_modules	Склад всех скачанных инструментов.	Нет, там порядок наводит компьютер.
package.json	Список (чек-лист) всех настроек проекта.	Пока только смотрим.
src	Сердце проекта. Здесь живет ваш код.	Да, здесь мы будем писать код.

Если сравнить с кухней, то node_modules — это огромный холодильник с продуктами, а src — разделочная доска, где вы готовите блюдо.

Мы завели «двигатель» приложения. Но как именно код превращается в кнопки и текст на экране? В следующей теме мы разберем устройство запущенного приложения изнутри.