React. Быстрый старт (Стефанов Стоян) ; Питер, 2023

Предисловие
Об этой книге
Условные обозначения
Использование примеров кода
Благодарности
От издательства
Глава 1. Hello World
Установка
Hello React World
Так что же сейчас произошло?
Метод ReactcreateElementO
Синтаксис JSX
Установка Babel
Привет, мир JSX
О транспиляции
Далее: настраиваемые компоненты
Глава 2. Жизнь компонента
Настраиваемый функциональный компонент
JSX-версия
Настраиваемый классовый компонент
Какой синтаксис использовать
Свойства
Свойства в функциональных компонентах
Свойства по умолчанию
Состояние
Компонент текстовой области
Компонент textarea, отслеживающий свое
состояние
Немного о DOM-событиях
Обработка событий в прежние времена
Обработка событий в React
Синтаксис обработки событий
Сравнение свойств и состояния
Свойства в исходном состоянии: антипаттерн
Доступ к компоненту извне
Методы управления жизненным циклом
Примеры управления жизненным циклом: тотальная
регистрация
Параноидальная защита состояния
Пример жизненного цикла: применение дочернего
компонента
Выигрыш в производительности: предотвращение
обновлений компонентов
Что случилось с функциональными компонентами
Глава 3. Excel: причудливый компонент таблицы
Начнем с данных
Цикл создания заголовков таблицы
Цикл заголовков таблиц, упрощенная версия
Отладка для избавления от предупреждения в
консоли
Добавление содержимого <td>
Типы свойств
Можете ли вы улучшить компонент
Сортировка
Можете ли вы улучшить компонент
Сортировка подсказок пользовательского
интерфейса
Редактирование данных
Редактируемая ячейка
Поле ввода ячейки
Сохранение
Выводы и определение различий
в виртуальной DOM
Поиск
Состояние и пользовательский интерфейс
Фильтрация содержимого
Обновление метода save()
Как усовершенствовать поиск
Мгновенное воспроизведение
Очистка обработчиков событий
Решение задачи очистки
Как усовершенствовать воспроизведение
Возможна ли альтернативная реализация
Скачивание данных таблицы
Получение данных
Глава 4. Функциональный Excel
Кратко освежим знания: функциональные и
классовые компоненты
Отображение данных
Хук состояния
Сортировка таблицы
Редактирование данных
Поиск
Жизненные циклы в мире хуков
Проблемы с методами жизненного цикла
Хук useEffect()
Устранение побочных эффектов
Безаварийный жизненный цикл
Хук useLayoutEffect()
Пользовательский хук
Завершение воспроизведения
Хук useReducer
Функции редюсера
Действия
Пример редюсера
Модульное тестирование редюсера
Компонент Excel с редюсером
Глава 5. JSX
Несколько инструментов
Пробельные символы в JSX
Комментарии в JSX
Элементы HTML
Anti-XSS
Распространяемые атрибуты
Атрибуты, распространяемые от родительского
компонента к дочернему
Возвращение в JSX нескольких узлов
Оболочка
Фрагмент
Массив
Отличия JSX от HTML
Просто class использовать нельзя, а как насчет for?
Атрибут style - объект
Закрывающие теги
Атрибуты в верблюжьем регистре
Компоненты с пространством имен
JSX и формы
Обработчик события onChange
Сравнение value и defaultValue
Значение компонента <textarea>
Значение компонента <select>
Управляемые и неуправляемые компоненты
Глава 6. Настройки, необходимые для разработки
приложения
Создание React-приложения
Node.js
Привет, CRA
Сборка и развертывание
Были допущены ошибки
Файл package.json и папка node_modules
Рассмотрим код подробнее
Индексы
Модернизированный JavaScript
CSS
Идем дальше
Глава 7. Создание компонентов приложения
Настройка
Приступим к программированию
Рефакторинг компонента Excel
Версия 0.0.1 нового приложения
CSS
Локальное хранилище
Компоненты
Исследование
Логотип и тело
Логотип
Тело
Исследование компонентов
Компонент <button>
Файл Button.js
Пакет classnames
Формы
Компонент <Suggest>
Компонент <Rating>
Компонент <FormInput>
Компонент <Form>
Компонент <Actions>
Диалоги
Компонент <Header>
Конфигурация приложения
<Excel>: новый и усовершенствованный
Общая структура
Отображение
Строгий режим React и редюсеры
Небольшие вспомогательные функции Excel
Глава 8. Готовое приложение
Обновленный App.js
Компонент DataFlow
Тело компонента DataFlow
Работа выполнена
Whinepad v2
Контекст
Следующие шаги
Циклические данные
Предоставление контекста
Потребление контекста
Контекст в заголовке
Контекст в таблице данных
Обновление Discovery
Маршрутизация
Контекст маршрута
Использование URL фильтра
Использование контекста маршрута в заголовке
Использование контекста маршрута в таблице
данных
Хук useCallbackO
Заключение
Об авторе
Иллюстрация на обложке