Поделиться через

Общие сведения о React

  • Статья

Что такое React JS?

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

Компоненты React обычно записываются в JavaScript и JSX (XML JavaScript), который является расширением JavaScript, которое выглядит так же, как HTML, но имеет некоторые функции синтаксиса, которые упрощают выполнение распространенных задач, таких как регистрация обработчиков событий для элементов пользовательского интерфейса. Компонент React реализует метод отрисовки, который возвращает код JSX, представляющий пользовательский интерфейс компонента. В веб-приложении код JSX, возвращаемый компонентом, преобразуется в поддерживаемый браузером код HTML, который затем обрабатывается для отображения браузером.

Это важно

В феврале 2025 года команда React объявила, что Create React App (CRA) устарел и не рекомендуется для новых приложений. Команда рекомендует перенести существующие приложения на платформу, например Next.js или React Router, или перенести в средство сборки, например Vite, Parcel или RSBuild.

Работает ли React в Windows?

Да. Windows поддерживает две разных среды для разработки приложений React:

Что можно делать с помощью React?

Windows поддерживает широкий спектр сценариев для разработчиков React, в том числе следующие:

  • Базовые веб-приложения: если вы не знакомы с React и в первую очередь заинтересованы в изучении создания базового веб-приложения с помощью React, рекомендуется создать приложение React с помощью интерфейсных инструментов vite в Windows. Если вы планируете создать веб-приложение, которое будет развернуто для рабочей среды, вам может потребоваться создать приложение React с помощью интерфейсного средства vite в подсистеме Windows для Linux (WSL) для повышения производительности, совместимости системных вызовов и выравнивания между локальной средой разработки и средой развертывания (которая часто является сервером Linux).

  • Одностраничные приложения. Это веб-сайты, которые взаимодействуют с пользователем, динамически перезаписывая текущую веб-страницу с помощью новых данных с сервера (в отличие от поведения браузера по умолчанию с загрузкой целых новых страниц). Если вы хотите создать статический одностраничный сайт, ориентированный на контент, мы рекомендуем установить Gatsby для WSL. Если вы хотите создать одностраничный веб-сайт, который отрисовывается на сервере и использует серверную часть на Node.js, мы рекомендуем установить Next.js в WSL. (Хотя Next.js теперь также предлагает возможности по обработке статических файлов.)

  • Нативные настольные приложения: React Native for Desktop + macOS позволяет создавать нативные настольные приложения с помощью JavaScript, которые выполняются на различных типах настольных ПК, ноутбуков, планшетов, Xbox и устройствах смешанной реальности. Он поддерживает как Windows SDK, так и macOS SDK.

  • Собственные мобильные приложения:React Native — это кросс-платформенное средство для создания приложений Android и iOS с помощью JavaScript, которое компилирует в код пользовательского интерфейса (UI) на родной платформе. React Native можно установить двумя способами: с помощью Expo CLI или React Native CLI. Вы можете изучить подробное сравнение двух этих средств на StackOverflow. Expo предоставляет клиентское приложение для мобильных устройств iOS и Android, позволяющее запускать и тестировать приложения. Инструкции по разработке приложения Android с помощью Windows, React Native и Expo CLI см. в статье React Native для разработки приложений Android в Windows.

Варианты установки

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

Средства React

Хотя написание простого компонента React в редакторе обычного текста — это хороший способ начать изучение React, созданный таким способом код будет громоздким и медленным, а также сложным в обслуживании и развертывании. Приложения в рабочей среде должны выполнять некоторые распространенные задачи. Такие задачи обрабатываются другими платформами JavaScript, которые принимаются приложением как зависимость. Эти задачи включают:

  • Компиляция. JSX — это язык, который часто используется для приложений React, но браузеры не могут обрабатывать его синтаксис напрямую. Код нужно скомпилировать в стандартный синтаксис JavaScript и адаптировать под разные браузеры. Babel — это один из компиляторов, которые поддерживают JSX.
  • Упаковка. Так как производительность очень важна для современных веб-приложений, важно, чтобы код JavaScript приложения включал только необходимый код и был объединен в как можно меньшее число файлов. Средство упаковки, например webpack, выполняет эту задачу за вас.
  • Управление пакетами. Диспетчеры пакетов упрощают включение функциональности сторонних пакетов в ваше приложение, в том числе их обновление и управление зависимостями. Популярные диспетчеры пакетов — это Yarn и npm.

В целом набор платформ, которые помогают создавать, компилировать и развертывать приложение, называются цепочкой инструментов. Простая в настройке среда разработки для React, использующая эту цепочку инструментов, — это Vite, которая создает простое одностраничное приложение для вас. Единственной настройкой, необходимой для использования Vite , является Node.js.

  • Для разработки в Windows выполните инструкции по установке Node.js в WSL или Windows.

Каталог компонентов React Native

Ниже приведены компоненты, которые можно использовать в приложении React Native:

  • Основные компоненты — компоненты, которые разрабатываются и поддерживаются в рамках платформы React Native.
  • Компоненты сообщества — компоненты, разрабатываемые и обслуживаемые сообществом.
  • Собственные компоненты — компоненты, которые вы создаете самостоятельно с использованием кода, характерного для платформы, и регистрируете для доступа из React Native.

Каталог React Native предоставляет список библиотек компонентов, который можно отфильтровать по целевой платформе.

Варианты цепочки инструментов Fullstack React

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

  • Диспетчер пакетов — с React используются два популярных диспетчера пакетов: npm (включен в Node.js) и Yarn. Они оба поддерживают широкую библиотеку хорошо поддерживаемых пакетов, которые можно установить.
  • React Router — набор навигационных компонентов, которые упрощают создание добавляемых в закладки URL-адресов для веб-приложения или составной навигации в React Native. React осуществляет только управление состояниями и отображении этих состояний в модели DOM, поэтому при создании приложений React обычно требуется использовать библиотеку маршрутизации, например React Router.
  • Redux — контейнер прогнозируемых состояний, который упрощает работу с архитектурой потоков данных. Как правило, он понадобится вам только в том случае, если вы находитесь на продвинутом этапе разработки React. Как сказал Дэн Абрамов (Dan Abramov), один из создателей Redux: "Redux не нужен, пока у вас нет проблем с обычным React".
  • Webpack — средство сборки, которое позволяет компилировать модули JavaScript. Также называется упаковщиком модулей. Когда webpack обрабатывает ваше приложение, внутренне он создает граф зависимостей, который сопоставляет каждый нужный вашему проекту модуль, и создает один или несколько пакетов.
  • Uglify — набор средств на JavaScript для синтаксического анализа, минификации, сжатия и форматирования кода.
  • Babel — компилятор JavaScript, в основном используемый для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в существующих и старых браузерах или средах. Вам также может быть полезным использовать пакет настроек babel-preset-env, чтобы не нужно было тщательно управлять синтаксическими преобразованиями или полизаполнителями в браузерах и можно было определить, какие интернет-браузеры поддерживать.
  • ESLint — средство для поиска шаблонов в вашем коде JavaScript и информирования о них, что позволяет вам сделать код более согласованным и избежать ошибок.
  • Enzyme — программа тестирования на JavaScript для React, которая упрощает тестирование выходных данных компонентов React.
  • Jest: платформа тестирования, которая работает вместе с Babel, чтобы помочь в написании идиоматических тестов JavaScript в приложениях React.
  • Mocha — платформа тестирования, которая работает на Node.js и в браузере и упрощает асинхронное тестирование, создание отчетов и подбор сценариев тестирования для невыявленных исключений.

Курсы и учебники по React

Ниже приведены некоторые рекомендуемые ресурсы для изучения React и создания примеров приложений:

Дополнительные ресурсы

  • Официальные документы React предлагают все последние актуальные сведения о React
  • Расширения Microsoft Edge для средств разработки React: добавляют две вкладки в средства разработки Microsoft Edge, чтобы помочь в разработке с использованием React: Компоненты и Профилировщик.