Как запустить первый проект на React: инструкция (через Vite)
Сегодня разберёмся, как с нуля запустить React-проект, настроить окружение и развернуть всё локально. Пройдём путь от установки Git и Node.js до запуска первого приложения.
- Установка Git Bash
- Установка Node.js через nvm
- Создание проекта React через Vite
- Проверяем, что всё работает
Интересуетесь всем, что связано с созданием сайтов и WEB? Подпишитесь на мой телеграм канал - Надежда Weba!
1. Устанавливаем Git Bash
Сначала ставим Git Bash - он понадобится для работы с Git и командами.
Проверим, что всё работает. Для этого вбиваем в командную строку или в git bash:
2. Ставим Node.js через nvm (Windows)
2.1 Устанавливаем nvm-windows
Чтобы удобно управлять версиями Node.js, используем nvm-windows.
Переходим сюда - https://github.com/coreybutler/nvm-windows/releases/tag/1.2.2 и скачиваем nvm-setup.exe, устанавливаем.
В процессе предложат выбрать путь куда будут ставиться активные версии Node.js, то есть папка, где будет лежать именно та версия Node, которую выберем через nvm use
⚡ Совет: можно выбрать любую папку, но главное правило: путь установки не должен содержать пробелов и кириллицы, иначе потом будут ошибки.
Далее появится окно настройки уведомлений
Node.js LTS releases — уведомлять о выходе стабильных версий (лучше оставить).
Node.js Current releases — уведомлять о свежих тестовых версиях. (можно убрать)
NVM for Windows releases — уведомлять, если выйдет новая версия самого nvm. (оставляем)
Author updates and releases — уведомлять о других проектах автора (реклама, можно убрать).
⚡ Совет: оставить 1 и 3 галочки.
2.2 Как установить Node.js
Теперь можно поставить нужную версию Node (например, последняя LTS на август 2025 — 22):
После установки проверяем версию и что всё встало как надо:
🎉 Отлично! Теперь у нас готово окружение Git + nvm + Node.js + npm
3. Создание проекта React через Vite
3.1 Открываем VS Code и в терминале переходим в папку с проектами
Открыть терминал: в верхнем меню выбираем Terminal -> New Terminal.
Вбиваем в него: cd D:/projects (или ваш путь, где храните свои проекты)
3.2 Создаем новый проект
В терминале пишем: npm create vite@latest react-cost-calculator
где react-cost-calculator - название проекта, берём любое нужное. Мое первое приложение - калькулятор, поэтому такое : )
(!) В терминале может появиться ошибка
Невозможно загрузить файл (ваш путь до файла)/nodejs\npm.ps1, так как выполнение сценариев отключено в этой системе...
Это говорит о том, что винда блокирует запуск npm-скриптов из-за настроек безопасности PowerShell. Чтобы решить её, нужно запустит PowerShell от имени администратора (Win+S → вводим PowerShell → ПКМ → "Запуск от имени администратора") и выполнить команду:
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
где -Scope CurrentUser - меняем только для одного нашего пользователя, а не для всех. А RemoteSigned позволяет запускать локальные скрипты (npm и т.д.)
Подтверждаем - Y и снова в терминале VS Code прописываем команду для создания папки проекта. Теперь должно получится!
Выбираем стрелками голубенький React, жмем Enter.
В следующем шаге выбираем JavaScript, жмем Enter. Готово!
3.3 Устанавливаем зависимости
В проекте мы пишем свой код (компоненты, стили, логику), но React сам по себе не живёт «в воздухе».
Он использует:
- ReactDOM — чтобы браузер понимал, как отрисовать компоненты.
- Vite — чтобы проект можно было запускать, собирать и оптимизировать.
- Всякие мелкие пакеты, которые нужны для запуска и сборки.
Эти пакеты хранятся в файле package.json — это как «список ингредиентов» для проекта.
Когда мы создаём проект через vite, он делает заготовку (папки, файлы, package.json), но сами пакеты пока не скачаны.
и тогда юзаем npm install, он:
- читает package.json
- скачивает все нужные пакеты из интернета
- складывает их в папку node_modules - она, кстати, весит десятки мегабайт (это норм) )
Видим, что у нас все успешно установилось:
🎉 В проекте уже был package.json, а теперь к нему добавилась папка node_modules
3.4 Запускаем локальный сервер
А теперь запускаем наш первый проект. Все так же вбиваем в терминал:
Открываем ее в браузере и-и-и...
🔥 Поздравляю! Мы запустили наш первый проект на React!
4. Проверим, что мы можем изменять проект
Чтобы убедиться, что мы реально можем писать свой код:
Открываем файл src/App.jsx и меняем содержимое на что-то простое:
function App() {
return (
<div style={{ textAlign: 'center', padding: '2rem' }}>
<h1>Калькулятор!</h1>
<p>А здесь какой-то текст!</p>
</div>
)
}
Сохраняем изменения, страница в браузере автоматом обновится. Ма-ги-я! ✨
В итоге мы: установили всё необходимое (git bash, nvm, node.js) и с помощью Vite развернули свой первый React-проект.
🔥 Поздравляю! Теперь у нас есть полноценный React-проект, и можно начинать писать код под реальные задачи. Успехов!
Гайд был полезен? — заглядывай в мой Телеграм канал - Надежда Weba!
Там я делюсь фишками, советами и лайфхаками по веб-разработке и рассказываю про свой путь.
🔥 🔥 🔥 Буду рада вашим реакциям и комментариям : )
Рассказываю, как установить Open Server v 6.3.5 - https://teletype.in/@naweba/osp6
А еще веду серию постов про то, как ускорить загрузку сайтов - https://teletype.in/@naweba/pagespeed
Также приглашаю подписаться и прочитать мои другие полезные статьи - https://teletype.in/@naweba