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

  • Статья

Что такое React JS?

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

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

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

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

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

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

  • Базовые веб-приложения. Если вы не знакомы с React и в основном хотите узнать, как создать базовое веб-приложение с помощью React, мы рекомендуем установить create-react-app непосредственно в Windows. Если вы планируете создать веб-приложение, которое будет развернуто для рабочей среды, рекомендуем установить create-react-appcreate-react-app в подсистеме 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, которые передают данные для отрисовки в собственный код пользовательского интерфейса платформы. 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 — платформа тестирования, встроенная в create-react-app, которая упрощает написание идиоматических тестов JavaScript.
  • Mocha — платформа тестирования, которая работает на Node.js и в браузере и упрощает асинхронное тестирование, создание отчетов и подбор сценариев тестирования для невыявленных исключений.

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

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

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

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