Руководство по работе с React

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

Что такое React

React JS – это библиотека JavaScript для создания пользовательских интерфейсов (UI). Она предоставляет инструменты для построения эффективных и масштабируемых веб-приложений с динамическим и интерактивным пользовательским интерфейсом.

Вот некоторые ключевые характеристики React:

  • Компонентный подход. React разбивает пользовательский интерфейс на небольшие, независимые компоненты. Каждый компонент представляет собой некоторую часть интерфейса и может включать в себя другие компоненты. Этот подход упрощает разработку, тестирование и поддержку приложения.
  • Виртуальная DOM. React использует виртуальную DOM (объектную модель документа) для оптимизации производительности. Он создает в памяти представление текущего состояния DOM и сравнивает его с предыдущим состоянием, обновляя только те элементы, которые изменились. Это позволяет снизить количество операций и делает приложение более быстрым.
  • Однонаправленный поток данных. Данные в React обычно передаются «вниз» по иерархии компонентов. Это означает, что данные всегда двигаются от родительского компонента к дочернему. Такой подход значительно облегчает отслеживание и управление состоянием приложения.
  • JSX-синтаксис. React позволяет писать код с расширением, которое выглядит как комбинация JavaScript и HTML, – его называют JSX. Оно делает код более читаемым и понятным.
  • Многоплатформенность. React может использоваться для разработки не только веб-, но и мобильных приложений с использованием React Native.
  • Большое сообщество и экосистема. Сообщество разработчиков React очень активное, и существует множество сторонних библиотек и инструментов, которые расширяют возможности React.

React применяется во множестве крупных проектов, включая многие популярные сайты и приложения, такие как Airbnb, Netflix и многие другие.

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

Аренда виртуального сервера на базе Linux

В RU-CENTER вы можете арендовать мощные виртуальные серверы на базе Linux. Они оснащены серверными SSD-дисками и обеспечивают высочайшую производительность вашим проектам. 

У нас вы получите возможность настраивать сервер, устанавливать необходимое программное обеспечение и выполнять другие операции в соответствии с вашими потребностями и требованиями. Иными словами, мы предоставим вам полный контроль, чтобы вы могли уверенно работать над своими продуктами. 

Свяжитесь с нашим менеджером для бесплатной консультации, и он обязательно поможет подобрать VDS/VPS-сервер под ваши задачи. 

Как создать проект React

Для установки Create React App и создания React-приложения вам потребуется выполнить несколько шагов.

Шаг 1. Установка Create React App

  1.  Перед загрузкой Create React App убедитесь, что у вас установлен Node.js. Если это не так, установите его по нашей инструкции. 

Вы также можете проверить, установлен ли Node.js, с помощью команды:

node -v 

В выводе отобразится номер версии Node. Например:

v18.18.0

  1. После завершения установки Node.js вы сможете использовать npm (Node Package Manager) для установки новых пакетов – в том числе, Create React App.

Через терминал перейдите в папку, в которой вы хотите создать новое React-приложение. Для этого используйте команду «cd»:

   cd [путь-для-установки-приложения]

  1. Теперь выполните команду для глобальной установки Create React App с использованием npm:

npm install create-react-app -g

Где:

  • «create-react-app» – это название пакета, который вы устанавливаете.
  • «-g» - флаг, который указывает на глобальную установку. Это означает, что Create React App будет доступен системно, и вы сможете создавать новые проекты React где угодно на вашем сервере.
  1.  Дождитесь завершения установки. После успешной установки вы сможете создавать новые React-приложения с помощью Create React App.

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

  1. Чтобы создать новое React-приложение, перейдите в папку, в которой вы хотите создать проект:

cd [путь-для-создания-приложения]

  1.  Введите следующую команду:

npx create-react-app your-react-app

Где «your-react-app» – это имя вашего нового React-проекта. 

После выполнения этой команды Create React App начнет процесс создания нового проекта. Когда процесс успешно завершится, вы увидите примерно следующий вывод:

Success! Created your-react-app at /Users/lissa/Documents/React-app/your-react-app

Inside that directory, you can run several commands:

  npm start

    Starts the development server.

  npm run build

    Bundles the app into static files for production.

  npm test

    Starts the test runner.

  npm run eject

    Removes this tool and copies build dependencies, configuration files

    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd your-react-app

  npm start

Happy hacking!

Более подробно весь процесс описан здесь:

В этом выводе сообщается, что новый проект с именем «your-react-app» был успешно создан в указанной вами папке. 

Теперь вы можете перейти в неё и начать работу над вашим React-приложением.

Шаг 3. Запуск созданного React-проекта в редакторе

Когда вы откроете ваш новый проект React в редакторе, то увидите две основные папки:

  1. Папка «public»:

В ней находится файл «index.html», который критически важен для вашего React-приложения в браузере. С помощью него вы сможете изменить заголовок страницы, добавить метаданные и вставить другие статические ресурсы (например, изображения и иконки). 

  1. Папка «src»:

В этой папке содержится основной исходный код React-приложения.

Важно! Мы не рекомендуем изменять файл «index.js» внутри папки «src». Он выполняет важную роль: загружает главный компонент и вставляет его в «index.html».

В этой же папке находится файл «App.js» – главный компонент приложения. Вы можете редактировать его содержимое и создавать новые компоненты. 

А похожий файл «App.css» предназначен для определения стилей компонентов, которые используются в «App.js».

Помимо этих двух основных папок, у вас также есть файл «package.json», который содержит информацию о зависимостях вашего проекта и различные скрипты, которые можно использовать для разработки и сборки приложения.

Основные команды React

Команда «start»

C помощью команды «start» вы можете начать работу с вашим React-приложением:

npm start

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

Что ещё происходит при выполнении этой команды?

  1. Ваш React-проект запускается в режиме разработки.
  2. Например, если вы внесли изменения в файл «App.js» и удалили заголовок «<h2>», браузер автоматически обновит страницу, чтобы отразить эти изменения. 
  3. То же самое произойдет, если вы внесли изменения в файл «App.css».

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

Активация скрипта «start» делает ваше React-приложение доступным для редактирования и настройки, позволяя вам быстро приступить к разработке.

Команда «run build»

Команда «npm run build» используется, когда разработчик готов к созданию рабочей версии приложения. Она выполняет процесс сборки, который включает в себя группировку всех необходимых файлов.

После завершения сборки вы увидите сообщение: 

The build folder is ready to be deployed. 

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

Кроме того, после создания сжатой версии приложения, система предложит возможность развернуть приложение вручную. 

Для этого необходимо выполнить следующие команды:

npm install -g pushstate-server

pushstate-server build

start http://localhost:9000

Где:

  • «npm install -g pushstate-server» устанавливает глобально утилиту «pushstate-server», которая используется для запуска сервера.
  • «pushstate-server build» запускает сервер сборки вашего приложения.
  • «start http://localhost:9000» открывает браузер и переходит по адресу «http://localhost:9000», где будет доступно ваше приложение.

Кроме того, после выполнения команды в вашем проекте появится дополнительная папка с названием «build», в которой будут храниться сгенерированные файлы.

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

Команда «test»

Команда «npm test» используется для проверки работы вашего приложения. 

При выполнении этой команды активируется инструмент тестирования Jest, который начинает поиск файлов с расширениями «.spec.js» или «.test.js», а затем запускает все найденные тесты. 

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

Команда «eject»

Команда «eject» применяется для извлечения настроек и скриптов, которые были скрыты при использовании Create React App. Она делает ваш проект более настраиваемым и предоставляет вам полный контроль над конфигурацией Babel, Webpack и другими инструментами, которые задействованы в React-проекте.

Как выполнить команду «eject»?

  1. Откройте терминал и перейдите в корневую папку вашего React-проекта.
  2.  Выполните команду:

 npm run eject

После выполнения этой команды система предупредит вас о том, что процесс является необратимым и запросит ваше подтверждение:

Are you sure you want to eject? This action is permanent. [y/N]

Если вы уверены, что хотите продолжить и извлечь конфигурации, введите «y» и нажмите Enter.

Важно! Будьте осторожны – процесс «eject» действительно необратим! Выполнив его, вы станете ответственны за все аспекты настройки и обновления вашего проекта.

Когда выполнение «eject» завершится, вы увидите новую директорию в вашем проекте – «config». Эта директория содержит конфигурационные файлы для Babel, Webpack и других инструментов, которые ранее были скрыты.

Скрипты «start» и «test» продолжат работать в том же режиме, что и раньше. Просто вы получите полный доступ к конфигурации и сможете вносить в неё изменения по своему усмотрению. 

Как обновить версию React 

  1. Прежде чем выполнить обновление React, необходимо определить, какая версия React у вас установлена в настоящее время. Это можно сделать с помощью следующей команды:

npm ls react

В выводе вы увидите текущую версию React. Например: 

└── react@17.0.1

  1. Чтобы обновить React, пропишите:

npm install react@latest --save

Когда выполнение этой команды завершится, React будет обновлен до последней версии. 

  1. Затем важно проверить версию, чтобы убедиться, что она действительно была успешно обновлена. 

Для этого можно снова использовать ту же команду, что и в первом шаге:

npm ls react

Примерный вывод:

└── react@18.2.0

  1. Обновите зависимости, так как новые версии React могут иметь иные требования к зависимостям. 

Для этого воспользуйтесь следующей командой:

npm install

Теперь вы знаете, как выполнить обновление версии React. Это может понадобиться для исправления ошибок или использования новых функциональных возможностей.

Как удалить React

Удаление React-приложения в Windows:

  1. Откройте окно командной строки в Windows.
  2. Перейдите в каталог вашего проекта React при помощи команды:

cd [путь-к-проекту] 

  1. Выполните следующую команду, чтобы удалить все зависимости и скрытые файлы в каталоге проекта:

rm your-react-app -r -force

Где «your-react-app» – ваш React-проект. 

Команда выше удалит каталог «your-react-app» вместе с его содержимым.  Параметр «-force» подтвердит удаление.

Удаление React-приложения в Mac/Linux:

  1. Откройте терминал на вашем Mac или Linux.
  2.  Перейдите в каталог вашего проекта React при помощи команды:

cd [путь-к-проекту] 

  1. Выполните следующую команду, чтобы удалить все зависимости и скрытые файлы в каталоге проекта:

rm -rf your-react-app

Она удалит каталог «your-react-app» вместе со всем его содержимым. 

Удаление Create React App из глобальных зависимостей:

Чтобы удалить инструмент Create React App из глобальных зависимостей, введите:

С помощью npm

npm uninstall -g create-react-app

С помощью Yarn

yarn global remove create-react-app

Эти команды удалят Create React App из глобальных пакетов, а значит, вы больше не сможете использовать этот инструмент. 

В этом руководстве мы рассмотрели основные шаги для работы с React. Вы научились создавать новое React-приложение с помощью Create React App, запускать его для разработки, обновлять зависимости и удалять его. 

Всё ещё остались вопросы?