Как установить React — пошаговая инструкция

React не скачивают как обычную программу. Для работы с ним устанавливают Node.js, затем создают проект через npm. Самый удобный путь для новичка — Vite: одна команда создаёт готовую папку проекта, dev-сервер и сборку.

Что нужно перед установкой React

• Node.js LTS
• npm, который устанавливается вместе с Node.js
• Редактор кода, например VS Code
• Терминал: PowerShell, Terminal или встроенный терминал редактора

Для современных проектов проверяйте версию Node.js. Vite 8 требует Node.js 20.19+ или 22.12+. Если команда создания проекта ругается на версию Node, сначала обновите Node.js.

node --version
npm --version

Установка React по шагам

Дальше идёт полный минимальный цикл: поставить Node.js, создать проект, открыть его в редакторе и проверить живое обновление страницы. Если пропустить хотя бы один шаг, ошибка часто выглядит как проблема React, хотя на деле сломано окружение.

Если вы учитесь с нуля, не сокращайте этот путь до одной команды. React-проект зависит от Node.js, npm, терминала и редактора, поэтому стабильная установка начинается с проверки всей цепочки.

Шаг 1 — установить Node.js

Откройте nodejs.org, скачайте LTS-версию и установите её как обычную программу. После установки закройте и заново откройте терминал, иначе команда node может быть недоступна.

node --version
# пример: v22.12.0

npm --version
# пример: 10.x.x

Шаг 2 — создать React-проект через Vite

Для новых учебных проектов используйте Vite. Он быстро запускается, понятно устроен и сейчас является стандартным способом начать React без тяжёлого фреймворка.

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

После запуска Vite покажет адрес вроде http://localhost:5173. Откройте его в браузере — если видите стартовую страницу, React установлен и работает.

Шаг 3 — открыть проект в редакторе

code .

Главный файл приложения обычно лежит в src/App.jsx. Измените текст внутри компонента, сохраните файл и посмотрите, как страница обновится без ручной перезагрузки. Это называется Hot Module Replacement.

Можно ли использовать Create React App

Create React App долго был стандартом для новичков, но сейчас он помечен как deprecated. Его полезно знать, потому что старые проекты и старые уроки часто используют команду npx create-react-app. Для нового проекта выбирайте Vite.

# Старый способ, только если нужно повторить старый урок
npx create-react-app my-app
cd my-app
npm start

Проверка и частые проблемы

После успешного старта важно проверить не только dev-сервер, но и сборку. Так вы сразу отделяете проблемы установки от проблем кода, имени папки, версии Node.js или сетевой загрузки npm-пакетов.

Этот раздел лучше воспринимать как контрольный лист после установки. Он помогает не оставлять скрытую проблему до момента, когда вы уже начали писать компоненты и не понимаете, почему проект не собирается.

Типичные ошибки

• node: command not found — Node.js не установлен или терминал открыт до установки.
• npm create vite не запускается — устарела версия Node.js.
• страница не открывается — проверьте адрес, который напечатал Vite, обычно это localhost:5173.
• порт занят — Vite предложит другой порт, например 5174.

Проверочный сценарий после установки

После установки не ограничивайтесь тем, что стартовая страница открылась. Проверьте полный цикл: изменить файл, увидеть обновление, собрать production-версию и открыть её локально.

npm run dev
# измените src/App.jsx и сохраните файл

npm run build
npm run preview

Если dev-сервер работает, а build падает, значит в проекте есть ошибка, которую браузер в режиме разработки мог не показать сразу. Перед публикацией или передачей проекта всегда запускайте production-сборку.

Как назвать папку проекта

• Используйте латиницу: my-react-app, react-shop, todo-app.
• Не используйте пробелы и кириллицу в имени папки.
• Не называйте проект react, vite или node — это может конфликтовать с пакетами.
• Для учебных проектов удобно добавлять тему: react-router-demo, react-form-demo.

Что делать, если команда зависла

Иногда установка долго стоит на npm install. Подождите несколько минут: npm скачивает много зависимостей. Если процесс явно завис, проверьте интернет, версию Node.js и попробуйте очистить npm cache. На корпоративных сетях может мешать proxy или антивирус.

npm cache verify
npm install

Если вы учитесь на Windows, используйте PowerShell или терминал VS Code. Запуск от администратора обычно не нужен, если Node.js установлен корректно.

Если установка React не получилась с первого раза

В установке React чаще ломается не сам React, а окружение: старая Node.js, терминал открыт до установки, папка названа с пробелами или npm не может скачать зависимости.

Хорошая диагностика здесь почти всегда быстрее случайных переустановок. Идите сверху вниз: версия Node.js, терминал после установки, имя папки, интернет для npm, затем команда создания проекта и адрес dev-сервера.

Быстрая проверка окружения

• закройте и заново откройте терминал после установки Node.js;
• проверьте node —version и npm —version;
• создайте проект в папке без кириллицы и пробелов;
• если Vite просит новую Node.js, обновите Node LTS;
• если порт занят, откройте адрес, который показал Vite в терминале.

Как понять, что всё готово

Проект считается нормально установленным не тогда, когда папка появилась, а когда npm run dev открывает страницу, изменение src/App.jsx сразу видно в браузере, а npm run build проходит без ошибок.

Что изучать дальше

После установки не прыгайте сразу к Redux или UI-библиотекам. Сначала сделайте один компонент с props, затем счётчик на useState и только после этого переходите к useEffect.