скачать книгу бесплатно
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 - Пропсы (props) представляют собой механизм, с помощью которого компоненты React могут принимать данные и настраиваться извне.] и других объектов, что делает код более надежным и легко читаемым.
– Улучшенная поддержка IDE[2 - IDE (Integrated Development Environment) – программное обеспечение, предназначенное для разработки, отладки и управления кодом при создании программных приложений.]. TypeScript хорошо интегрируется с множеством современных интегрированных сред разработки (IDE): Visual Studio Code, WebStorm, Sublime Text, Atom, Eclipse, IntelliJ IDEA, NetBeans. Это обеспечивает доступ к таким функциям разработки, как автодополнение кода, анализ ошибок и подсказки по типам.
– Лучшая документация и понимание кода. Использование TypeScript улучшает самодокументируемость кода. Другие разработчики легче понимают, какие данные ожидаются, и какие функции должны выполняться в компонентах и модулях проекта.
– Рефакторинг[3 - Рефакторинг (refactoring) – это процесс улучшения структуры и качества кода программы без изменения её внешнего поведения. Основная цель рефакторинга – упростить код, сделать его более понятным, поддерживаемым и расширяемым, устранить дублирование кода и уменьшить технический долг]. TypeScript облегчает рефакторинг кода, так как IDE предоставляет инструменты для автоматической замены типов данных при переименовании переменных и изменении интерфейсов. Это ускоряет процесс обслуживания кода.
– Более безопасное состояние и пропсы. TypeScript позволяет строго типизировать состояние и пропсы в компонентах React, что уменьшает вероятность ошибок и облегчает их отслеживание.
– Интеграция со сторонними библиотеками. TypeScript поддерживает определение типов для сторонних библиотек, что позволяет использовать их в проектах и быть уверенными в том, что код будет правильно типизирован.
– Улучшенная работа в команде. Статическая типизация делает код более надежным, что особенно важно в совместной работе над проектами с другими разработчиками.
– Поддержка новых возможностей, таких как ECMAScript[4 - ECMAScript (или сокращенно ES) – это стандартный набор правил, по которым описывается язык JavaScript. Он включает в себя синтаксис, типы данных, ключевые слова и другие элементы, необходимые для написания программ на JavaScript.] и React. TypeScript быстро внедряет новые возможности JavaScript и React, что позволяет использовать последние технологические достижения в любом проекте.
– Совместное использование React и TypeScript может улучшить качество кода, сделать его более надежным и облегчить его поддержку. Это особенно полезно в больших и сложных проектах, где строгость типов и управление состоянием играют важную роль.
React представляет собой библиотеку, которая позволяет разработчикам строить современные интерактивные веб-приложения без перезагрузки страницы. Выпущенный в 2013 году, React стал одним из самых популярных инструментов для фронтенд-разработки. Основная его идея заключается в разделении пользовательского интерфейса на множество маленьких компонентов, каждый из которых может быть разработан и объединен независимо друг от друга. Это подход делает код более модульным и управляемым, а так же обеспечивает быстрое обновление данных на стороне клиента без необходимости перезагрузки страницы.
Преимущества использования React по сравнению с другими фреймворками и библиотеками:
– Компонентный подход. React строится на компонентах, что способствует упорядоченности кода и его разбиению на небольшие модули. Таким образом, есть возможность создавать переиспользуемые компоненты, которые упрощают разработку и обслуживание приложения.
– Виртуальная DOM[5 - DOM – это структурное представление веб-страницы или документа в виде иерархии объектов, которое браузер использует для представления и манипуляции содержимым веб-страницы] (Модель объектов документа). React использует виртуальную DOM, что позволяет эффективно обновлять только те части интерфейса, которые изменились, вместо перерисовки всего дерева DOM. Это повышает производительность приложений.
– Синтаксис JSX[6 - JSX – это специальный синтаксис, используемый в React (и некоторых других библиотеках), который объединяет структуру и стили, а также язык гипертекстовой разметки (HTML) в одном файле.] (JavaScript XML) Синтаксис JSX делает написание компонентов более читаемым и понятным. Он позволяет встраивать HTML-подобный код непосредственно в JavaScript.
– Однонаправленный поток данных[7 - однонаправленный поток данных (One-Way Data Flow) – это концепция, которая описывает способ передачи данных и управления состоянием в приложении, предполагая, что данные в приложении двигаются только в одном направлении, обычно от родительских компонентов к дочерним.]. React использует однонаправленный поток данных, что делает управление состоянием более прозрачным и предсказуемым.
– Композиция компонентов. Можно легко комбинировать и вкладывать компоненты друг в друга, создавая сложные пользовательские интерфейсы из простых компонентов. Это способствует модульности и переиспользованию кода, позволяя создавать масштабируемые и поддерживаемые приложения.
– Большое сообщество и экосистема. React имеет большое сообщество разработчиков и множество сторонних библиотек и инструментов, что облегчает разработку и расширение функциональности приложений.
– Поддержка серверного рендеринга[8 - Серверный рендеринг (Server-Side Rendering, SSR) – это метод разработки веб-приложений, при котором генерация HTML-кода для веб-страницы происходит на сервере, а не на стороне клиента (в браузере). Вместо того чтобы браузер загружал пустую HTML-страницу и затем заполнял ее данными и контентом с использованием JavaScript, при SSR сервер отправляет полностью готовую к отображению веб-страницу.]. React позволяет выполнять серверный рендеринг, что улучшает SEO и производительность веб-приложений.
