TLDR; Общий обзор того, что делает React особенным и почему React великолепен 🚀

Я решил написать серию блогов о React, JavaScript, алгоритмах, структурах данных и некоторых сервисах Firebase, таких как Firebase Hosting, Cloud Firestore, Authentication и других. Итак, вот первая 🚀

Но прежде чем мы углубимся в то, почему React, давайте начнем с Что?

Что такое Реакт?

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

React позволяет разработчикам создавать большие веб-приложения, способные изменять данные без перезагрузки страницы. Основная цель React — быть быстрым, масштабируемым и простым. Работает только на пользовательских интерфейсах в приложении.
Чтобы начать работу, вам необходимо иметь базовые знания HTML, CSS и JavaScript ES6.

Хорошо! Вот и все о React 🥳

В этом блоге я не буду говорить о синтаксисе React.js, его функциональности или чем-то подобном, но на самом деле я собираюсь поговорить о том, почему React? Почему мы должны его использовать? Итак, вот несколько вещей, которые делают React особенным ✨

  1. Его композиционная модель
  2. Его декларативный характер
  3. Как данные проходят через компонент
  4. И этот React на самом деле просто JavaScript

Что такое композиция?

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

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

Вот пример композиции, построенной из простых функций:

Это две однострочные простые функции getProfileLink и getProfilePic.

Выше приведены две простые функции, поэтому, чтобы составить их, мы просто объединим их внутри другой функцииgetProfileData:

Мы также можем сделать это без композиции, предоставив данные непосредственно в getProfileData:

В приведенном выше нет ничего плохого без кода композиции, но хорошая функция должна следовать правилу «DOT»:

Делай одно дело

В составной версии каждая функция делает только одно:

  • getProfileLink — просто формирует строку ссылки на профиль пользователя в Твиттере
  • getProfilePic — просто создает строку с изображением профиля пользователя в Твиттере.
  • getProfileData — возвращает новый объект

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

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

<Header />
<Home />
<Sidebar />

Теперь давайте возьмем эти простые компоненты, объединим их вместе и создадим более сложный компонент (также известный как композиция в действии!):

<Page>
 <Home />
 <Sidebar />
</Page>

Здесь компонент <Page> имеет внутри компоненты <Article /> и <Sidebar/> . Это похоже на предыдущий пример, где getProfileData содержит getProfileLink и getProfilePic внутри. Вот как композиция играет огромную роль в создании компонентов React и облегчает нашу работу.

Резюме композиции

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

Что такое декларативный код?

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

Хорошо, но что здесь означает императив:

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

Если вы знакомы с JavaScript, то довольно просто пройтись по всем элементам, присутствующим в корзине, добавить восклицательный знак к названиям фруктов и сохранить новую строку в массиве anotherBasket. Довольно просто, правда?

Однако это императивный код. Мы приказываем JavaScript что делать на каждом этапе. Мы должны дать ему команды:

  • установите начальное значение для итератора — (let i = 0)
  • сообщить циклу for, когда его нужно остановить — (i < basket.length)
  • получить корзину в текущей позиции и добавить восклицательный знак — (basket[i] + ‘!’)
  • сохранить данные в позиции ith в другом массиве — (anotherBasket[i])
  • увеличить ivariable на единицу — (i++)

Вы должны вручную сделать несколько шагов. Это не идеально, верно? Итак, давайте улучшать вещи, изучая декларативные вещи!

Декларативный код

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

const basket = [‘Apple’, ‘Grapes’, ‘Blueberry’, ‘Mango’]
const anotherBasket = basket.map(fruit => fruit + ‘!’)

Вот и все! Обратите внимание, что с этим кодом мы не:

  • создал iterator объект
  • сказал коду, когда он должен прекратить работу
  • использовал итератор для доступа к определенному элементу в массиве корзины
  • сохранял каждую новую строку в массиве anotherBasket
  • …обо всех этих шагах заботится метод JavaScript .map() Array.

Резюме декларативного кода

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

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

Что такое однонаправленный поток данных?

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

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

React использует явный метод для передачи данных между компонентами, что значительно упрощает отслеживание изменений состояния и того, как они влияют на другие места приложения. Итак, это называется **однонаправленным потоком данных**, потому что данные передаются только в одном направлении от родительских элементов к дочерним элементам.

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

Итак, на приведенной выше диаграмме у нас есть два компонента:

  • родительский компонент
  • дочерний компонент

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

Давайте поговорим о приведенном выше утверждении более подробно:

Данные находятся в родительском компоненте и передаются дочернему компоненту. Несмотря на то, что данные находятся в родительском компоненте, и родительский, и дочерний компоненты могут использовать эти данные.
Однако, если дочернему компоненту необходимо внести изменения в данные, он отправит обновленные данные в родительский компонент, в котором фактически будут внесены изменения. После внесения изменений в родительский компонент дочернему компоненту будут переданы данные (которые только что были обновлены!).

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

React — это «просто JavaScript»

React не нравится функциональность, которую вы уже можете реализовать в JavaScript.Например:
Если вы хотите создать список элементов и показать их для просмотра . Вместо рендеринга каждого элемента вручную в React для этого можно использовать методы JavaScript .split() и .map().

React строится на множестве приемов функционального программирования… приемов. Однако есть пара важных функций JavaScript, жизненно важных для функционального программирования, на которые мы должны обратить внимание. Это методы .map() и .filter() массива.

Метод массива .map()

Если вы не знакомы с методом JavaScript Array .map(), он вызывается для существующего массива и возвращает новый массив на основе того, что возвращается функцией, переданной в качестве аргумента. Давайте взглянем:

const basket = [‘Apple’, ‘Grapes’, ‘Blueberry’, ‘Mango’]
const basketLengths = basket.map( fruit => fruit.length );

Давайте рассмотрим, что здесь происходит. Метод .map() работает с массивами, поэтому нам нужно начать с массива:

const basket = [‘Apple’, ‘Grapes’, ‘Blueberry’, ‘Mango’]

Мы вызываем .map() для массива корзин и передаем ему функцию в качестве аргумента:

basket.map( fruit => fruit.length );

Стрелочная функция, переданная .map(), вызывается для каждого элемента в массиве имен! Стрелочная функция получает первое имя в массиве, сохраняет его в переменной имени и возвращает его длину. Затем он делает это снова для оставшихся двух имен.

.map() возвращает новый массив со значениями, возвращаемыми стрелочной функцией:

const basketLengths = basket.map( fruit => fruit.length );

Итак, basketLengths будет новым массивом [5, 6, 9, 5].

Важно понимать, что метод .map() возвращает новый массив, а не изменяет исходный массив.

Метод массива .filter()

Метод JavaScript Array .filter() аналогичен методу .map():

  • он вызывается в массиве
  • он принимает функцию в качестве аргумента
  • он возвращает новый массив

Отличие состоит в том, что функция, переданная в .filter(), используется как тест, и в новый массив включаются только те элементы массива, которые прошли тест. Давайте посмотрим на пример:

const basket = [‘Apple’, ‘Grapes’, ‘Blueberry’, ‘Mango’]
const shortBasket = basket.filter( fruit => fruit.length < 6 );

Как и раньше, у нас есть начальный массив. Мы вызываем .filter() для массива названий фруктов и передаем ему функцию в качестве аргумента:

basket.filter( fruit => fruit.length < 6 );

Опять же, как и в случае с .map(), функция стрелки, переданная в .filter(), вызывается для каждого элемента в массиве корзины. Первый элемент (например, «Apple») хранится в переменной имени fruit. Затем выполняется тест — это то, что делает реальную фильтрацию. Он проверяет длину имени. Если он равен 6 или больше, то он пропускается (и не включается в новый массив!). Но если длина имени фрукта меньше 6, то fruit.length < 6 возвращает true и имя включается в новый массив!

const shortBasket = basket.filter( fruit => fruit.length < 6 );

И, наконец, как и в случае с .map(), метод .filter() возвращает новый массив вместо изменения исходного массива.

React — это просто резюме JavaScript

React строится на том, что вы уже знаете — на JavaScript! Вам не нужно изучать специальную библиотеку шаблонов или новый способ работы.

Два основных метода, которые вы будете использовать довольно часто:

  • .map()
  • .filter()

Важно, чтобы вам было удобно пользоваться этими методами. Почему бы не просмотреть часть существующего кода и не попробовать преобразовать циклы for в вызовы .map() или посмотреть, можно ли удалить какие-либо операторы if с помощью .filter().

Бонус 🍄

Вот бонусная часть для вас, если вы прочитали это:

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

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

Ресурсы, которые я использовал:

  • Мои старые заметки Udacity React
  • Реагировать на официальную документацию
  • Некоторые из моих проектных работ

Вот и все люди 🌻 Спасибо, что читаете этот блог, надеюсь, что вы найдете его полезным. Пожалуйста, дайте мне знать в комментариях, если вы узнали что-то из этого блога. 💛