Установка и использование React в Linux: Пошаговое руководство

React популярная JavaScript-библиотека для создания пользовательских интерфейсов, разработанная и поддерживаемая компанией Facebook. Она позволяет создавать многократно используемые компоненты пользовательского интерфейса и управлять состоянием приложения более эффективным и организованным образом по сравнению с традиционными методами веб-разработки.

В этом руководстве мы рассмотрим процесс установки React на систему Linux, а именно Ubuntu 20.04/22.04 или CentOS/RHEL 7. Мы рассмотрим следующие шаги:

Установка Node.js и npm
Создание нового приложения React
Запуск сервера разработки
Создание приложения для производства
Обслуживание приложения с помощью веб-сервера

Прежде чем мы начнем, важно отметить, что React — это всего лишь библиотека для создания пользовательских интерфейсов, и она часто используется в сочетании с другими инструментами и библиотеками для создания полноценного веб-приложения. Например, вы можете использовать React с бэкенд-фреймворком, таким как Express.js, или библиотекой управления состояниями, такой как Redux.

Однако в рамках данного руководства мы сосредоточимся на основах запуска React в системе Linux.

Предварительные условия

Прежде чем мы начнем, в вашей системе должно быть установлено следующее:

Эмулятор терминала (например, Gnome Terminal или Konsole)
Текстовый редактор (например, Sublime Text, Atom или Visual Studio Code)
Git (необязательно, но рекомендуется для управления кодом вашего приложения)

Вы также должны иметь базовое представление о командной строке Linux и уметь работать с такими командами, как cd, ls, и mkdir.

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

Node.js — это среда выполнения JavaScript, которая позволяет запускать JavaScript-код вне веб-браузера. Она необходима для запуска приложений React, а также многих других современных инструментов веб-разработки.

npm (Node Package Manager) — это менеджер пакетов для Node.js, который позволяет легко устанавливать и управлять сторонними библиотеками и зависимостями.

Чтобы установить Node.js и npm на Ubuntu 20.04, выполните следующие команды:

$ sudo apt update
$ sudo apt install nodejs npm

На CentOS 7 вы можете установить Node.js и npm с помощью следующих команд:

$ sudo yum update
$ sudo yum install nodejs npm

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

$ node --version
v18.19.0
$ npm --version  
10.2.3

Обратите внимание, что точные версии могут отличаться в зависимости от того, когда вы читаете это руководство.

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

Теперь, когда у нас установлены Node.js и npm, мы можем создать новое приложение React с помощью команды create-react-app инструмент. Это утилита командной строки, которая устанавливает новый проект React с предварительно настроенным конвейером сборки и сервером разработки.

Чтобы создать новое приложение React, откройте терминал и перейдите в каталог, где вы хотите создать свой проект. Затем выполните следующую команду:

$ npx create-react-app my-app

Заменить my-app на название вашего проекта.

Эта команда создаст новый каталог под названием my-app и установит в ней базовое приложение React. Приложение предварительно сконфигурировано с сервером разработки, скриптом сборки и базовой файловой структурой.

После завершения выполнения команды вы можете перейти в каталог нового проекта:

$ cd my-app

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

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

Чтобы запустить сервер разработки, выполните следующую команду:

$ npm start

Эта команда скомпилирует ваше приложение и запустит локальный сервер разработки на http://localhost:3000. Она также автоматически откроет ваш веб-браузер по умолчанию на этот адрес.

Теперь вы должны увидеть стандартную страницу React с текстом «Edit src/App.js and save to reload.» Это React-приложение по умолчанию, которое создается create-react-app.

По мере внесения изменений в исходные файлы приложения сервер разработки будет автоматически определять изменения и перезагружать приложение в браузере. Это позволяет легко изменять дизайн и функциональность приложения в процессе разработки.

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

Когда вы будете готовы развернуть свое React-приложение, вам нужно будет собрать версию приложения, готовую к производству.

Чтобы собрать приложение для производства, выполните следующую команду:

$ npm run build

Эта команда скомпилирует ваше приложение и выведет статическую версию приложения в папке build каталоге вашего проекта.

Сайт build Каталог содержит все файлы, необходимые для обслуживания вашего приложения на веб-сервере, включая:

index.html: Основной HTML-файл, который загружает ваше приложение
static/: Каталог, содержащий статические активы вашего приложения (такие как CSS и JavaScript файлы)

Обслуживание приложения с помощью веб-сервера

Теперь, когда у вас есть готовая к производству версия приложения, вы можете обслуживать ее с помощью веб-сервера.

Существует множество различных веб-серверов, которые можно использовать для обслуживания приложения React, но для целей данного руководства мы будем использовать serve пакет от npm.

Чтобы установить serve , выполните следующую команду в терминале:

$ npm install -g serve

[-g флаг устанавливает пакет глобально, поэтому вы можете использовать serve из любой точки системы.

После установки пакета вы можете запустить веб-сервер, выполнив следующую команду в корневом каталоге вашего проекта:

$ serve -s build

[-s Флаг указывает каталог для обслуживания, который в данном случае является каталогом build каталог.

Эта команда запустит веб-сервер на http://localhost:5000 по умолчанию. Вы можете получить доступ к своему приложению, перейдя по этому адресу в веб-браузере.

Если вы хотите обслуживать свое приложение на другом порту, вы можете указать номер порта с помощью параметра -l флаг:

$ serve -s build -l 8080

Эта команда запустит веб-сервер на http://localhost:8080.

Обратите внимание, что это всего лишь базовый веб-сервер для обслуживания статических файлов, и он может не подойти для производственной среды. Для более надежного решения вы можете рассмотреть возможность использования выделенного веб-сервера, такого как Apache или Nginx.

Заключение

В этом руководстве мы рассмотрели основы установки React на Linux-систему с помощью Ubuntu 20.04 или CentOS 7. Мы рассмотрели процесс установки Node.js и npm, создания нового приложения React, запуска сервера разработки, создания приложения для производства и обслуживания приложения с помощью веб-сервера.

Существует множество более продвинутых тем, которые вы можете изучить, продолжая работать с React, например, управление состояниями, маршрутизация и тестирование. Однако это руководство должно обеспечить вам прочную основу для начала разработки React в вашей системе Linux.

UNIXS.RU