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 (
Привет, это мой первый компонент React!
)
}
export default MyComponent;
Давайте разберемся, что произошло:
– Мы импортировали библиотеку React.
– Создали функциональный компонент MyComponent, который возвращает JSX.
– Вернули JSX, который представляет собой div с заголовком. Несмотря на схожесть с HTML, JSX является спецификацией React, применяемой для создания пользовательского интерфейса.
– Использовали export default, чтобы сделать компонент доступным для импорта в других частях вашего приложения.
3.3 Использование компонента в приложении
Теперь, когда у нас есть компонент, давайте научимся его использовать.
Откройте файл src/App. tsx (не забудьте переименовать js в tsx).
Импортируйте ваш компонент в этот файл:
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
return (
Мое приложение React
);
}
export default App
Теперь ваш компонент 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 ()
reportWebVitals – это функция, предоставляемая Create React App для измерения производительности приложения. Она отправляет данные о производительности на сервер Google Analytics (по умолчанию), что позволяет отслеживать метрики производительности приложения в реальном времени. Эти метрики могут включать в себя время загрузки страницы, время рендеринга компонентов, использование памяти и другие аспекты производительности. Они могут помочь выявить узкие места в приложении и улучшить его производительность. Эта функция не является обязательной и вы можете упустить её в своем приложении. Таким образом, если вы не планируете использовать reportWebVitals для отслеживания производительности, вы можете безопасно удалить соответствующие импорты и вызовы функции из index. js. Это не повлияет на основной функционал вашего приложения.
– это компонент, предоставляемый React, который помогает выявлять потенциальные проблемы в компонентах и их потомках. Он не влияет на продакшен-сборку[12 - Продакшен-сборка (production build) – это версия вашего программного продукта, предназначенная для развертывания и использования в реальной эксплуатационной среде.], но помогает разработчикам рано обнаруживать и исправлять проблемы.
Он может выявить следующие виды проблем:
– Устаревшие методы жизненного цикла. Предупреждает, если ваш компонент использует устаревшие методы жизненного цикла, которые могут быть удалены в будущих версиях React.
– Побочные эффекты при рендеринге. Если код при рендеринге компонента вызывает побочные эффекты (например, изменение состояния, которое влияет на сам компонент), поможет обнаружить такие сценарии.
– Использование несовместимых API. Предупреждает о применении устаревших или несовместимых с версией React API в приложении.
Запись document.getElementById (’root’) as HTMLElement означает, что мы пытаемся получить элемент с идентификатором ’root’ из DOM (Document Object Model) веб-страницы и привести его к типу HTMLElement. Этот код представляет собой так называемый «Type Assertion»[13 - Type Assertion (также известное как Type Casting) – это способ в языке TypeScript явно указать компилятору, какой тип данных должен быть присвоен переменной или выражению. Это позволяет переопределить или уточнить тип данных, который TypeScript выводит автоматически, когда это необходимо.] в TypeScript, который используется для явного указания типа переменной.
При этом:
– document – это объект, представляющий веб-страницу в браузере.
– getElementById (’root’) – это метод объекта document, который пытается найти элемент на веб-странице с указанным идентификатором ’root’.
– as HTMLElement – это TypeScript-синтаксис, который используется для явного указания типа переменной. В данном случае, мы явно указываем, что результат вызова getElementById (’root’) должен быть интерпретирован как объект типа HTMLElement.
Обычно это используется, когда TypeScript не может определить тип элемента автоматически, и мы хотим явно указать, какой тип ожидается. В данном случае, мы ожидаем, что элемент с идентификатором ’root’ является элементом типа HTMLElement.
Пример «App. js»:
import React from «react»
