Путь к реакции

Dec 01 2022

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

Фото Ксении Яковлевой на Unsplash

React — одна из лучших библиотек Javascript, используемых для создания веб-приложений. Чтобы понять React, нам нужно понять, как он работает внутри. В этой статье давайте рассмотрим основы React, необработанный API React, как он работает внутри, и, наконец, создадим повторно используемый компонент React.

Я предполагаю, что у вас есть базовое понимание концепций Javascript и HTML DOM. Если нет, вы можете ознакомиться с этими концепциями здесь: Руководство по Javascript , Введение в DOM .

Теперь давайте перейдем к нашей теме!!

Как создается веб-страница?

Вам когда-нибудь было интересно, как работает Интернет? Что происходит после того, как вы введете URL-адрес веб-сайта и нажмете «Ввод»? Как вы видите эту веб-страницу на нашем экране? Давайте рассмотрим это шаг за шагом.

1. После поиска любого веб-сайта на сервер отправляется HTTP-запрос.

2. Сервер отправит файлы сайта.

3. Браузер проанализирует эти файлы. Сначала анализируется файл HTML, затем анализируются файлы CSS и JavaScript.

4. Браузер строит DOM из проанализированного HTML и отображает его на экране.

Вот как веб-страница отображается на вашем экране (существуют и другие понятия, такие как DNS-сервер и протокол HTTP, но это не наша забота). Это так просто, но подождите, что это за DOM? Откуда это? Давайте немного изучим DOM?

DOM относится к объектной модели документа, которая представляет документ HTML с логическим деревом. Каждая ветвь содержит узлы, а каждый узел содержит объекты. Методы DOM позволяют получить доступ к DOM. С помощью этих методов вы можете изменить структуру и содержание документа.

Как мы все знаем, HTML является основным строительным блоком Интернета, и мы можем создавать веб-страницы, используя HTML. Давайте создадим простую веб-страницу с надписью «Hello world!!» как показано ниже:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Чтобы позволить javascript взаимодействовать с DOM, нам нужно добавить тег script в файл HTML, и вы можете написать код для создания, удаления или обновления элементов в DOM (это то, что мы называем манипулированием DOM).

Давайте посмотрим на код JavaScript, который взаимодействует с созданным выше «Hello World!!» страницу и меняет ее содержимое на «Wassup World!!».

Создание элементов HTML с помощью Javascript:

Поскольку мы видели, что мы можем изменять элементы HTML с помощью javascript, давайте попробуем создать веб-страницу, содержащую div с «root» в качестве идентификатора и h1 в качестве дочернего элемента div. h1 содержит «Hello World!!». Код можно найти в песочнице ниже.

Но создание элементов через Javascript обязательно. Для выполнения этой задачи мы должны предоставить Javascript пошаговые инструкции. Например, если вы хотите создать div с идентификатором, вы должны сначала создать этот элемент div , затем установить атрибут id и, наконец, добавить этот div к его родителю. Это уже слишком много работы. Что, если есть способ сообщить JavaScript только о том, какой элемент создавать, а не о том, как его создать (декларативный подход)? Это уменьшает много кода JavaScript. Звучит здорово, правда? Но как мы этого достигаем? Что это за императивный и декларативный подход?

Императивное программирование — это то, как вы что-то делаете, а декларативное программирование больше похоже на то, что вы делаете. Вот красивая статья об императивном и декларативном программировании.

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

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

Обзор React API:

API React включает методы для управления DOM. например, React.createElement() и ReactDOM.render(). Считайте, что метод React.createElement() эквивалентен document.createElement() и ReactDOM.render() как document.append(). Давайте углубимся в эти методы.

React.createElement() принимает два аргумента: создаваемый элемент и свойства. Если вы хотите создать простой тег div с идентификатором «root» и текстом «Hello World!» внутри это будет выглядеть так:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React — это отправная точка для использования React в вашем коде. Вы можете установить его как пакет через npm или использовать файлы сценариев, доступные на unpkg.com . Давайте использовать файлы сценариев в нашем примере кода, так как нам не нужно беспокоиться об их установке.

Теперь давайте воссоздадим тот же «Hello World!!» страница с React API.

Детская поддержка для React.createElement() может быть простым текстом или другим элементом, именно так мы создаем вложенные элементы. Для иллюстрации рассмотрим следующий HTML-код: элемент div как контейнер, который содержит другой элемент div в качестве дочернего элемента. Дочерний тег div содержит два тега span с текстом «Hello» и «World». Ссылка на кодSandbox

создание вложенных элементов с помощью React API

Для создания вложенных элементов приходится использовать вложенные методы, что очень затрудняет чтение и понимание кода.
Поэтому нам нужен более читаемый код. Так есть ли альтернативный способ сделать код читаемым? Что, если бы мы могли написать HTML-подобный синтаксис вместо использования API React? Здесь на помощь приходит JSX. Давайте потратим несколько минут на изучение JSX.

JSX:

JSX — это HTML-подобный синтаксис (но не HTML), который является синтаксическим сахаром над вашим необработанным API React. Вы можете написать все эти методы React в простом синтаксисе, похожем на HTML, с помощью JSX.

Поскольку JSX не является Javascript, вам необходимо преобразовать его в JavaScript, понятный браузеру.

Babel — это транспилятор, который транспилирует JSX в Javascript. Весь JSX преобразуется Babel в React API, как показано ниже.

Babel транспилирует JSX в Javascript

Как видно на предыдущем изображении, <div id="root"> преобразуется в React.createElement("div",{id:"root"},children). Вот как Babel преобразует JSX в React API.

Чтобы использовать Babel в нашем проекте, нам нужно использовать файл сценария с unpkg.com, и мы можем начать писать JSX внутри тега script, указав type=”text/babel” . Для большей ясности вы можете обратиться к песочнице ниже

Мы зашли так далеко от императивного изменения DOM через Javascript до использования JSX. В отличие от Javascript, мы не беспокоимся о том, как создавать элементы при использовании JSX. Задача Babel — преобразовать их в React API, который изменит DOM.

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

Создание компонентов React:

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

Возьмем пример.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Мы передали функцию сообщения в качестве параметра React.createElement() вместо элемента. когда мы передаем функцию в качестве параметра React.createElement(), React Reconciler вызывает эту функцию с параметром, который мы передали. Когда согласовщик встречает хост-элемент, он позволяет средству визуализации позаботиться о его монтировании.

Хост-компоненты — это компоненты, зависящие от платформы, принадлежащие хост-среде (например, браузеры или мобильные устройства). В случае хоста DOM это могут быть элементы HTML, такие как div или img .

В нашем случае произойдет вызов двух функций, message («Hello World!!») и message («GoodBye World!!») , и обе функции вернутся:

<div className="msg"> Привет, мир!! </div>

<div className="msg">Прощай, мир!! </div>

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

Чтобы использовать пользовательский компонент в качестве тега JSX, мы должны использовать первый символ имени функции с большой буквы, чтобы Babel распознал его как пользовательский компонент. Это выглядит так:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Ура!! мы создали наш первый компонент React

Вывод:

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