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

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

Это руководство предназначено для тех, кто желает освоить создание веб-приложений, используя такие современные инструменты, как 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: Проекты и практика

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

Глава 1. Введение в React и TypeScript

В мире веб-разработки существует множество разнообразных инструментов и технологий, React и TypeScript выделяются среди них как наиболее популярные и востребованные.

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

Преимущества использования TypeScript включают:

– Статическая типизация. TypeScript добавляет статическую типизацию к JavaScript, что позволяет обнаруживать и предотвращать множество ошибок на этапе разработки. Это особенно полезно в больших проектах, где сложно отслеживать типы данных и гарантировать их правильность. С помощью TypeScript можно определить типы данных для компонентов, состояния, пропсов1 и других объектов, что делает код более надежным и легко читаемым.

– Улучшенная поддержка IDE2. TypeScript хорошо интегрируется с множеством современных интегрированных сред разработки (IDE): Visual Studio Code, WebStorm, Sublime Text, Atom, Eclipse, IntelliJ IDEA, NetBeans. Это обеспечивает доступ к таким функциям разработки, как автодополнение кода, анализ ошибок и подсказки по типам.

– Лучшая документация и понимание кода. Использование TypeScript улучшает самодокументируемость кода. Другие разработчики легче понимают, какие данные ожидаются, и какие функции должны выполняться в компонентах и модулях проекта.



Вам будет интересно