Библиотека JavaScript для создания пользовательских интерфейсов. В React у нас есть целая куча различных компонентов, каждый из которых представлен так, как если бы он был элементом HTML. Таким образом, мы фактически создаем наши собственные пользовательские элементы HTML, определяя стиль и функциональность каждого из них. И затем мы можем расположить их как HTML-элементы внутри общей структуры, сохраняя код для нашего веб-приложения невероятно чистым и пригодным для повторного использования.
React фактически объединяет небольшое количество файлов каждого из этих типов (HTML, CSS, JS) в один компонент. Так что каждый компонент имеет свой собственный стиль и функциональность, которыми он управляет. И вы можете создавать компоненты, каждый из которых выполняет свою функцию и имеет разный внешний вид.
Старые времена, когда у нас был Facebook, и нам приходилось обновлять страницу, чтобы увидеть обновления. Но в наши дни все это обрабатывается с помощью уведомлений, и у нас есть каждый компонент, который прослушивает изменения на сервере и обновляет себя, свой внешний вид и данные, а также может независимо общаться с сервером. Итак, представьте, если бы каждая отдельная часть веб-сайта Facebook была отдельным компонентом. Таким образом, новостная лента — это отдельный компонент, и каждый из постов — это отдельный компонент. Таким образом, если к посту есть новый комментарий, этот пост сможет обновиться, не затрагивая остальную часть веб-сайта.
React может действительно эффективно повторно отображать эти изменения. И делает это, сравнивая изменения. Поэтому всякий раз, когда происходит изменение, например, поступает новый фрагмент данных или пользователь что-то делает, он будет сравнивать новую версию дерева DOM, которую вы хотите отобразить, со старой версией, которая уже отображается, и будет делать это вид найти разницу вещь.
React работает, создавая файлы JSX. Файлы JSX — это файлы, в которых HTML находится прямо в теле файла JavaScript. За кулисами наш HTML подхватывается компилятором и преобразуется или компилируется в настоящий JavaScript. И компилятор исходит из модуля React. Внутри модуля React есть что-то под названием Babel. А Babel — это компилятор JavaScript, поэтому он может брать JavaScript следующего поколения, например es6, es7, и компилировать его в версию JavaScript, понятную каждому браузеру. И это включает в себя компиляцию JSX в старый добрый JavaScript.
Создать первое реагирующее приложение
npx create-react-app my-app
запустите сервер разработки
запуск нпм
Реагировать на реквизит
‹input id="fName" placeholder="введите имя" value="xxx" ›
Мы используем id, name, placeholder, value как атрибуты HTML-элементов для отправки пользовательских фрагментов данных в этот конкретный элемент.
Если вы думаете о своем компоненте реагирования почти как о пользовательском элементе HTML, мы можем определить эти атрибуты. В мире реактивных компонентов эти атрибуты называются свойствами (реквизитами).
Передать реквизит
Применить полученные реквизиты
Компоненты класса и функциональные компоненты
В React мы можем создавать компоненты двумя разными способами. Это компоненты класса и функциональные компоненты. Функциональный компонент — это обычная функция JavaScript, которая принимает свойства в качестве аргумента и возвращает элемент React. Компонент класса требует расширения от React. Component и создайте функцию рендеринга, которая возвращает элемент React. В функциональных компонентах не используется метод рендеринга.
Пример функционального компонента
Пример компонента класса
Реагировать на крючки
Хуки — это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса. Функции, которые позволяют нам подключаться к состоянию нашего приложения и читать или изменять его. Во-первых, нам нужно импортировать { useState } из «реакции». Вы должны использовать хук внутри функционального компонента.
