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

Общие сведения о 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, в том числе:

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

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

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

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

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

Средства React

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

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

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

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

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

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

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

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

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

  • Диспетчер пакетов: два популярных диспетчера пакетов для React — npm (который входит в NodeJS) и 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 и создания примеров приложений:

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

  • Last updated on