React быстро. 2 межд. изд

Отзывы о первом издании....17

Предисловие....20

Благодарности....22

О книге....24

Для кого эта книга....24

Структура книги....25

Исходный код....26

Программные требования....26

Об авторах....28

Иллюстрация на обложке....29

От издательства....30

Глава 1. Знакомство с React....31

1.1. Преимущества React....33

1.1.1. Простота....34

1.1.2. Скорость и удобство тестирования....40

1.1.3. Экосистема и сообщество....42

1.2. Недостатки React....42

1.3. Как React интегрируется в веб-приложение....43

1.3.1. Одностраничные приложения и React....45

1.3.2. Стек React....47

1.4. Первый код React: Hello world....49

1.4.1. Результат ....50

1.4.2. Написание приложения....51

1.4.3. Установка и запуск веб-сервера....54

1.4.4. Переход на локальный веб-сайт....55

1.5. Вопросы....56

Ответы....57

Итоги....57

Глава 2. Первые шаги с React....59

2.1. Создание нового приложения React....60

2.1.1. Команды проектов React....64

2.1.2. Структура файлов....66

2.1.3. Шаблоны....67

2.1.4. Достоинства и недостатки....68

2.2. О примерах в книге....70

2.3. Вложение элементов....71

2.3.1. Иерархия узлов....73

2.3.2. Простое вложение....74

2.3.3. Одноуровневые элементы....76

2.4. Создание нестандартных компонентов....81

2.5. Работа со свойствами....85

2.5.1. Одно свойство....86

2.5.2. Несколько свойств....88

2.5.3. Специальное свойство: children....92

2.6. Структура приложения....96

2.7. Вопросы....101

Ответы....102

Итоги....103

Глава 3. Знакомство с JSX....104

3.1. Что такое JSX и чем он хорош?....105

3.1.1. До и после JSX....106

3.1.2. Сочетание HTML и JavaScript....106

3.2. Логика JSX....109

3.2.1. Создание элементов с JSX....109

3.2.2. Использование JSX с нестандартными компонентами....111

3.2.3. Многострочные объекты JSX....113

3.2.4. Вывод переменных в JSX....114

3.2.5. Работа со свойствами в JSX....116

3.2.6. Условные конструкции в JSX....120

3.2.7. Комментарии в JSX....128

3.2.8. Списки объектов JSX....129

3.2.9. Фрагменты в JSX....132

3.3. Транспиляция JSX....135

3.4. Возможные проблемы React и JSX....136

3.4.1. Самозакрывающиеся элементы....136

3.4.2. Специальные символы....137

3.4.3. Преобразование строк....138

3.4.4. Атрибут style....140

3.4.5. Зарезервированные имена class и for....141

3.4.6. Атрибуты из нескольких слов....142

3.4.7. Значения логических атрибутов....142

3.4.8. Пробелы....145

3.4.9. Атрибуты data-....148

3.5. Вопросы....149

Ответы....150

Итоги....150

Глава 4. Функциональные компоненты....151

4.1. Сокращенная запись компонентов React....153

4.1.1. Пример приложения....153

4.1.2. Деструктуризация свойств....158

4.1.3. Значения по умолчанию....160

4.1.4. Сквозные свойства....163

4.2. Сравнение типов компонентов....166

4.2.1. Преимущества функциональных компонентов....167

4.2.2. Недостатки функциональных компонентов....168

4.2.3. Незначимые факторы при выборе компонентов....168

4.2.4. Выбор типа компонента....169

4.3. Когда не стоит использовать функциональные компоненты....170

4.3.1. Границы ошибок....170

4.3.2. Код с компонентами на базе классов....171

4.3.3. Библиотека требует использования компонентов на базе классов....172

4.3.4. getSnapshotBeforeUpdate....172

4.4. Преобразование компонента на базе класса в функциональный компонент....173

4.4.1. Версия 1: только render()....174

4.4.2. Версия 2: вспомогательный метод....177

4.4.3. Версия 3: реальный метод класса....181

4.4.4. Версия 4: конструктор....184

4.4.5. Повысить сложность — значит усложнить преобразование....187

4.5. Вопросы....188

Ответы....189

Итоги....189

Глава 5. Состояния и их роль в интерактивной природе React....190

5.1. Почему в приложениях React важно состояние?....192

5.1.1. Состояние компонента React....193

5.1.2. Где хранить состояние?....194

5.1.3. Что можно хранить в состоянии компонента....196

5.1.4. Что не стоит хранить в состоянии....197

5.2. Добавление состояния в функциональный компонент....198

5.2.1. Импортирование и использование хука....201

5.2.2. Инициализация состояния....204

5.2.3. Деструктуризация значения состояния и сеттера....212

5.2.4. Использование значений состояния....213

5.2.5. Присваивание значения....216

5.2.6. Использование множественных состояний....228

5.2.7. Область видимости состояния....231

5.3. Компоненты на базе классов с состоянием....236

5.3.1. Сходство с хуком useState....237

5.3.2. Отличия от хука useState....239

5.4. Вопросы....240

Ответы....241

Итоги....241

Глава 6. Эффекты и жизненный цикл компонентов React....243

6.1. Выполнение эффектов в компонентах....244

6.1.1. Выполнение эффекта при монтировании....246

6.1.2. Выполнение эффекта при монтировании и очистки при демонтировании....249

6.1.3. Выполнение очистки при демонтировании ....252

6.1.4. Выполнение эффекта при некоторых рендерингах....254

6.1.5. Выполнение эффекта и очистки при отдельных рендерингах....257

6.1.6. Синхронное выполнение эффекта....261

6.2. Рендеринг....264

6.2.1. Рендеринг при монтировании ....265

6.2.2. Рендеринг при рендеринге родительского компонента....267

6.2.3. Рендеринг при обновлении состояния....269

6.2.4. Рендеринг внутри функций....271

6.3. Жизненный цикл компонента на базе класса....274

6.3.1. Методы жизненного цикла ....275

6.3.2. Унаследованные методы жизненного цикла....275

6.3.3. Преобразование методов жизненного цикла в хуки....276

6.4. Вопросы....277

Ответы....278

Итоги....279

Глава 7. Хуки как основа веб-приложений....280

7.1. Компоненты с состоянием....281

7.1.1. Простые значения состояния с useState....282

7.1.2. Создание сложного состояния с useReducer....282

7.1.3. Сохранение значения без повторного рендеринга с использованием useRef....283

7.1.4. Упрощенное многокомпонентное состояние с использованием useContext....288

7.1.5. Низкоприоритетные обновления состояния с использованием useDeferredValue и useTransition....288

7.2. Эффекты компонентов....289

7.3. Оптимизация производительности за счет сокращения количества повторных рендерингов....290

7.3.1. Мемоизация произвольного значения с использованием useMemo....291

7.3.2. Мемоизация функций с использованием useCallback....291

7.3.3. Создание стабильных идентификаторов DOM с использованием useId....291

7.4. Создание сложных библиотек компонентов....291

7.4.1. Создание API компонентов с использованием useImperativeHandle....292

7.4.2. Улучшенная отладка хуков с использованием useDebugValue....292

7.4.3. Синхронизация внешних данных с использованием useSyncExternalStore....293

7.4.4. Выполнение эффекта перед рендерингом с использованием useInsertionEffect....293

7.5. Два ключевых принципа хуков....294

7.6. Вопросы....294

Ответы....295

Итоги....296

Глава 8. Обработка событий в React....297

8.1. Обработка событий DOM в React....299

8.1.1. Базовая обработка событий в React....300

8.2. Обработчики событий....305

8.2.1. Определение обработчиков событий....306

8.2.2. Объекты событий....308

8.2.3. Объекты событий React....309

8.2.4. Длительное хранение объектов синтетических событий....312

8.3. Фазы событий и распространение....315

8.3.1. Как фазы и распространение работают в браузере....319

8.3.2. Обработка фаз событий в React....323

8.3.3. Нетипичное распространение событий....323

8.3.4. Невсплывающие события DOM....324

8.4. Действия по умолчанию и как их избежать....325

8.4.1. Действие события по умолчанию....326

8.4.2. Как избежать выполнения действий по умолчанию....326

8.4.3. Другие события по умолчанию....328

8.5. Общие сведения об объектах событий React ....329

8.6. Функции обработчиков событий из свойств....330

8.7. Генераторы обработчиков событий....333

8.8. Ручное прослушивание событий DOM....334

8.8.1. Прослушивание событий окна и документа....335

8.8.2. Неподдерживаемые события HTML....338

8.8.3. Объединение обработки событий React и DOM....340

8.9. Вопросы....345

Ответы....346

Итоги....346

Глава 9. Работа с формами в React....348

9.1. Управляемый и неуправляемый ввод....350

9.2. Контроль управляемого ввода....351

9.2.1. Фильтрация ввода....354

9.2.2. Ввод с применением маски....357

9.2.3. Ввод множества похожих значений....359

9.2.4. Отправка данных форм....366

9.2.5. Другие виды полей ввода....373

9.2.6. Другие свойства....381

9.3. Контроль неуправляемого ввода....382

9.3.1. Возможности....386

9.3.2. Поля ввода файлов....390

9.4. Вопросы....391

Ответы....392

Итоги....392

Глава 10. Расширенные хуки React для масштабирования....394

10.1. Разрешение компонентам обращаться к значениям ....396

10.1.1. React Context....400

10.1.2. Контекстные состояния....404

10.1.3. Подробнее о React Context....407

10.2. Работа со сложным состоянием....415

10.2.1. Взаимозависимое состояние....417

10.3. Нестандартные хуки....424

10.3.1. Как образуется нестандартный хук?....425

10.3.2. Когда использовать нестандартный хук?....426

10.3.3. Где найти нестандартные хуки?....431

10.4. Вопросы....432

Ответы....433

Итоги....433

Глава 11. Проект: меню сайта....435

11.1. Заготовка меню....438

11.1.1. Выходная разметка HTML....439

11.1.2. Иерархия компонентов....439

11.1.3. Значки....440

11.1.4. CSS....441

11.1.5. Шаблон....442

11.1.6. Исходный код....444

11.1.7. В браузере....445

11.2. Рендеринг статического меню....446

11.2.1. Цель упражнения....446

11.2.2. Выходная разметка HTML....446

11.2.3. Дерево компонентов....447

11.2.4. Исходный код....448

11.2.5. В браузере....449

11.3. Домашнее задание: динамическое меню....450

11.3.1. Цель шага....450

11.3.2. Подсказки для решения....451

11.3.3. Иерархия компонентов....451

11.3.4. Что дальше?....453

11.4. Домашнее задание: получение данных из контекста....453

11.4.1. Цель шага....453

11.4.2. Подсказки для решения....454

11.4.3. Иерархия компонентов....455

11.4.4. Что дальше?....455

11.5. Домашнее задание: дополнительная ссылка....457

11.5.1. Цель шага....457

11.5.2. Подсказки для решения....458

11.5.3. Иерархия компонентов....463

11.5.4. Что дальше?....464

11.6. Несколько слов напоследок....465

Итоги....465

Глава 12. Проект: таймер....466

12.1. Заготовка для таймера....469

12.1.1. Выходная разметка HTML....470

12.1.3. Структура проекта....473

12.1.4. Исходный код....474

12.1.5. Запуск приложения....477

12.2. Добавление простой кнопки запуска/остановки таймера....478

12.2.1. Цель упражнения....478

12.2.2. Иерархия компонентов....479

12.2.3. Обновленная структура проекта....479

12.2.4. Исходный код....481

12.2.5. Запуск приложения....485

12.3. Домашнее задание: инициализация таймера произвольным временем....485

12.4. Домашнее задание: сброс таймеров....486

12.5. Домашнее задание: множественные таймеры....487

Итоги....488

Глава 13. Проект: менеджер задач....489

13.1. Заготовка менеджера задач....493

13.1.1. Иерархия компонентов....493

13.1.2. Структура проекта....493

13.1.3. Исходный код....494

13.1.4. Запуск приложения....496

13.2. Простой список задач....496

13.2.1. Цель упражнения....497

13.2.2. Иерархия компонентов....497

13.2.3. Обновленная структура проекта....498

13.2.4. Исходный код....500

13.2.5. Запуск приложения....506

13.3. Домашнее задание: этапы и прогресс выполнения задач....506

13.4. Домашнее задание: приоритеты....508

13.5. Домашнее задание: перетаскивание....509

13.6. Заключение....510

Итоги....510

React предельно упрощает создание привлекательных и надежных интерфейсов для веб-приложений. Эта великолепная библиотека JavaScript имеет модульную архитектуру, что позволяет легко создавать, объединять и тестировать компоненты. React идеально подходит для небольших прототипов, корпоративных сайтов и других подобных решений.«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.Книга предназначена для разработчиков, имеющих опыт создания веб-приложений на базе JavaScript.