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