react

1. react/frontend

2. Что такое React?

• Заголовок: React = Компоненты + Интерактивность
• Разработан Facebook (Meta) в 2013 году.
• Позволяет строить UI как набор компонентов — переиспользуемых
кусочков интерфейса.
• Использует виртуальный DOM для быстрых обновлений.

3. Почему React?

• Список:
• Простота и гибкость
• Огромное сообщество
• Поддержка TypeScript
• Однажды написанный компонент — можно использовать везде
• Используется в Netflix, Instagram, Airbnb и др.

4. Основные концепции

• Компоненты — строительные блоки приложения
• JSX — синтаксис, похожий на HTML внутри JS
• State — данные, которые могут меняться
• Props — данные, передаваемые в компонент извне

5. JSX — HTML внутри JavaScript

• Что такое JSX?
• Пояснение:
Это не строка и не HTML — это синтаксический сахар для
React.createElement().
Используйте {} для вставки JS-выражений:

6. Компоненты — функции, которые возвращают UI

• Компонент — это независимая, переиспользуемая часть
пользовательского интерфейса (UI), которая описывает:
• Как выглядит часть страницы (через JSX),
• Как она ведёт себя (через логику на JavaScript),
• Как реагирует на изменения (через состояние и события).

7. Типы компонентов

• 1. Функциональные компоненты (самые популярные сегодня)
• Это обычные JavaScript-функции, которые возвращают JSX.
• 2. Классовые компоненты (устаревший стиль, но иногда встречается)
• Используют классы ES6 и наследуются от React.Component.

8. Props

• Props (сокр. от properties) — это аргументы, которые передаются в
компонент извне, как параметры функции.

9.

10. Hooks

• Представь, что у тебя есть функциональный компонент:
• А теперь тебе нужно:
• Считать, сколько раз нажали на кнопку → нужен state
• При монтировании компонента отправить аналитику → нужен эффект
• Без хуков — пришлось бы переписывать компонент как класс.
С хуками — просто добавляешь пару строк!

11. Основные хуки

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

12.

count — текущее значение состояния
setCount — функция для его обновления
При вызове setCount() React перерисует компонент

13. useEffect — побочные эффект

• Позволяет выполнять побочные действия:
• Загрузка данных
• Подписка на события
• Изменение заголовка страницы
• Работа с таймерами

14.

• Как работает useEffect?
Без второго аргумента → запускается после каждого рендера
С пустым массивом [] → запускается только при монтировании
С массивом зависимостей [a, b] → запускается, если изменились a или
b

15. useContext — передача данных "насквозь"

useContext — передача данных
"насквозь"
• Позволяет избежать "прокидывания пропсов" через множество
уровней компонентов.

16.

Хук
Назначение
useRef
Доступ к DOM-элементу или
хранение изменяемого значения без
перерисовки
useMemo
Мемоизация значения
(кэширование результата
вычислений)
useCallback
Мемоизация функции (чтобы не
пересоздавать её при каждом
рендере)
useReducer
Альтернатива useState для сложной
логики состояния

17. State

• Если компоненту нужно хранить и менять данные (например, счётчик,
введённый текст, статус загрузки), он использует состояние (state).
• Для этого есть хук useState:

18.

isOn — текущее значение состояния
• setIsOn — функция для его изменения
• При вызове setIsOn() React перерисует компонент с новым значением
• Каждый вызов useState создаёт независимую переменную состояния.

19.

Событие
Хук
Компонент отрендерился / данные
изменились
useEffect
Нужно запомнить значение между
рендерами
useMemo, useCallback
Доступ к DOM-элементу
useRef

20. Первое приложение:

21. Полезные ресурсы

• Заголовок: Где учиться дальше?
•