Основы REACT

Что такое React:

React - это библиотека JavaScript, созданная Facebook. Это инструмент для создания компонентов пользовательского интерфейса. React не управляет DOM браузера напрямую, вместо этого он создает копию DOM и сохраняет ее в памяти. Этот скопированный DOM обычно известен как «ВИРТУАЛЬНЫЙ DOM». Затем React выясняет, какие изменения были внесены, и изменяет только эту часть DOM.

Навыки для изучения React:
1. HTML и CSS
2. JSX
3. Основы JavaScript и ES6
4. Менеджер пакетов ( Npm )
5. Git и CLI

Функция визуализации: React отображает HTML на веб-странице с помощью функции React DOM.render (). Эта функция принимает два аргумента: HTML-код и HTML-элемент. Цель этой функции - отобразить указанный HTML-код внутри указанного элемента.

Результат отображается в <div id='root'>элементе:

В коде HTML здесь используется JSX, который позволяет писать теги HTML внутри кода JavaScript.

JSX: JSX означает JavaScript XML. Это позволяет нам писать HTML в React. JSX преобразует HTML в элементы реакции.

1. С JSX:

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

Выражение можно записать на JSX с помощью фигурных скобок {}. А чтобы написать несколько строк HTML, вы должны заключить HTML в круглые скобки и заключить все в один элемент верхнего уровня. Например,

Функциональный компонент: компонент - это независимый, многократно используемый блок кода, который делит пользовательский интерфейс на более мелкие части. Функциональный компонент - это в основном функция JavaScript / ES6, которая возвращает элемент React (JSX). Его нужно экспортировать, чтобы потом использовать в другом месте.

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

Props: Props - это сокращение от свойств, которые используются для передачи данных между компонентами React. Поток данных React между компонентами является однонаправленным (только от родителя к потомку).
Например, если вы хотите передать что-то из приложения в компонент, вы должны передать это как атрибут с подходящим именем. Здесь я передаю «имя» из компонента «Приложение» в компонент «Добро пожаловать». Если вам нужно передавать данные динамически, просто используйте фигурные скобки.

Итак, в компоненте Welcome мы получим данные в props.
И мы можем использовать это вот так.

Состояние: React имеет еще один специальный встроенный объект, называемый состоянием, который позволяет компонентам создавать и управлять своими собственными данными. Таким образом, в отличие от свойств, компоненты не могут передавать данные с состоянием, но они могут создавать их и управлять ими внутри.
Компоненты React отображаются (с состоянием) на основе данных в состоянии. Состояние содержит исходную информацию. Таким образом, при изменении состояния React получает информацию и немедленно повторно отображает ту часть DOM, которую действительно нужно изменить. Существует метод setState, который запускает процесс повторного рендеринга обновленных частей. React получает информацию, знает, какие части нужно изменить, и делает это быстро, без повторного рендеринга всей DOM.
В функциональных компонентах с помощью React Hooks мы можем использовать это «состояние».
Мы реализуем простой счетчик, используя перехватчик состояния использования React.

И использовать этот компонент в App.js можно так:

useEffect: функциональный компонент React использует реквизиты и / или состояние для вычисления вывода. Если функциональный компонент выполняет вычисления, которые не нацелены на выходное значение, эти вычисления называются побочными эффектами.

Хук useEffect () принимает 2 аргумента:

useEffect(callback[, dependencies]);

callback - это функция обратного вызова, содержащая логику побочных эффектов. useEffect()выполняет функцию обратного вызова после того, как React зафиксирует изменения на экране. dependencies - это необязательный массив зависимостей. useEffect()выполняет обратный вызов только в том случае, если зависимости изменились между визуализацией.
Поместите логику побочного эффекта в функцию обратного вызова, а затем используйте аргумент зависимостей для управления, когда вы хотите, чтобы побочный эффект запускался. Это единственная цель useEffect().

События React: как и HTML, React может выполнять действия на основе пользовательских событий. Reach имеет те же события, что и HTML: click, change, mouserover и т. Д.
События React записываются в синтаксисе camelCase: onClickвместо onclick.

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

React CSS: чтобы стилизовать элемент со встроенным атрибутом стиля, значение должно быть объектом JavaScript. Свойства с двумя именами, например background-color, должны быть написаны в синтаксисе верблюжьего регистра.

Вы также можете создать объект с информацией о стиле и указать его в атрибуте style: