Новости

Вам не потребуются глубокие знания React или функционала JavaScript — достаточно знакомства с принципами работы JavaScript, CSS и HTML.

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

В этой книге вы:

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

Как работает React

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

Работая с React, вы, скорее всего, будете создавать свои приложения с помощью JSX — синтаксиса JavaScript на основе тегов, который очень похож на синтаксис HTML. Мы подробно рассмотрим его в следующей главе и продолжим использовать на протяжении всей книги. Однако, чтобы по-настоящему разобраться в React, вам нужно понять его минимальные единицы — элементы. После элементов мы обсудим компоненты и создадим пользовательские компоненты, из которых состоят другие компоненты и элементы.

Настройка страницы

Для работы с React в браузере необходимо импортировать две библиотеки: React и ReactDOM. React — это библиотека для создания представлений. ReactDOM — это библиотека для рендеринга пользовательского интерфейса в браузере. Обе библиотеки доступны в виде сценариев из распакованного CDN (ссылки приведены в коде ниже). Создадим HTML-документ:

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

Элементы React

HTML — это просто набор инструкций, которые браузер выполняет при создании DOM. Элементы, составляющие HTML-документ, становятся элементами DOM, когда браузер загружает код HTML и отображает пользовательский интерфейс.

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

В HTML элементы связаны друг с другом в иерархии, напоминающей генеалогическое древо. Можно сказать, что у корневого элемента (в данном случае раздела) есть три дочерних элемента: заголовок, неупорядоченный список ингредиентов и раздел для инструкций.

В прошлом веб-сайты состояли из отдельных HTML-страниц. Когда пользователь перемещался по этим страницам, браузер запрашивал и загружал различные HTML-документы. Изобретение AJAX (асинхронного JavaScript и XML) подарило нам одностраничные приложения, или SPA (https://ru.wikipedia.org/wiki/Одностраничное_приложение). Поскольку браузеры теперь могут с помощью AJAX запрашивать и загружать маленькие фрагменты данных, целые веб-приложения теперь могут работать на одной странице и обновлять пользовательский интерфейс инструментами JavaScript.

В SPA браузер изначально загружает один HTML-документ. Перемещаясь по сайту, пользователи фактически остаются на той же странице. JavaScript уничтожает пользовательский интерфейс и создает новый всякий раз, когда пользователь взаимодействует с приложением. Может показаться, что вы перемещаетесь со страницы на страницу, но на самом деле вы находитесь на одной HTML-странице, а JavaScript выполняет всю работу.

DOM API (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) представляет собой набор объектов, которые JavaScript может использовать при взаимодействии с браузером для изменения модели DOM. Если вы когда-либо использовали функцию document.createElement или document.appendChild, то вы уже работали с DOM API.

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

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

Мы можем создать элемент React для представления тега h1с с помощью функции React.createElement:

Первый аргумент определяет тип элемента, который мы хотим создать — в данном случае h1. Второй аргумент определяет свойства элемента. Элемент h1 имеет идентификатор recipe-0. Третий аргумент соответствует дочерним элементам: это могут быть любые узлы, вставленные между открывающим и закрывающим тегами (в данном случае только некоторый текст).

Во время рендеринга React преобразует этот элемент в реальный элемент DOM:

Свойства аналогичным образом применяются к новому элементу DOM: они добавляются к тегу как атрибуты, а дочерний текст добавляется как текст внутри элемента. Элемент React — это просто литерал JavaScript, который сообщает React, как создать элемент DOM.

В журнале этот элемент выглядит так:

Именно так выглядит структура элемента React. Некоторые поля используются самим React: _owner, _store, и $$typeof. Поля key и ref тоже важны для элементов React, но мы познакомимся с ними позже. А пока подробнее рассмотрим поля type и props.

Свойство type элемента React сообщает React, какой тип элемента HTML или SVG нужно создать. Свойство props содержит данные и дочерние элементы, необходимые для создания элемента DOM. Свойство children предназначено для рендеринга других вложенных элементов в виде текста.

СОЗДАНИЕ ЭЛЕМЕНТОВ
Мы заглядываем в объект, который возвращает функция React.createElement. Но создавать подобные элементы вручную не нужно, вместо этого вы всегда будете использовать функцию React.createElement.

С полным содержанием статьи можно ознакомиться на сайте "Хабрахабр":

https://habr.com/ru/company/piter/blog/577862/