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

React часто сравнивают с Angular. Если вы один из них, этот блог 👉 здесь поможет вам глубже погрузиться в различия и обогатить вас ключевыми моментами.

Потребность в реакции

Обычно на веб-сайте / в приложении (если быть более точным - веб-приложения, поскольку веб-сайт представляет собой отображение статического сайта, а веб-приложения являются интерактивными сайтами), элементы в html преобразуются в DOM [ Объектная модель документа] узлы с древовидной структурой. Обновление узла DOM на нескольких уровнях происходит быстрее. Но по мере того, как приложение растет и структура DOM становится глубже, обновление таких узлов происходит медленно, и через некоторое время несколько обновлений более глубоких узлов делают страницу не отвечающей 😞.

Концепция виртуального DOM ⭐️

React обеспечивает эффективный способ создания и обновления данных в таких больших приложениях за счет введения концепции Virtual DOM.

Виртуальная модель DOM - это объектная модель документа, созданная React для себя. Все данные в приложении представлены в этой виртуальной DOM как C компоненты. Эти компоненты представлены как узлы, связанные с реальной DOM в мире браузера.

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

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

Наконец, наш код First React

Создание компонентов будет написано отдельным постом. На данный момент, чтобы создать элемент «div» в REACT, синтаксис следующий:

React.createElement("div", null, "Hello World!");

Этот синтаксис становится сложным, когда мы вкладываем элементы. Чтобы преодолеть это, REACT использует синтаксис JSX. Поскольку браузер может понимать только HTML, CSS и JS, этот код JSX будет преобразован в JS компилятором BABEL.

Теперь приведенный выше синтаксис переписан следующим образом:

<div>Hello World!</div>

Это синтаксис JSX, похожий на тег html, и его намного легче понять, чем раньше. С JSX мы получаем синтаксис разметки с расширяемыми возможностями (создание собственных тегов). Также JSX обладает всеми возможностями JS. Это означает, что вы можете заключить любое JS-выражение в фигурные скобки {} внутри JSX.

Есть еще несколько концепций, поэтому следите за новостями, чтобы узнать больше…