Hello, world!

Любой навык закрепляется практикой, а любая практика начинается с Hello, world!

https://codepen.io/furrycat/pen/VwprQLO

Что мы тут имеем:

1. Корневой html-элемент #root, в который будет рендериться React-приложение
2. Подключение нужных библиотек по CDN (React и ReactDOM)
3. Подключение Babel для компиляции JSX-синтаксиса
4. Метод ReactDOM.render, который принимает JSX-разметку и элемент, в который ее нужно вывести

#началоработы #примерыкода #документация

Компоненты

React основан на компонентном подходе, компоненты - это кирпичики, из которых строится ваше приложение.

Создание компонентов - это, наверно, основное, чем мы будем заниматься в React.

Вообще есть два способа создать компонент - с помощью простой функции и с помощью класса. Пока разберем только первый, как самый популярный.

В общем, и разбирать особо нечего. Функциональный компонент - это просто функция, которая возвращает JSX-разметку, которую нужно вывести.

https://codepen.io/furrycat/pen/RwpjQKN

Имя функции в данном случае можно использовать как тег. Например, тег Component1 будет замещен на разметку, которую возвращает функция Component1.

#примерыкода #началоработы #компоненты #документация

Важно: Всегда именуйте компоненты с заглавной буквы.

Если тег начинается со строчной буквы, React будет считать, что это обычный HTML-тег. А если с заглавной, то это уже компонент, который можно отрендерить.

#важно #началоработы #компоненты #документация

​Передача параметров в компоненты

В компонент можно передать параметры - в React они называются пропсы (props). Это делается через атрибуты тега.

https://codepen.io/furrycat/pen/eYveVqX?editors=0010

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

Функциональный компонент принимает объект props первым аргументом. Чтобы вывести полученные данные в разметке, используйте фигурные скобки. О JSX-разметке поговорим подробнее в следующий раз.

#началоработы #компоненты #примерыкода #документация

​JSX

JSX - это нечто среднее между HTML и JS. Большей частью этот формат похож на HTML, но с некоторыми особенностями из JS.

По умолчанию в браузерах он не обрабатывается, поэтому нужен компилятор - Babel. Он преобразует JSX в обычный JavaScript и исполняет его.

По большому счету JSX в React не необходим, все то же самое можно написать прямо на JS (как получается после компиляции). Но этот формат кажется очень удобным, поэтому сразу начнем работать с ним.

Главные особенности работы с JSX:

👉 атрибуты указываются не в kebab-case, а в camelCase, как в JavaScript
👉 вместо class нужно писать className
👉 вместо for (для элементов label) нужно писать htmlFor
👉 обработчики событий на тегах тоже в camelCase

Фрагмент JSX - это обычное JS-выражение, которое можно поместить в переменную и делать с ним другие привычные операции, например, передавать в функции и возвращать из них (как мы делаем в компонентах).

Читать в документации (рус): https://ru.react.js.org/docs/introducing-jsx.html

#началоработы #jsx #документация

​Выражения в JSX

Внутри JSX можно использовать различные JS-конструкции и выражения. Для этого предназначены фигурные скобки - все внутри них воспринимается именно как выражение и выполняется. В результате выполнения обычно получается фрагмент JSX или null, если ничего выводить не требуется.

https://codepen.io/furrycat/pen/yLMPKzW?editors=1010

Это можно использовать для условного рендеринга - когда в зависимости от некоторого условия выводится тот или иной фрагмент разметки или компонент (или вообще ничего не выводится).

#началоработы #jsx #документация

Вывод списков

Чтобы вывести несколько элементов внутри JSX, их нужно просто собрать в массив. Идеальный метод для этого Array.prototype.map. Он принимает любые данные в виде массива и может превратить их в фрагменты JSX. Полученный массив можно записать в переменную, а можно сразу вывести в JSX.

https://codepen.io/furrycat/pen/vYxpJea?editors=0010

Важно: каждый элемент списка должен иметь уникальный ключ (атрибут key).

#началоработы #jsx #примерыкода #документация

​Классовые компоненты

С функциональными компонентами мы уже знакомы: https://yangx.top/react_junior/7

Кроме них есть еще классовые. Суть та же самая, но возможностей больше.

https://codepen.io/furrycat/pen/bGqaZdr?editors=0010

Класс должен быть унаследован от React.Component и иметь метод render(), который возвращает разметку компонента.

Название класса так же превращается в тег, который можно использовать в разметке.

И вы по-прежнему можете передавать в компонент пропсы (как атрибуты тега) - теперь они доступы в this.props.

#примерыкода #компоненты #началоработы #документация

Отрисовка компонентов

Логика рендера выглядит довольно очевидной, но лучше все же проговорить ее еще раз.

👉 Все начинается с метода ReactDOM.render(), который принимает корневую разметку (обычно в формате JSX) и элемент, в который нужно ее поместить.

👉 Если разметка представляет собой обычные html-теги, они и выводятся как обычные html-теги.

👉 Если в разметке появляются пользовательские элементы (функциональные или классовые, неважно, главное, с большой буквы), React должен их отрендерить особым образом.

👉 Функциональный компонент просто вызывается как обычная функция, результатом этого становится новый фрагмент разметки, который вставляется на место кастомного тега.

👉 Если компонент классовый, то React вызывает его метод render(), который опять же возвращает фрагмент разметки.

👉 Все это происходит до того, пока не отрендерится все, что нужно.

#началоработы #компоненты #жизненныйциклкомпонента

Виртуальный DOM

С первого взгляда кажется, что при рендеринге React совершает стандартные операции с DOM-деревом: что-то вставляет, что-то удаляет и т.д.
Нет, в итоге это, конечно, так и есть, но сама техника немного сложнее.

React отдельно хранит "идеальное" представление интерфейса - виртуальное DOM-дерево. Если происходят какие-то изменения, то виртуальный DOM сравнивается с реальным и ищется самый короткий путь для обновления страницы.

С тонкостями виртуального DOM будем разбираться позднее, пока нужно просто знать, что он есть.

#началоработы #виртуальныйdom #документация

Состояние

Сейчас мы знаем только один путь вывести что-то на страницу с помощью React - ReactDOM.render. Например, если вы захотите сделать часы/таймер/секундомер, то придется каждую секунду рендерить разметку заново вручную. Это не совсем то, чего мы ждем от крутого фронтенд-фреймворка.

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

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

https://codepen.io/pen?editors=0010

Состояние должно храниться в свойстве класса this.state, а обновлять его нужно с помощью специального метода this.setState.

Обратите внимание:

👉 Компонент наследует от React.Component, в конструкторе вызывается super()
👉 Метод tick в обработчике клика нужно явно привязать к компоненту, чтобы не потерялся контекст выполнения
👉 Состояние обновляется только с помощью метода this.setState, простое присваивание останется незамеченным


#началоработы #примерыкода #состояние #ссылки

​Передача функции в компонент

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

https://codepen.io/furrycat/pen/GRWOxZv?editors=0010

Например, эту функцию-коллбэк можно вызывать при клике на кнопку или изменении значения поля ввода.

#началоработы #компоненты #документация

​Привязка контекста обработчиков

Обработчики событий у классовых компонентов удобно выносить в отдельные методы. Но нужно помнить о привязке контекста (this).

https://codepen.io/pen?editors=0010

Если внутри обработчика есть ссылки на компонент (обычно this.props или this.state/this.setState), то важно сохранять контекст, чтобы этот this при вызове ссылался именно на компонент.

Лучше всего это делать прямо в конструкторе.

#началоработы #примерыкода #компоненты #документация

Альтернатива биндингу обработчиков

При установке обработчиков событий в React-компонентах не забываем про сохранение контекста выполнения. Классический метод bind разобран выше. Но есть и альтернативы.

👉 Стрелочные функции

https://codepen.io/furrycat/pen/VwpXROe?editors=0010

Обработчик можно оформить как стрелочную функцию. Так как она будет создана внутри метода render, а следовательно при вызове в качестве this у нее будет сам компонент.

Большой минус этого подхода: функция будет создаваться заново при каждом рендере компонента.

👉 Синтаксис общедоступных полей классов

https://codepen.io/furrycat/pen/abJYMrg?editors=0010

Экспериментальная фича, которую нужно отдельно подключать в ваш проект: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties.

Обработчик, объявленный таким образом, дополнительно привязывать к компоненту не нужно.

#началоработы #примерыкода #обработкасобытий #документация

Передача параметров в обработчик события

Иногда в обработчик требуется передать дополнительные параметры (кроме самого объекта события). Например, это может быть полезно внутри списков для указания конкретного элемента. И при этом нельзя забывать о сохранении контекста выполнения.

https://codepen.io/furrycat/pen/ExWEJWx?editors=0011

Для этого можно использовать стрелочные функции или привязывать аргументы с помощью метода bind.

#началоработы #примерыкода #обработкасобытий #документация

​Асинхронный setState

Вот и первая ошибка новичка 🙂

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

https://codepen.io/furrycat/pen/VwpXNJr?editors=0010

Метод update() делает два вызова setState подряд, каждый из которых увеличивает value на 1. Но в результате мы получаем не 3, как предполагалось, а 2. Два вызова просто превратились в один.

#началоработы #ошибки #состояние #документация #примерыкода

Асинхронный setState. Решение

Если вы хотите использовать данные текущего состояния (или пропсов) в вызове setState, то следует воспользоваться его вариацией, которая принимает не объект, а функцию. В эту функцию передаются текущие (на момент выполнения!) state и props, а вернуть нужно объект с измененными полями.

https://codepen.io/furrycat/pen/eYvMaYJ?editors=0010

#началоработы #ошибки #состояние #примерыкода #документация

setState() - что нужно знать

👉 setState - единственный способ изменить состояние компонента. Простое присваивание в this.state работает исключительно в конструкторе.

👉 setState работает асинхронно. Для лучшей производительности несколько вызовов метода могут быть сгруппированы в одно обновление.

👉 В setState нужно передавать только те поля, которые изменились. Неизменные копировать необязательно. Изменения будут сложены со старым состоянием.

#началоработы #состояние #документация

Жизненный цикл компонентов

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

Какие они вообще бывают?

👉 Монтирование (mounting) - первоначальный рендеринг компонента на странице.
👉 Обновление - происходит при изменении пропсов или состояния компонента.
👉 Размонтирование (unmounting) - удаление корневого DOM-узла компонента.
👉 Всплытие ошибок от дочерних компонентов.

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

☑️ constructor() - конструктор классового компонента. Вызывается еще до монтирования. Здесь нужно инициализировать состояние (this.state) и привязывать обработчики событий к экземпляру компонента.

☑️ render() - главный метод компонента, который должен вернуть его разметку.

☑️ componentDidMount() - вызывается сразу после монтирования компонента в DOM. Тут стоит взаимодействовать с DOM-узлами (если нужно) и отправлять сетевые запросы.

☑️ componentDidUpdate() - вызывается после каждого обновления пропсов или состояния компонента (не вызывается при первом рендере). Тут удобно сравнивать текущие данные с предыдущими и делать что-нибудь на этой основе.

☑️ componentWillUnmount() - вызывается перед размонтированием компонента. Тут нужно очищать память, сбрасывать все таймеры и подписки.

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

Ссылка на документацию (рус): https://ru.reactjs.org/docs/react-component.html#the-component-lifecycle

#началоработы #компоненты #жизненныйциклкомпонента