Установка и настройка React на Windows 10 21H2
Полное руководство по установке React, настройке окружения и решению типичных проблем
Введение
React - популярная JavaScript-библиотека для создания пользовательских интерфейсов. Это руководство покажет:
- Как установить необходимое окружение
- Создать первый проект
- Настроить среду разработки
- Решать распространенные проблемы
Требования
Необходимые компоненты:
- Windows 10 версии 21H2
- 4 ГБ свободного места на диске
- Права администратора
- Доступ в интернет
Рекомендуемые характеристики:
- 8 ГБ оперативной памяти
- Процессор с 4 ядрами
- Visual Studio Code или другой редактор
Установка
Основные этапы установки React
Подготовка
- Установите Node.js LTS версии:
- Скачайте с официального сайта
- Выберите вариант 18.x LTS
- Проверьте установку:
1node -v 2npm -v
- Обновите npm:
1npm install -g npm@latest
Процесс установки
- Создайте новый проект:
1npx create-react-app my-app
- Перейдите в папку проекта:
cd my-app
- Запустите сервер разработки:
1npm start
- Откройте http://localhost:3000 в браузере
Настройка
Базовая конфигурация:
- Редактирование
package.json:
"scripts": { "start": "set PORT=3001 && react-scripts start" }
- Добавление зависимостей:
1npm install react-router-dom
- Настройка линтера:
1npm install eslint --save-dev
Типичные ошибки и их решения
Проблема: Ошибка EACCES при установке пакетов Решение: Запустите PowerShell от имени администратора
Проблема: Порт 3000 занят Решение: Измените порт старта:
1set PORT=3001 && npm start
Заключение
Теперь вы можете:
- Создавать новые проекты React
- Настраивать окружение разработки
- Решать основные проблемы Для дальнейшего обучения посетите официальную документацию React
Команды
Установка Node.js
1iwr https://nodejs.org/dist/v18.18.2/node-v18.18.2-x64.msi -OutFile node-installer.msi; Start-Process node-installer.msi
Создание нового проекта
1npx create-react-app my-app
Запуск сервера разработки
1npm start
Решение проблем
Ошибка: 'npx' не распознана как команда
Переустановите Node.js, выбрав опцию автоматического исправления PATH
1npm install -g npm@latest
Медленная загрузка зависимостей
Очистите кэш npm и используйте Yarn
1npm cache clean --force && npm install -g yarn
Ошибка сборки webpack
Удалите папку node_modules и переустановите зависимости
1rm -r node_modules && npm install