React - это библиотека JavaScript для создания компонентов пользовательского интерфейса. Экосистема React действительно огромна, что, в конечном итоге, делает ее одной из лучших библиотек во всей фронтенд разработке.
Почему React?
1️⃣Переиспользуемые компоненты
2️⃣Быстрый рендер компонентов благодаря виртуальному DOM
3️⃣Огромная экосистема
Типичное приложение React содержит множество компонентов. Они переиспользуемые и могут взаимодействовать друг с другом.
Что такое компонент?
Компонент - это простая функция, которую вы можете вызвать с некоторыми входными данными, и она отобразит некоторые элементы DOM.
По сути, вся веб-страница - это смесь различных компонентов.
Компоненты бывают двух типов:
1️⃣ Компоненты на основе классов
2️⃣ Функциональные компоненты
Компоненты, основанные на классах, определяются с использованием классов ES6, в то время как функциональные компоненты являются базовыми функциями JavaScript.
Прежде чем погрузиться в это глубже, давайте немного поговорим о JSX.
JSX расшифровывается как JavaScript XML. По сути, это не что иное, как расширение JavaScript, которое позволяет нам писать HTML-код в файле JavaScript.
Рассмотрим это объявление переменной. Это не JS и не HTML. Это смесь JavaScript + XML = JSX.
Теперь, когда мы понимаем, что такое JSX, давайте двигаться вперед.
Функциональные компоненты - это просто функция JavaScript, которая принимает некоторый параметр и возвращает некоторый код JSX.
Типичный функциональный компонент:
Export нужен для того, чтобы мы могли использовать компонент в других местах нашего веб-приложения. Например вот так:
Виртуальный ДОМ (vDOM)
Это очень важная концепция в React.
Возможно, вы слышали термин "DOM". Так вот, виртуальный DOM похож на него. Он использует стратегию, которая обновляет DOM без необходимости перерисовывать все элементы веб-страницы.
Каждый раз, когда DOM изменяется, браузеру необходимо пересчитать весь макет, а затем перерендерить всю веб-страницу, что замедляет работу веб-приложения.
Чтобы избавиться от этого, у нас есть виртуальный DOM. Каждый раз, когда состояние нашего приложения меняется, виртуальный DOM обновляется вместо реального DOM.
Всякий раз, когда новый элемент добавляется в пользовательский интерфейс, создается новый виртуальный DOM. Если состояние этого элемента изменится, будет создан второй новый виртуальный DOM, который будет сравниваться с предыдущим виртуальным DOM. Затем он обновляет только этот объект на реальном DOM.
Заключение
И что самое классное, вы можете начать изучать React прямо сейчас, однако, базовое понимание программирования, Javascript и HTML может упростить этот процесс.
Я рекомендую начать именно с основных концепций JavaScript, подробнее об этом вы можете прочитать в моей статье: 8 основных концепций JavaScript, которые нужно знать новичку