Установка и настройка React на linux ubuntu 24.04

Подробное руководство по установке, настройке и оптимизации React для linux ubuntu 24.04

Введение

React - популярная JavaScript-библиотека для создания пользовательских интерфейсов. В этом руководстве мы установим React на Ubuntu 24.04, настроим среду разработки и рассмотрим основные аспекты работы с проектом.

Требования

Перед началом убедитесь, что ваша система соответствует требованиям:

• Ubuntu 24.04 (64-bit)
• Минимум 2 ГБ оперативной памяти
• 2 ГБ свободного места на диске
• Пользователь с правами sudo
• Стабильное интернет-соединение

Установка

Полная установка React

Процесс включает установку Node.js, менеджера пакетов npm и создание первого приложения

Подготовка

Обновите систему перед установкой:

sudo apt update && sudo apt upgrade -y

Установите curl для загрузки скриптов:

1sudo apt install curl -y

Процесс установки

1. Установите Node.js и npm:

1curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
2sudo apt install -y nodejs

2. Проверьте версии:

1node -v
2npm -v

3. Установите Create React App:

1sudo npm install -g create-react-app

4. Создайте новое приложение:

1npx create-react-app my-app

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

1cd my-app
2npm start

Настройка

Базовая конфигурация проекта

1. Редактируйте файлы в папке src/
2. Настройте переменные окружения через .env:

REACT_APP_API_URL=http://localhost:4000

3. Для production-сборки:

1npm run build

Оптимизация:

• Используйте React.memo для мемоизации компонентов
• Активируйте gzip-сжатие на сервере
• Настройка кэширования через service workers

Типичные ошибки и их решения

Ошибка: EACCES при установке пакетов

Решение:

1sudo chown -R $(whoami) ~/.npm

Ошибка: Invalid Host Header

Добавьте в .env:

DANGEROUSLY_DISABLE_HOST_CHECK=true

Ошибка: Node.js устаревшей версии

Переустановите через Nodesource:

1sudo apt purge nodejs
2curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
3sudo apt install -y nodejs

Заключение

Вы успешно установили React на Ubuntu 24.04. Для дальнейшего развития:

• Изучите официальную документацию React
• Настройте ESLint для проверки кода
• Реализуйте Continuous Integration с помощью GitHub Actions

Команды

Установка Node.js

1curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - && sudo apt install -y nodejs

Создание нового приложения

1npx create-react-app my-app

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

1npm start

Решение проблем

Ошибка 'Command not found' для npm

Переустановите Node.js через официальный репозиторий

1sudo apt install --reinstall nodejs

Порт 3000 занят

Запустите приложение на другом порту

1PORT=4000 npm start

Ошибки зависимостей

Удалите node_modules и переустановите пакеты

1rm -rf node_modules && npm install