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

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[11 - .tsx обозначает файлы, содержащие код на языке TypeScript с использованием синтаксиса JSX.], чтобы использовать синтаксис 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 (
<div>
<h1> Привет, это мой первый компонент React! </h1>
</div>
)
}
export default MyComponent;
Давайте разберемся, что произошло:
– Мы импортировали библиотеку React.
– Создали функциональный компонент MyComponent, который возвращает JSX.
– Вернули JSX, который представляет собой div с заголовком. Несмотря на схожесть с HTML, JSX является спецификацией React, применяемой для создания пользовательского интерфейса.