Библиотека React JavaScript: концепции и руководства для начала работы

Библиотека React JavaScript Изучение

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

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

Когда использовать ReactJS

React нацелен на создание надежных и расширяемых пользовательских интерфейсов (UI) на нескольких платформах. Одним из ярких моментов React является то, что он не ограничивает пользователей определенной структурой JavaScript. Также реагируйте:

  • Поддерживает интеграцию с уже существующими платформами JS для улучшения взаимодействия с пользователем приложения — без сложных модификаций серверной части.
  • Позволяет разработчикам легко использовать другие фреймворки и платформы, разработанные для React, такие как Gatsbyили js, для работы стека React.

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

Основные возможности React

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

Виртуальный DOM

Объектная модель документа (DOM) — это основная часть, которая представляет полную структуру документа веб-страницы в любом веб-приложении. Он определяет логическую структуру документа HTML или XML, а также способы доступа к ним и управления ими, что позволяет разработчикам напрямую указывать конкретные элементы и объекты в документе.

Этот подход также позволяет разработчикам обновлять определенные части дерева DOM без необходимости загружать всю веб-страницу, что приводит к:

  • Повышенная производительность
  • Лучший пользовательский опыт
Читайте также:  Взгляните на предстоящие улучшения LINQ в .NET 6

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

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

JSX

JavaScript EXTENSION (JSX) является расширением синтаксиса JavaScript. Это позволяет разработчикам определять структуру HTML в коде JavaScript. JSX также упрощает процесс разработки за счет:

  • Повышение читабельности всего кода
  • Снижение потребности в очень сложных структурах DOM.

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

Пример синтаксиса:

Хотя JSX не является обязательным в React

Поток данных

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

Управление состоянием реакции

Все компоненты React имеют встроенные состояния. Это состояние просто относится к структуре данных внутри компонента. Управление состоянием в React позволяет:

  • Создавайте коммуникации (связи)
  • Делитесь данными между компонентами React

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

React предлагает мощные библиотеки управления состоянием, которые можно легко интегрировать в веб-приложение, чтобы обеспечить расширенный контроль над состояниями функций и классов. Общие библиотеки включают:

  • Redux
  • Recoil

Маршрутизация

Одна из важнейших частей хорошего приложения — возможность легко перемещаться между страницами.

Обычно разработчики используют History API в браузере для облегчения этой навигации (маршрутизации). Однако набор функций и функций, предлагаемых History API, быстро превосходит при работе со сложными приложениями.

React предоставляет функцию под названием React Router в своей стандартной библиотеке для облегчения функций маршрутизации. React Router — это API, который позволяет разработчикам создавать уровень маршрутизации для приложения. Кроме того, он предлагает дополнительные функции, такие как:

  • Динамическое сопоставление маршрутов
  • Обработка перехода местоположения
  • Ленивая загрузка кода
  • И т.п.

Строительные блоки приложения React

Затем давайте посмотрим на строительные блоки, которые входят в любое приложение React.

Компоненты

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

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

Состояние

Встроенный объект React в каждом компоненте содержит данные о компоненте. Поскольку состояние относится к данным компонента, любые изменения данных (состояния) вызывают повторный рендеринг компонента. Взаимодействие с пользователем или системные события вызовут изменения в состоянии и будут напрямую влиять на поведение и визуализацию компонента.

Пример компонента с сохранением состояния:

Пример компонента с сохранением состояния

Реквизит

В React «реквизит» — это сокращение от свойства, которое представляет собой встроенный объект, в котором хранятся значения атрибутов тегов. Реквизиты могут быть аналогичны атрибутам HTML. Эти реквизиты могут быть переданы компонентам в качестве входных данных, чтобы упростить функциональность с компонентом, аналогичным традиционным аргументам метода.

Пример передачи имени пользователя в качестве аргумента для компонента:

Пример передачи имени пользователя в качестве аргумента для компонента

Преимущества React

React предлагает разработчикам приложений множество преимуществ.

Простота и удобство использования

React сравнительно более доступен, чем другие фреймворки и библиотеки. Единственное предварительное условие для изучения React — это базовое понимание HTML, CSS и JavaScript. Даже если React использует мощный синтаксис JSX, разработчикам не обязательно его использовать. Вместо этого они могут начать использовать React с простым старым JavaScript.

Еще один момент для простоты: методология разработки на основе компонентов помогает разработчикам создавать мощные, но легко управляемые и масштабируемые приложения.

Performance

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

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

React имеет возможность запускаться на внутреннем сервере для рендеринга и возврата DOM в браузер как обычный HTML. Это помогает смягчить проблемы поисковой оптимизации (SEO), присущие приложениям на основе JavaScript, тем самым увеличивая SEO приложения.

React EcoSystem

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

  • Государственное управление
  • Маршрутизация форм ( Reach Router, React Router)
  • Визуализации

Вдобавок ко всему, библиотеки компонентов пользовательского интерфейса, такие как KendoReact и Rebass, позволяют разработчикам добавлять готовые надежные компоненты в свои приложения без необходимости создавать все с нуля.

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

Набор инструментов разработчика

React предлагает полный набор инструментов для поддержки разработки и отладки веб-приложений. Он имеет множество инструментов, предназначенных для упрощения жизненного цикла разработки программного обеспечения (SDLC), например:

  • Create React App, инструмент CLI для настройки проекта React с помощью одной команды
  • Расширение React Developer Toolsдля отладки приложений реагирования
  • React-Unitдля запуска модульных тестов на ядре React
  • Ферментдля тестирования производительности

Вы также можете легко интегрировать React с такими инструментами, как VSCode, Atom и WebStorm, чтобы создать подходящую среду разработки. Наконец, стартовые наборы React, такие как React Static Boilerplate и Rekit, помогают разработчикам начать разработку приложения на основе React.

React Native

React вышел за рамки просто веб-приложений. Теперь React Native поддерживает разработку мобильного пользовательского интерфейса как для Android, так и для iOS. Это позволяет разработчикам создавать пользовательские интерфейсы на основе JavaScript для мобильных приложений, которые будут отображаться с помощью собственного кода.

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

React и Angular и Vue: сравнение JS-фреймворков

В следующей таблице показано сравнение React с другими фреймворками JavaScript.

Реагировать Vue Угловой
Тип Библиотека JavaScript Фреймворк JavaScript Фреймворк JavaScript
Архитектура Гибкая архитектура (слой просмотра, который можно добавить к любой модели) Гибкая архитектура (слой просмотра, который можно добавить к любой модели) Архитектура модель-представление-контроллер (MVC)
Лицензия Лицензия MIT MIT лицензия Лицензия MIT
Случаи применения Кросс-платформенные приложения Простые и легкие приложения Крупномасштабные приложения
Встроенные функции Библиотека предназначена только для создания компонентов пользовательского интерфейса и взаимодействия с DOM (дополнительные функции доступны через внешние компоненты — Redux, React Router) На полпути между React и Angular. Vue предлагает некоторые встроенные функции, такие как маршрутизация и управление состоянием, но не имеет таких функций, как проверки (которые поддерживаются внешними компонентами). Крупнейшая структура с самым обширным встроенным набором функций (например, проверки, маршрутизация, управление состоянием и т. Д.)
Масштабируемость Высокая (через компонентный подход) Ограничено (из-за синтаксиса на основе шаблона) Высокий (через модульную конструкцию разработки)
ДОМ Виртуальный DOM Виртуальный DOM Настоящий ДОМ
Связывание данных Односторонняя привязка данных Двусторонняя привязка данных Двусторонняя привязка данных
Кривая обучения Середина Низкий Высокий

Учебник: пример приложения React

Самый простой способ начать работу с вашим приложением React — использовать инструмент CLI Create React App. Он создаст проект React с простой структурой приложения, которую можно использовать для создания приложения.

Сначала мы создадим приложение React, используя следующую команду:

npx create-react-app simple-app

Результат:

Сначала мы создадим приложение React, используя следующую команду

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

Файл App.js является основным файлом в приложении React

Файл App.js является основным файлом в приложении React. В приведенном ниже примере блока кода мы импортируем логотип и классы CSS, а затем используем функцию App () для визуализации и возврата элементов.

App.js

В приведенном ниже примере блока кода мы импортируем логотип

Если мы посмотрим на index.js, мы увидим, что он указывает на функцию App и отображает ее во внешнем интерфейсе.

index.js

Если мы посмотрим на index.js, мы увидим, что он указывает

Затем мы можем запустить приложение, выполнив команду npm start, которая:

  1. Скомпилируйте приложение.
  2. Запустите сборку разработки, доступную через localhost через порт 3000.

Пример приложения React (браузер)

Пример приложения React (браузер)

Теперь давайте изменим это приложение

Теперь давайте изменим это приложение, создав новый файл с именем Home.js и отрендерив его как результат.

Home.js

файл с именем Home.js и отрендерив его как результат

index.js

Теперь мы импортируем только что созданный файл

Теперь мы импортируем только что созданный файл Home.js и отображаем его в индексе приложения. Результат покажет:

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

React для всех разработчиков

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

Оцените статью
bestprogrammer.ru
Добавить комментарий