React и TypeScript: Практическое руководство. Быстрый старт

Ирина Кириченко

Это руководство предназначено для тех, кто желает освоить создание веб-приложений, используя такие современные инструменты, как React и TypeScript. Оно предлагает последовательный путь в освоении этих технологий – от начальных концепций до более глубоких аспектов. Независимо от вашего уровня подготовки, предлагаются практические примеры и полезные советы, чтобы сделать ваши знания еще более глубокими и применимыми.

© Ирина Кириченко, 2023

ISBN 978-5-0060-9759-9

Создано в интеллектуальной издательской системе Ridero

Все права защищены. Никакая часть этой книги не может быть воспроизведена, передана в какой-либо форме или любыми средствами, электронными или механическими, включая фотокопирование, запись или любые другие системы хранения и передачи информации, без предварительного письменного разрешения владельца авторских прав.

Это руководство предназначено для тех, кто желает освоить создание веб-приложений, используя такие современные инструменты, как React и TypeScript. Оно предлагает последовательный путь в освоении этих технологий — от начальных концепций до более глубоких аспектов. Независимо от вашего уровня подготовки, предлагаются практические примеры и полезные советы, чтобы сделать ваши знания еще более глубокими и применимыми.

Предполагается, что читатель уже обладает базовыми знаниями в JavaScript, HTML и CSS. Если вы новичок в этих технологиях, рекомендуется ознакомиться с их основами перед началом чтения.

Содержание

Часть 1: Основы React и TypeScript

— Введение в React и TypeScript 1

— Установка и настройка окружения разработки 6

— Понятие компонента в React 10

— JSX и его синтаксис 20

— Работа с компонентами и их вложенность 25

— Основы использования props и state 32

— Методы жизненного цикла компонентов 40

— Автоматическое создание объектов props в React 43

— Дополнительная информация:

Расширения файлов в React:.js,.jsx,.tsx 50

Обзор популярных React Hooks 51

Часть 2: Работа с формами и событиями

— Обработка событий в React 52

— Работа с формами и контролируемые компоненты 57

— Валидация ввода данных 61

— Управление состоянием и обновление компонентов 65

— Дополнительная информация:

Babel 71

Часть 3: Работа с данными и запросами

— Работа с API и запросы к серверу 72

— Обработка ответов и обновление состояния компонентов 78

— Асинхронное программирование 82

— Использование библиотек для упрощения работы с данными 91

— Дополнительная информация:

Методы HTTP «POST» и «GET» 99

JSON формат 101

Часть 4: Роутинг и навигация

— Введение в роутинг в React (React Router) 102

— Создание многoстраничных приложений 105

— Динамическая навигация 110

— Дополнительная информация:

Метод map () в JavaScript 120

Метод reduce () в JavaScript 121

Часть 5: TypeScript в React

— Введение в TypeScript: Основные концепции и типы данных 122

— Добавление TypeScript в проект React 127

— Введение в основные концепции TypeScript:

Type, Interface и Generics 129

— Модули и пространства имен в TypeScript 134

— Дополнительная информация:

Области видимости в TypeScript 138

Часть 6: Углубленная типизация в React с TypeScript

— Декораторы в TypeScript 140

— Аннотации типов для компонентов и функций 143

— Типизация props и state компонентов 146

— Работа с событиями и обработчиками событий 150

— Использование дженериков (generics) в React 153

— Дополнительная информация:

Файлы с расширением. d. ts 157

Часть 7: Продвинутые темы

— Контекст и передача данных между компонентами 159

— Redux и управление глобальным состоянием 164

— Асинхронные операции с Redux Thunk 170

— Рефакторинг и лучшие практики 175

— Дополнительная информация:

Функция fetch 177

Часть 8: Тестирование и развертывание

— Тестирование компонентов

с использованием Jest и React Testing Library 178

— Автоматизация сборки и развертывания

с помощью инструментов, таких как Webpack и Babel 182

— Дополнительная информация:

Полезные библиотеки для стилизации React-приложений 185

Часть 9: Проекты и практика