React быстро. Веб-приложения на React, JSX, Redux и GraphQL

Description

Вступление Предисловие Благодарности О книге Структура книги Для кого написана эта книга? (Обязательно прочитайте!) Кому эта книга не подойдет (Тоже прочитайте!) Как использовать эту книгу Исходный код Об авторе Об обложке Часть IОсновы React Глава 1. Знакомство с React 1.1. Что такое React? 1.2. Проблема, которую решает React 1.3. Преимущества React 1.3.1. Простота 1.3.2. Скорость и удобство тестирования 1.3.3. Экосистема и сообщество 1.4. Недостатки React 1.5. Как React интегрируется в веб-приложение 1.5.1. Библиотеки React и объекты рендеринга 1.5.2. Одностраничные приложения и React 1.5.3. Стек React 1.6. Первый код React: Hello World 1.7. Вопросы 1.8. Итоги 1.9. Ответы Глава 2. Первые шаги с React 2.1. Вложение элементов 2.2. Создание классов компонентов 2.3. Работа со свойствами 2.4. Вопросы 2.5. Итоги 2.6. Ответы Глава 3. Знакомство с JSX 3.1. Что такое JSX и чем он хорош? 3.2. Логика JSX 3.2.1. Создание элементов с JSX 3.2.2. Работа с JSX в компонентах 3.2.3. Вывод переменных в JSX 3.2.4. Работа со свойствами в JSX 3.2.5. Создание методов компонентов React 3.2.6. if/else в JSX 3.2.7. Комментарии в JSX 3.3. Настройка транспилятора JSX с Babel 3.4. Потенциальные проблемы React и JSX 3.4.1. Специальные символы 3.4.2. Атрибуты data- 3.4.3. Атрибут style 3.4.4. class и for 3.4.5. Значения логических атрибутов 3.5. Вопросы 3.6. Итоги 3.7. Ответы Глава 4. Состояния и их роль в интерактивной природе React 4.1. Что такое состояние компонента React? 4.2. Работа с состояниями 4.2.1. Обращение к состояниям 4.2.2. Назначение исходного состояния 4.2.3. Обновление состояния 4.3. Состояния и свойства 4.4. Компоненты без состояния 4.5. Компоненты с состоянием и без состояния 4.6. Вопросы 4.7. Итоги 4.8. Ответы Глава 5. События жизненного цикла компонентов React 5.1. Общие сведения о событиях жизненного цикла компонентов React 5.2. Категории событий 5.3. Реализация события 5.4. Сразу все действия 5.5. События подключения 5.5.1. componentWillMount() 5.5.2. componentDidMount() 5.6. События обновления 5.6.1. componentWillReceiveProps(newProps) 5.6.2. shouldComponentUpdate() 5.6.3. componentWillUpdate() 5.6.4. componentDidUpdate() 5.7. События отключения 5.7.1. componentWillUnmount() 5.8. Простой пример 5.9. Вопросы 5.10. Итоги 5.11. Ответы Глава 6. Обработка событий в React 6.1. Работа с событиями DOM в React 6.1.1. Фазы спуска и подъема 6.1.2. События React во внутренней реализации 6.1.3. Работа с объектами события React SyntheticEvent 6.1.4. Использование событий и состояния 6.1.5. Передача обработчиков событий как свойств 6.1.6. Передача данных между компонентами 6.2. Реакция на события DOM, не поддерживаемые React 6.3. Интеграция React с другими библиотеками: UI-события jQuery 6.3.1. Интеграция кнопок 6.3.2. Интеграция надписей 6.4. Вопросы 6.5 Итоги 6.6. Ответы Глава 7. Работа с формами в React 7.1. Рекомендуемый способ работы с формами в React 7.1.1. Определение формы и ее событий в React 7.1.2. Определение элементов форм 7.1.3. Отслеживание изменений в формах 7.1.4. Поле для банковского счета 7.2. Альтернативные способы работы с формами 7.2.1. Неуправляемые элементы с отслеживанием изменений 7.2.2. Неуправляемые элементы без отслеживания изменений 7.2.3. Использование ссылок для обращения к переменным 7.2.4. Значения по умолчанию 7.3. Вопросы 7.4. Итоги 7.5. Ответы Глава 8. Масштабируемость компонентов React 8.1. Свойства по умолчанию в компонентах 8.2. Типы свойств React и проверка данных 8.3. Рендеринг дочерних элементов 8.4. Создание компонентов более высокого порядка React для повторного использования кода 8.4.1. Использование displayName: как отличить дочерние компоненты от родителя 8.4.2. Использование оператора расширения: передача всех атрибутов 8.4.3. Использование компонентов высшего порядка 8.5. Презентационные и контейнерные компоненты 8.6. Вопросы 8.7. Итоги 8.8. Ответы Глава 9. Компонент меню 9.1. Структура проекта и инициализация 9.2. Построение меню без JSX 9.2.1. Компонент Menu 9.2.2. Компонент Link 9.2.3. Запуск 9.3. Построение меню в JSX 9.3.1. Переработка компонента Menu 9.3.2. Переработка компонента Link 9.3.3. Запуск проекта JSX 9.4. Домашнее задание 9.5. Итоги Глава 10. Компонент Tooltip 10.1. Структура проекта и инициализация 10.2. Компонент Tooltip 10.2.1. Функция toggle() 10.2.2. Функция render() 10.3. Запуск 10.4. Домашнее задание 10.5. Итоги Глава 11. Компонент Timer 11.1. Структура проекта и инициализация 11.2. Архитектура приложения 11.3. Компонент TimerWrapper 11.4. Компонент Timer 11.5. Компонент Button 11.6. Запуск таймера 11.7. Домашнее задание 11.8. Итоги Часть 2. Архитектура React Глава 12. Система сборки Webpack 12.1. Что делает Webpack? 12.2. Включение Webpack в проект 12.2.1. Установка системы Webpack и ее зависимостей 12.2.2. Настройка Webpack 12.3. Модуляризация кода 12.4. Запуск Webpack и тестирование сборки 12.5. Оперативная замена модулей 12.5.1. Настройка HMR 12.5.2. Оперативная замена модулей в действии 12.6. Вопросы 12.7. Итоги 12.8. Ответы Глава 13. Маршрутизация в React 13.1. Реализация маршрутизации «с нуля» 13.1.1. Создание проекта 13.1.2. Создание мэппинга маршрутов в файле app.jsx 13.1.3. Создание компонента Router в router.jsx 13.2. React Router 13.2.1. Стиль JSX в React Router 13.2.2. История идентификатора фрагмента 13.2.3. История браузера 13.2.4. Настройка React Router для разработки с Webpack 13.2.5. Создание макетного компонента 13.3. Функциональность React Router 13.3.1. Обращение к маршрутизатору с использованием компонента высшего порядка withRouter 13.3.2. Навигация на программном уровне 13.3.3. Параметры URL и другие данные маршрутов 13.3.4. Передача свойств в Router 13.4. Маршрутизация с использованием Backbone 13.5. Вопросы 13.6. Итоги 13.7. Ответы Глава 14. Работа с данными с использованием Redux 14.1. Поддержка однонаправленной передачи данных в React 14.2. Архитектура данных Flux 14.3. Использование библиотеки данных Redux 14.3.1. Клон Netflix на базе Redux 14.3.2. Зависимости и конфигурации 14.3.3. Включение Redux 14.3.4. Маршруты 14.3.5. Объединение редьюсеров 14.3.6. Редьюсер для movies 14.3.7. Действия 14.3.8. Создатели действий 14.3.9. Установление связи компонентов с хранилищем 14.3.10. Передача действий 14.3.11. Передача создателей действий в свойствах компонентов 14.3.12. Выполнение клона Netflix 14.3.13. Redux: заключение 14.4. Вопросы 14.5. Итоги 14.6. Ответы Глава 15. Работа с данными в GraphQL 15.1. GraphQL 15.2. Добавление сервера к клону Netflix 15.2.1. Установка GraphQL на сервере 15.2.2. Структура данных 15.2.3. Схема GraphQL 15.2.4. Запросы к API и сохранение ответа в хранилище 15.2.5. Вывод списка фильмов 15.2.6. GraphQL: заключение 15.3. Вопросы 15.4. Итоги 15.5. Вопросы Глава 16. Модульное тестирование кода React c Jest 16.1. Разновидности тестирования 16.2. Почему именно Jest? 16.3. Модульное тестирование с Jest 16.3.1. Написание модульных тестов в Jest 16.3.2. Тестовые утверждения Jest 16.4.1. Поиск элементов с TestUtils 16.4.2. UI-тестирование виджета для генерирования паролей 16.4.3. Неглубокий рендеринг 16.4. UI-тестирование React с использованием Jest и TestUtils 16.5. TestUtils: заключение 16.6. Вопросы 16.7. Итоги 16.8. Ответы Глава 17. Использование React с Node и универсальный JavaScript 17.1. Зачем нужен React на сервере? И что такое универсальный JavaScript? 17.1.1. Корректное индексирование страниц 17.1.2. Повышение быстродействия с ускорением загрузки 17.1.3 Упрощенное сопровождение кода 17.1.4. Универсальный JavaScript с React и Node 17.2. React с Node 17.3. React и Express: генерирование кода из компонентов на стороне сервера 17.3.1. Рендеринг простого текста на стороне сервера 17.3.2. Рендеринг страницы HTML 17.4. Универсальный JavaScript с Express и React 17.4.1. Структура и конфигурация проекта 17.4.2. Настройка сервера 17.4.3. Структурные шаблоны на стороне сервера с использованием Handlebars 17.4.4. Формирование компонентов React на сервере 17.4.5. Клиентский код React 17.4.6. Настройка Webpack 17.4.7. Запуск приложения 17.5. Вопросы 17.6. Итоги 17.7. Ответы Глава 18. Проект: создание книжного магазина с React Router 18.1. Структура проекта и конфигурация Webpack 18.2. Основной файл HTML 18.3. Создание компонентов 18.3.1 Главный файл: app.jsx 18.3.2. Компонент Cart 18.3.3. Компонент Checkout 18.3.4. Компонент Modal 18.3.5. Компонент Product 18.4. Запуск проекта 18.5. Домашнее задание 18.6. Итоги Глава 19. Проект: проверка паролей с Jest 19.1. Структура проекта и конфигурация Webpack 19.2. Основной файл HTML 19.3. Реализация модуля надежного пароля 19.3.1. Тесты 19.3.2. Код 19.4. Реализация компонента Password 19.4.1. Тесты 19.4.2. Код 19.5. Виджет в действии 19.6. Домашнее задание 19.7. Итоги Глава 20. Проект: реализация автозаполнения с Jest, Express и MongoDB 20.1. Структура проекта и конфигурация Webpack 20.2. Реализация веб-сервера 20.2.1. Определение REST-совместимых API 20.2.2. Рендеринг React на сервере 20.3. Добавление браузерного сценария 20.4. Создание серверного шаблона 20.5. Реализация компонента Autocomplete 20.5.1. Тесты для Autocomplete 20.5.2. Код компонента Autocomplete 20.6. Все вместе 20.7. Домашнее задание 20.8. Итоги Приложения Приложение А. Установка приложений Установка React Установка Node.js Установка Express Установка Bootstrap Установка Browserify Установка MongoDB Использование Babel для компиляции JSX и ES6 Node.js и ES6 Автономный браузер Babel Приложение Б. Шпаргалки по React Установка React React DOM Рендеринг ES5 ES5+JSX Рендеринг на стороне сервера Компоненты ES5 ES5 + JSX ES6 + JSX Расширенные возможности компонентов Варианты (ES5) ES5 ES5 + JSX ES6 + JSX События жизненного цикла Специальные свойства propTypes Свойства и методы компонентов Дополнения React Компоненты React Приложение В. Краткая сводка Express.js Установка Express.js Генератор Основы Маршруты и команды HTTP Запросы Сокращенные обозначения заголовков Ответ Сигнатуры обработчиков Stylus и Jade Тело Статические файлы Подсоединение промежуточных модулей Другие популярные промежуточные модули Ресурсы Приложение Г. Шпаргалка по MongoDB и Mongoose MongoDB Консоль MongoDB Установка Mongoose Простейший вариант использования Mongoose Схема Mongoose Пример Mongoose с использованием CRUD (Create/Read/Update/Delete) Методы модели Mongoose Методы документов Mongoose Приложение Д. ES6 для успеха Параметры по умолчанию Шаблонные литералы Многострочные строки Деструктурирующее присваивание Расширенные объектные литералы «Стрелочные» функции Обещания Конструкции с блочной областью видимости: let и const Классы Модули Использование ES6 с Babel Другие возможности ES6