быть воспроизведена, передана в какой-либо форме или любыми средствами, электронными или механическими, включая фотокопирование, запись или любые другие системы хранения и передачи информации, без предварительного письменного разрешения владельца авторских прав.
Это руководство предназначено для тех, кто желает освоить создание веб-приложений, используя такие современные инструменты, как 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: Проекты и практика
Часть 1. Основы React и TypeScript
Глава 1. Введение в React и TypeScript
В мире веб-разработки существует множество разнообразных инструментов и технологий, React и TypeScript выделяются среди них как наиболее популярные и востребованные.
TypeScript – это язык программирования, который расширяет язык JavaScript, добавляя статическую типизацию. Это позволяет определять типы данных для переменных, параметров функций и других объектов в коде, добавляя статическую типизацию. Эта статическая типизация делает код более надежным и облегчает