React предельно упрощает создание привлекательных и надежных интерфейсов для веб-приложений. Эта великолепная библиотека JavaScript имеет модульную архитектуру, что позволяет легко создавать, объединять и тестировать компоненты. React идеально подходит для небольших прототипов, корпоративных сайтов и других подобных решений.
«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.
Книга предназначена для разработчиков, имеющих опыт создания веб-приложений на базе JavaScript.
Author(s): Азат Мардан, Мортен Барклунд
Series: Библиотека программиста
Edition: 2
Publisher: Питер
Year: 2024
Language: Russian
Commentary: Publisher's PDF
Pages: 512
City: СПб.
Tags: Web Applications; JSX; React Hooks; React.js
Отзывы о первом издании
Предисловие
Благодарности
О книге
Для кого эта книга
Структура книги
Исходный код
Программные требования
Об авторах
Иллюстрация на обложке
От издательства
Глава 1. Знакомство с React
1.1. Преимущества React
1.1.1. Простота
1.1.2. Скорость и удобство тестирования
1.1.3. Экосистема и сообщество
1.2. Недостатки React
1.3. Как React интегрируется в веб-приложение
1.3.1. Одностраничные приложения и React
1.3.2. Стек React
1.4. Первый код React: Hello world
1.4.1. Результат
1.4.2. Написание приложения
1.4.3. Установка и запуск веб-сервера
1.4.4. Переход на локальный веб-сайт
1.5. Вопросы
Ответы
Итоги
Глава 2. Первые шаги с React
2.1. Создание нового приложения React
2.1.1. Команды проектов React
2.1.2. Структура файлов
2.1.3. Шаблоны
2.1.4. Достоинства и недостатки
2.2. О примерах в книге
2.3. Вложение элементов
2.3.1. Иерархия узлов
2.3.2. Простое вложение
2.3.3. Одноуровневые элементы
2.4. Создание нестандартных компонентов
2.5. Работа со свойствами
2.5.1. Одно свойство
2.5.2. Несколько свойств
2.5.3. Специальное свойство: children
2.6. Структура приложения
2.7. Вопросы
Ответы
Итоги
Глава 3. Знакомство с JSX
3.1. Что такое JSX и чем он хорош?
3.1.1. До и после JSX
3.1.2. Сочетание HTML и JavaScript
3.2. Логика JSX
3.2.1. Создание элементов с JSX
3.2.2. Использование JSX с нестандартными компонентами
3.2.3. Многострочные объекты JSX
3.2.4. Вывод переменных в JSX
3.2.5. Работа со свойствами в JSX
3.2.6. Условные конструкции в JSX
3.2.7. Комментарии в JSX
3.2.8. Списки объектов JSX
3.2.9. Фрагменты в JSX
3.3. Транспиляция JSX
3.4. Возможные проблемы React и JSX
3.4.1. Самозакрывающиеся элементы
3.4.2. Специальные символы
3.4.3. Преобразование строк
3.4.4. Атрибут style
3.4.5. Зарезервированные имена class и for
3.4.6. Атрибуты из нескольких слов
3.4.7. Значения логических атрибутов
3.4.8. Пробелы
3.4.9. Атрибуты data-
3.5. Вопросы
Ответы
Итоги
Глава 4. Функциональные компоненты
4.1. Сокращенная запись компонентов React
4.1.1. Пример приложения
4.1.2. Деструктуризация свойств
4.1.3. Значения по умолчанию
4.1.4. Сквозные свойства
4.2. Сравнение типов компонентов
4.2.1. Преимущества функциональных компонентов
4.2.2. Недостатки функциональных компонентов
4.2.3. Незначимые факторы при выборе компонентов
4.2.4. Выбор типа компонента
4.3. Когда не стоит использовать функциональные компоненты
4.3.1. Границы ошибок
4.3.2. Код с компонентами на базе классов
4.3.3. Библиотека требует использования компонентов на базе классов
4.3.4. getSnapshotBeforeUpdate
4.4. Преобразование компонента на базе класса в функциональный компонент
4.4.1. Версия 1: только render()
4.4.2. Версия 2: вспомогательный метод
4.4.3. Версия 3: реальный метод класса
4.4.4. Версия 4: конструктор
4.4.5. Повысить сложность — значит усложнить преобразование
4.5. Вопросы
Ответы
Итоги
Глава 5. Состояния и их роль в интерактивной природе React
5.1. Почему в приложениях React важно состояние?
5.1.1. Состояние компонента React
5.1.2. Где хранить состояние?
5.1.3. Что можно хранить в состоянии компонента
5.1.4. Что не стоит хранить в состоянии
5.2. Добавление состояния в функциональный компонент
5.2.1. Импортирование и использование хука
5.2.2. Инициализация состояния
5.2.3. Деструктуризация значения состояния и сеттера
5.2.4. Использование значений состояния
5.2.5. Присваивание значения
5.2.6. Использование множественных состояний
5.2.7. Область видимости состояния
5.3. Компоненты на базе классов с состоянием
5.3.1. Сходство с хуком useState
5.3.2. Отличия от хука useState
5.4. Вопросы
Ответы
Итоги
Глава 6. Эффекты и жизненный цикл компонентов React
6.1. Выполнение эффектов в компонентах
6.1.1. Выполнение эффекта при монтировании
6.1.2. Выполнение эффекта при монтировании и очистки при демонтировании
6.1.3. Выполнение очистки при демонтировании
6.1.4. Выполнение эффекта при некоторых рендерингах
6.1.5. Выполнение эффекта и очистки при отдельных рендерингах
6.1.6. Синхронное выполнение эффекта
6.2. Рендеринг
6.2.1. Рендеринг при монтировании
6.2.2. Рендеринг при рендеринге родительского компонента
6.2.3. Рендеринг при обновлении состояния
6.2.4. Рендеринг внутри функций
6.3. Жизненный цикл компонента на базе класса
6.3.1. Методы жизненного цикла
6.3.2. Унаследованные методы жизненного цикла
6.3.3. Преобразование методов жизненного цикла в хуки
6.4. Вопросы
Ответы
Итоги
Глава 7. Хуки как основа веб-приложений
7.1. Компоненты с состоянием
7.1.1. Простые значения состояния с useState
7.1.2. Создание сложного состояния с useReducer
7.1.3. Сохранение значения без повторного рендеринга с использованием useRef
7.1.4. Упрощенное многокомпонентное состояние с использованием useContext
7.1.5. Низкоприоритетные обновления состояния с использованием useDeferredValue и useTransition
7.2. Эффекты компонентов
7.3. Оптимизация производительности за счет сокращения количества повторных рендерингов
7.3.1. Мемоизация произвольного значения с использованием useMemo
7.3.2. Мемоизация функций с использованием useCallback
7.3.3. Создание стабильных идентификаторов DOM с использованием useId
7.4. Создание сложных библиотек компонентов
7.4.1. Создание API компонентов с использованием useImperativeHandle
7.4.2. Улучшенная отладка хуков с использованием useDebugValue
7.4.3. Синхронизация внешних данных с использованием useSyncExternalStore
7.4.4. Выполнение эффекта перед рендерингом с использованием useInsertionEffect
7.5. Два ключевых принципа хуков
7.6. Вопросы
Ответы
Итоги
Глава 8. Обработка событий в React
8.1. Обработка событий DOM в React
8.1.1. Базовая обработка событий в React
8.2. Обработчики событий
8.2.1. Определение обработчиков событий
8.2.2. Объекты событий
8.2.3. Объекты событий React
8.2.4. Длительное хранение объектов синтетических событий
8.3. Фазы событий и распространение
8.3.1. Как фазы и распространение работают в браузере
8.3.2. Обработка фаз событий в React
8.3.3. Нетипичное распространение событий
8.3.4. Невсплывающие события DOM
8.4. Действия по умолчанию и как их избежать
8.4.1. Действие события по умолчанию
8.4.2. Как избежать выполнения действий по умолчанию
8.4.3. Другие события по умолчанию
8.5. Общие сведения об объектах событий React
8.6. Функции обработчиков событий из свойств
8.7. Генераторы обработчиков событий
8.8. Ручное прослушивание событий DOM
8.8.1. Прослушивание событий окна и документа
8.8.2. Неподдерживаемые события HTML
8.8.3. Объединение обработки событий React и DOM
8.9. Вопросы
Ответы
Итоги
Глава 9. Работа с формами в React
9.1. Управляемый и неуправляемый ввод
9.2. Контроль управляемого ввода
9.2.1. Фильтрация ввода
9.2.2. Ввод с применением маски
9.2.3. Ввод множества похожих значений
9.2.4. Отправка данных форм
9.2.5. Другие виды полей ввода
9.2.6. Другие свойства
9.3. Контроль неуправляемого ввода
9.3.1. Возможности
9.3.2. Поля ввода файлов
9.4. Вопросы
Ответы
Итоги
Глава 10. Расширенные хуки React для масштабирования
10.1. Разрешение компонентам обращаться к значениям
10.1.1. React Context
10.1.2. Контекстные состояния
10.1.3. Подробнее о React Context
10.2. Работа со сложным состоянием
10.2.1. Взаимозависимое состояние
10.3. Нестандартные хуки
10.3.1. Как образуется нестандартный хук?
10.3.2. Когда использовать нестандартный хук?
10.3.3. Где найти нестандартные хуки?
10.4. Вопросы
Ответы
Итоги
Глава 11. Проект: меню сайта
11.1. Заготовка меню
11.1.1. Выходная разметка HTML
11.1.2. Иерархия компонентов
11.1.3. Значки
11.1.4. CSS
11.1.5. Шаблон
11.1.6. Исходный код
11.1.7. В браузере
11.2. Рендеринг статического меню
11.2.1. Цель упражнения
11.2.2. Выходная разметка HTML
11.2.3. Дерево компонентов
11.2.4. Исходный код
11.2.5. В браузере
11.3. Домашнее задание: динамическое меню
11.3.1. Цель шага
11.3.2. Подсказки для решения
11.3.3. Иерархия компонентов
11.3.4. Что дальше?
11.4. Домашнее задание: получение данных из контекста
11.4.1. Цель шага
11.4.2. Подсказки для решения
11.4.3. Иерархия компонентов
11.4.4. Что дальше?
11.5. Домашнее задание: дополнительная ссылка
11.5.1. Цель шага
11.5.2. Подсказки для решения
11.5.3. Иерархия компонентов
11.5.4. Что дальше?
11.6. Несколько слов напоследок
Итоги
Глава 12. Проект: таймер
12.1. Заготовка для таймера
12.1.1. Выходная разметка HTML
12.1.3. Структура проекта
12.1.4. Исходный код
12.1.5. Запуск приложения
12.2. Добавление простой кнопки запуска/остановки таймера
12.2.1. Цель упражнения
12.2.2. Иерархия компонентов
12.2.3. Обновленная структура проекта
12.2.4. Исходный код
12.2.5. Запуск приложения
12.3. Домашнее задание: инициализация таймера произвольным временем
12.4. Домашнее задание: сброс таймеров
12.5. Домашнее задание: множественные таймеры
Итоги
Глава 13. Проект: менеджер задач
13.1. Заготовка менеджера задач
13.1.1. Иерархия компонентов
13.1.2. Структура проекта
13.1.3. Исходный код
13.1.4. Запуск приложения
13.2. Простой список задач
13.2.1. Цель упражнения
13.2.2. Иерархия компонентов
13.2.3. Обновленная структура проекта
13.2.4. Исходный код
13.2.5. Запуск приложения
13.3. Домашнее задание: этапы и прогресс выполнения задач
13.4. Домашнее задание: приоритеты
13.5. Домашнее задание: перетаскивание
13.6. Заключение
Итоги