Полная версия
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 улучшает самодокументируемость кода. Другие разработчики легче понимают, какие данные ожидаются, и какие функции должны выполняться в компонентах и модулях проекта.
– Рефакторинг3. TypeScript облегчает рефакторинг кода, так как IDE предоставляет инструменты для автоматической замены типов данных при переименовании переменных и изменении интерфейсов. Это ускоряет процесс обслуживания кода.
– Более безопасное состояние и пропсы. TypeScript позволяет строго типизировать состояние и пропсы в компонентах React, что уменьшает вероятность ошибок и облегчает их отслеживание.
– Интеграция со сторонними библиотеками. TypeScript поддерживает определение типов для сторонних библиотек, что позволяет использовать их в проектах и быть уверенными в том, что код будет правильно типизирован.
– Улучшенная работа в команде. Статическая типизация делает код более надежным, что особенно важно в совместной работе над проектами с другими разработчиками.
– Поддержка новых возможностей, таких как ECMAScript4 и React. TypeScript быстро внедряет новые возможности JavaScript и React, что позволяет использовать последние технологические достижения в любом проекте.
– Совместное использование React и TypeScript может улучшить качество кода, сделать его более надежным и облегчить его поддержку. Это особенно полезно в больших и сложных проектах, где строгость типов и управление состоянием играют важную роль.
React представляет собой библиотеку, которая позволяет разработчикам строить современные интерактивные веб-приложения без перезагрузки страницы. Выпущенный в 2013 году, React стал одним из самых популярных инструментов для фронтенд-разработки. Основная его идея заключается в разделении пользовательского интерфейса на множество маленьких компонентов, каждый из которых может быть разработан и объединен независимо друг от друга. Это подход делает код более модульным и управляемым, а так же обеспечивает быстрое обновление данных на стороне клиента без необходимости перезагрузки страницы.
Преимущества использования React по сравнению с другими фреймворками и библиотеками:
– Компонентный подход. React строится на компонентах, что способствует упорядоченности кода и его разбиению на небольшие модули. Таким образом, есть возможность создавать переиспользуемые компоненты, которые упрощают разработку и обслуживание приложения.
– Виртуальная DOM5 (Модель объектов документа). React использует виртуальную DOM, что позволяет эффективно обновлять только те части интерфейса, которые изменились, вместо перерисовки всего дерева DOM. Это повышает производительность приложений.
– Синтаксис JSX6 (JavaScript XML) Синтаксис JSX делает написание компонентов более читаемым и понятным. Он позволяет встраивать HTML-подобный код непосредственно в JavaScript.
– Однонаправленный поток данных7. React использует однонаправленный поток данных, что делает управление состоянием более прозрачным и предсказуемым.
– Композиция компонентов. Можно легко комбинировать и вкладывать компоненты друг в друга, создавая сложные пользовательские интерфейсы из простых компонентов. Это способствует модульности и переиспользованию кода, позволяя создавать масштабируемые и поддерживаемые приложения.
– Большое сообщество и экосистема. React имеет большое сообщество разработчиков и множество сторонних библиотек и инструментов, что облегчает разработку и расширение функциональности приложений.
– Поддержка серверного рендеринга8. React позволяет выполнять серверный рендеринг, что улучшает SEO и производительность веб-приложений.
– Гибкость и адаптивность. React не ограничивает разработчика в выборе других технологий и библиотек. Можно интегрировать React в различные стеки разработки.
– Официальные инструменты и документация. React предоставляет широкий спектр официальных инструментов, включая React DevTools9 и Create React App10, а также отличную документацию, что упрощает начало работы и разработку приложений.
– Компоненты для мобильной разработки. Существует множество библиотек и фреймворков, таких как React Native, которые позволяют разрабатывать мобильные приложения с использованием тех же компонентов и навыков React.
В сочетании с TypeScript, React становится еще более мощным инструментом для создания современных веб-приложений с высокой производительностью и надежностью. Эти две технологии дополняют друг друга и позволяют создавать сложные приложения с четкой структурой и надежной типизацией данных.
Преимущества использования React и TypeScript вместе:
– Статическая типизация. TypeScript позволяет выявлять ошибки на этапе разработки, что сокращает количество багов в приложении.
– Интеллектуальное автодополнение. TypeScript предоставляет мощные инструменты автодополнения и подсказок, что упрощает работу с большими кодовыми базами.
– Большое сообщество и экосистема. React и TypeScript оба имеют активные сообщества и множество библиотек, что упрощает разработку и поддержку проектов.
– Изучение React и TypeScript предоставляет разработчикам целый набор навыков и инструментов для создания современных веб-приложений. Независимо от того, являетесь ли вы начинающим разработчиком или опытным специалистом, знание этих технологий открывает перед вами широкие перспективы.
– Работа в крупных компаниях. Множество крупных компаний используют React и TypeScript для разработки своих продуктов, и знание этих технологий делает вас более востребованным на рынке труда.
– Создание собственных проектов. React и TypeScript позволяют вам реализовать свои идеи и создать собственные веб-приложения.
– Улучшение качества кода. Статическая типизация и компонентный подход React помогут вам создавать более надежные и легко поддерживаемые приложения.
– Обучение и обмен опытом. Знание React и TypeScript открывает двери для обучения других и обмена опытом в сообществе разработчиков.
Заключение
React и TypeScript предоставляют возможность создавать веб-приложения, которые обладают не только красивыми и интуитивно понятными интерфейсами, но и высокой степенью надежности. Они позволяют разработчикам создавать гибкие и модульные приложения, что делает их код более поддерживаемым и масштабируемым.
Сочетание React и TypeScript позволяет создавать приложения, которые могут быть успешно применены в самых разных областях, от разработки веб-сайтов и онлайн-магазинов до масштабных корпоративных систем. Благодаря своей активной и поддерживаемой сообществом экосистеме, React и TypeScript остаются на переднем крае веб-технологий, гарантируя, что разработчики будут всегда в курсе последних тенденций и методов.
Приобретение навыков React и TypeScript дает разработчику конкурентное преимущество на рынке труда и способствует созданию приложений, которые удовлетворяют потребности пользователей и заказчиков.
Глава 2. Установка и настройка окружения разработки
Прежде чем начать разрабатывать приложения с использованием React и TypeScript, вам потребуется настроить ваше рабочее окружение. В этой главе рассмотрим шаги установки и настройки необходимых инструментов и библиотек для разработки веб-приложений.
2.1 Установка Node. js и npm
Node. js – это среда выполнения JavaScript, которая позволяет выполнять JavaScript на стороне сервера. Она также включает в себя пакетный менеджер npm (Node Package Manager), который используется для установки и управления сторонними пакетами и зависимостями проекта. При установке Node. js в комплекте с ним автоматически устанавливается и npm (Node Package Manager).
Шаги для установки Node. js и npm:
– Перейдите на официальный сайт Node. js (https://nodejs.org/) и загрузите установщик для вашей операционной системы (Windows, macOS, Linux).
– Запустите установщик и следуйте инструкциям на экране.
– После завершения установки, откройте терминал (командную строку) и выполните команду node -v, чтобы проверить версию Node. js, и npm -v, чтобы проверить версию npm. Если обе команды вернули версии, значит, установка прошла успешно.
– Добавьте полный путь к исполняемому файлу Node. js в переменную PATH вашей системы.
2.2 Настройка редактора кода
Для комфортной разработки с React и TypeScript, наилучшим выбором будет использование редактора кода, поддерживающего TypeScript. В этой книге мы будем использовать бесплатный редактор кода – Visual Studio Code, и все примеры будут представлены именно в нем.
Установите его, если у вас его еще нет, скачав с официального сайта.
Затем установите следующие его расширения:
– ESLint: Для проверки и форматирования кода.
– Prettier: Для автоматического форматирования кода.
– Reactjs code snippets: Для быстрого создания React-компонентов.
– Auto Complete Tag: Для автозакрытия HTML/XML тегов в процессе набора кода.
– Code Runner: Позволяет запускать код (в том числе, скрипты) прямо из редактора без переключения в терминал.
Для установки расширений откройте Visual Studio Code. Перейдите во вкладку «Extensions» (или нажмите Ctrl+Shift+X). В поисковой строке введите название и найдите соответствующий плагин. Нажмите кнопку «Install» (Установить) рядом с расширением.
После установки, убедитесь, что установленные вами плагины активированы.
2.3 Создание проекта с использованием Create React App
Create React App – это инструмент, который позволяет быстро создать новый проект React с предустановленной конфигурацией и набором инструментов для разработки. Это отличное решение, как для начинающих, так и для опытных разработчиков, позволяя сэкономить время и значительно упростить рабочий процесс.
Удобство использования Create React App:
– Быстрый старт. Разработка нового приложения на React занимает всего несколько минут. CRA создает стандартную структуру проекта и настраивает сборку.
– Готовая конфигурация. CRA предоставляет настройку для Webpack, Babel и других инструментов, сэкономив ваше время на ручной настройке.
– Автоматическое обновление зависимостей. CRA следит за обновлениями зависимостей и предупреждает о несовместимостях. Это позволяет легко поддерживать приложение в актуальном состоянии.
– Простое развертывание. CRA предоставляет средства для удобного развертывания приложения на различных хостинг-платформах.
– Простой интерфейс командной строки: CRA предоставляет команды, такие как npm start для разработки и npm build для создания оптимизированной версии приложения.
Таким образом, Create React App облегчает начало работы с проектами на React и позволяет разработчикам сосредотачиваться на написании кода и создании приложения, не тратя много времени на конфигурацию инструментов.
Для создания проекта с использованием Create React App выполните следующие шаги:
– Откройте терминал в вашем редакторе кода и выполните следующую команду для установки Create React App глобально на вашем компьютере:
npm install -g create-react-app
– Создайте новый проект React, заменяя my-app на имя вашего проекта:
npx create-react-app my-app
Эта команда создаст новую директорию my-app с начальной структурой проекта.
– Перейдите в директорию проекта:
cd my-app
– Запустите разработческий сервер:
npm start
Это запустит сервер разработки и откроет ваше приложение в браузере.
2.4 Установка TypeScript
Теперь, когда у вас есть проект React, созданный с помощью Create React App, вы можете добавить поддержку TypeScript.
Шаги для установки TypeScript в проект:
– Остановите разработческий сервер, если он запущен, нажав Ctrl + C в терминале.
– Выполните следующую команду для установки TypeScript и связанных инструментов:
npm install – save typescript @types/node @types/react @types/react-dom @types/jest
– Переименуйте файлы в вашем проекте с расширением. js в. tsx11, чтобы использовать синтаксис TypeScript.
Теперь вы можете продолжить разработку вашего приложения с поддержкой TypeScript.
Примечание: Создать приложение на React и Typescript можно сразу, задав команду: npx create-react-app – template typescript my-app
2.5 Заключение
Настройка разработочного окружения для React и TypeScript представляет собой важный первый этап при создании веб-приложений. Этот процесс включает в себя установку Node. js и npm, а также использование инструмента Create React App, который делает разработку более удобной и эффективной. Node. js обеспечивает среду выполнения JavaScript на сервере, а npm – управление пакетами, необходимыми для проекта. Кроме того, настройка TypeScript добавляет строгую типизацию, способствуя предсказуемости и надежности кода. Это особенно важно при работе с крупными и сложными проектами.
После завершения этой начальной конфигурации вы будете готовы приступить к созданию компонентов и приложений с использованием React и TypeScript. Эта начальная конфигурация обеспечивает вам устойчивую основу для разработки.
В следующих главах мы подробно рассмотрим техники создания мощных веб-приложений в стеке React и TypeScript.
Глава 3. Понятие компонента в React
После установки и настройки окружения разработки для React и TypeScript, давайте начнем создавать свой первый компонент в React. В этой главе мы рассмотрим базовые шаги по созданию и отображению компонента.
3.1 Понятие компонента в React
В React, компонент – это основная строительная единица пользовательского интерфейса. Он представляет собой независимую и переиспользуемую часть интерфейса, которая может содержать в себе как структуру (HTML-элементы), так и логику.
Компоненты в React могут быть разделены на два типа:
– Функциональные компоненты: Это функции, которые принимают входные данные (props) и возвращают JSX, определяющий структуру компонента.
– Классовые компоненты: Это классы, которые наследуются от React.Component и могут содержать состояние (state) и методы жизненного цикла.
Выбор между классовыми и функциональными компонентами в React зависит от конкретных требований проекта и предпочтений разработчика. Однако, начиная с версии React 16.8, появились хуки (например, useState), которые обеспечивают функциональным компонентам возможности, ранее доступные только классовым компонентам.
Функциональные компоненты с хуками обычно имеют несколько преимуществ:
– Краткость кода. Функциональные компоненты с использованием хуков обычно более компактны и могут быть проще для понимания.
– Читаемость. Хуки обеспечивают локальное состояние и другие возможности функциональным компонентам, что делает код более декларативным и легко читаемым.
– Проще тестирование. Функциональные компоненты обычно более просты в тестировании. Вы можете тестировать их, используя библиотеки тестирования, такие как Jest, без создания экземпляра класса.
Однако, есть сценарии, в которых классовые компоненты могут быть предпочтительными:
– Жизненный цикл компонентов. Если вам нужен доступ к методам жизненного цикла (например, componentDidMount, componentDidUpdate), то классовые компоненты могут быть более подходящим выбором.
– Классовые свойства. В классовых компонентах вы можете использовать классовые свойства для хранения данных без необходимости использования this.setState.
– Интеграция с библиотеками. Некоторые сторонние библиотеки и устаревший код могут предпочитать использование классовых компонентов.
В конечном итоге, выбор между классовыми и функциональными компонентами зависит от вашего стиля кодирования, требований проекта и командных предпочтений. В современных проектах, особенно если вы начинаете новый проект или обновляете старый, функциональные компоненты с хуками обычно являются более современным и предпочтительным вариантом.
3.2 Создание функционального компонента
Давайте создадим простой функциональный компонент в React.
– В вашем проекте React откройте папку src.
– Внутри папки src создайте новый файл с расширением. tsx (например, MyComponent. tsx).
– Откройте созданный файл в вашем редакторе кода.
– Напишите следующий код, чтобы создать простой функциональный компонент:
import React from ’react’function MyComponent () { return (Привет, это мой первый компонент React!
3.3 Использование компонента в приложении
Теперь, когда у нас есть компонент, давайте научимся его использовать.
Откройте файл src/App. tsx (не забудьте переименовать js в tsx).
Импортируйте ваш компонент в этот файл:
import React from ’react’import MyComponent from». /MyComponent’function App () { return (Мое приложение React
<MyComponent />Теперь ваш компонент MyComponent будет отображаться внутри компонента App.
Примечание 1:
Вместо обычной функции допустимо использовать стрелочную.
Примечание 2:
В новой версии React (с версии 17.0.0) в большинстве случаев не требуется явно импортировать React из библиотеки react. Это связано с тем, что в новой версии компилятор Babel встраивает необходимые вызовы React автоматически в JSX без явного импорта. Однако если у вас есть компоненты, в которых используется состояние или классовый подход, то вам всё так же необходимо импортировать React в файл. Для удобства в этой книге мы всегда будем прописывать строку импорта.
– Прописываем index. js и App. js
«index. js» и «App. js» – это пользовательские компоненты, созданные для React-приложения. Это два важных компонента, которые играют разные роли:
– index. js (или index. tsx). Это точка входа в React-приложение. Этот файл обычно является стартовой точкой, с которой начинается выполнение приложения. Он отвечает за инициализацию React и рендеринг корневого компонента приложения в HTML-элементе на веб-странице. В этом файле используется функция ReactDOM.render для монтирования приложения в DOM.
– App. js (или App. tsx) – это корневой компонент React-приложения. Он представляет собой основу приложения, внутри которого определяется его структура и логика. Обычно компонент «App» содержит маршрутизацию (если это не одностраничное приложение), заголовок, меню и контейнер для других компонентов, формирующих страницу.
– Пример index. js:
import React from ’react’import ReactDOM from ’react-dom/client’import». /index. css’import App from». /App’import reportWebVitals from». /reportWebVitals’const root = ReactDOM.createRoot(document.getElementById (’root’) as HTMLElement)root.render (reportWebVitals – это функция, предоставляемая Create React App для измерения производительности приложения. Она отправляет данные о производительности на сервер Google Analytics (по умолчанию), что позволяет отслеживать метрики производительности приложения в реальном времени. Эти метрики могут включать в себя время загрузки страницы, время рендеринга компонентов, использование памяти и другие аспекты производительности. Они могут помочь выявить узкие места в приложении и улучшить его производительность. Эта функция не является обязательной и вы можете упустить её в своем приложении. Таким образом, если вы не планируете использовать reportWebVitals для отслеживания производительности, вы можете безопасно удалить соответствующие импорты и вызовы функции из index. js. Это не повлияет на основной функционал вашего приложения.
