автордың кітабын онлайн тегін оқу React и TypeScript: Практическое руководство. Быстрый старт
Ирина Кириченко

Кітап туралы Пікірлер8 Дәйексөздер101 Қазір оқып жатыр1.2K Сөрелерде Тегін фрагмент

Шрифты предоставлены компанией «ПараТайп»

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

12+

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

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

и других объектов, что делает код более надежным и легко читаемым.

— Улучшенная поддержка IDE

[2]

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

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

— Рефакторинг

[3]

. TypeScript облегчает рефакторинг кода, так как IDE предоставляет инструменты для автоматической замены типов данных при переименовании переменных и изменении интерфейсов. Это ускоряет процесс обслуживания кода.

— Более безопасное состояние и пропсы. TypeScript позволяет строго типизировать состояние и пропсы в компонентах React, что уменьшает вероятность ошибок и облегчает их отслеживание.

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

— Улучшенная работа в команде. Статическая типизация делает код более надежным, что особенно важно в совместной работе над проектами с другими разработчиками.

— Поддержка новых возможностей, таких как ECMAScript

[4]

и React. TypeScript быстро внедряет новые возможности JavaScript и React, что позволяет использовать последние технологические достижения в любом проекте.

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

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

Преимущества использования React по сравнению с другими фреймворками и библиотеками:

— Компонентный подход. React строится на компонентах, что способствует упорядоченности кода и его разбиению на небольшие модули. Таким образом, есть возможность создавать переиспользуемые компоненты, которые упрощают разработку и обслуживание приложения.

— Виртуальная DOM

[5]

(Модель объектов документа). React использует виртуальную DOM, что позволяет эффективно обновлять только те части интерфейса, которые изменились, вместо перерисовки всего дерева DOM. Это повышает производительность приложений.

— Синтаксис JSX

[6]

(JavaScript XML) Синтаксис JSX делает написание компонентов более читаемым и понятным. Он позволяет встраивать HTML-подобный код непосредственно в JavaScript.

— Однонаправленный поток данных

[7]

. React использует однонаправленный поток данных, что делает управление состоянием более прозрачным и предсказуемым.

— Композиция компонентов. Можно легко комбинировать и вкладывать компоненты друг в друга, создавая сложные пользовательские интерфейсы из простых компонентов. Это способствует модульности и переиспользованию кода, позволяя создавать масштабируемые и поддерживаемые приложения.

— Большое сообщество и экосистема. React имеет большое сообщество разработчиков и множество сторонних библиотек и инструментов, что облегчает разработку и расширение функциональности приложений.

— Поддержка серверного рендеринга

[8]

. React позволяет выполнять серверный рендеринг, что улучшает SEO и производительность веб-приложений.

— Гибкость и адаптивность. React не ограничивает разработчика в выборе других технологий и библиотек. Можно интегрировать React в различные стеки разработки.

— Официальные инструменты и документация. React предоставляет широкий спектр официальных инструментов, включая React DevTools

[9]

и Create React App

[10]

, а также отличную документацию, что упрощает начало работы и разработку приложений.

— Компоненты для мобильной разработки. Существует множество библиотек и фреймворков, таких как 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 дает разработчику конкурентное преимущество на рынке труда и способствует созданию приложений, которые удовлетворяют потребности пользователей и заказчиков.

[1]

Пропсы (props) представляют собой механизм, с помощью которого компоненты React могут принимать данные и настраиваться извне.

[2]

IDE (Integrated Development Environment) — программное обеспечение, предназначенное для разработки, отладки и управления кодом при создании программных приложений.

[3]

Рефакторинг (refactoring) — это процесс улучшения структуры и качества кода программы без изменения её внешнего поведения. Основная цель рефакторинга — упростить код, сделать его более понятным, поддерживаемым и расширяемым, устранить дублирование кода и уменьшить технический долг

[4]

ECMAScript (или сокращенно ES) — это стандартный набор правил, по которым описывается язык JavaScript. Он включает в себя синтаксис, типы данных, ключевые слова и другие элементы, необходимые для написания программ на JavaScript.

[5]

DOM — это структурное представление веб-страницы или документа в виде иерархии объектов, которое браузер использует для представления и манипуляции содержимым веб-страницы

[6]

JSX — это специальный синтаксис, используемый в React (и некоторых других библиотеках), который объединяет структуру и стили, а также язык гипертекстовой разметки (HTML) в одном файле.

[7]

однонаправленный поток данных (One-Way Data Flow) — это концепция, которая описывает способ передачи данных и управления состоянием в приложении, предполагая, что данные в приложении двигаются только в одном направлении, обычно от родительских компонентов к дочерним.

[8]

Серверный рендеринг (Server-Side Rendering, SSR) — это метод разработки веб-приложений, при котором генерация HTML-кода для веб-страницы происходит на сервере, а не на стороне клиента (в браузере). Вместо того чтобы браузер загружал пустую HTML-страницу и затем заполнял ее данными и контентом с использованием JavaScript, при SSR сервер отправляет полностью готовую к отображению веб-страницу.

[9]

React DevTools — это расширение для браузера и набор инструментов, предназначенных для отладки и анализа приложений, разработанных с использованием библиотеки React.

[10]

Create React App (CRA) — это инструмент командной строки, который упрощает создание, настройку и развертывание проектов, основанных на React.

Глава 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 в. tsx

[1]

, чтобы использовать синтаксис 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.