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

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, применяемой для создания пользовательского интерфейса.
– Использовали export default, чтобы сделать компонент доступным для импорта в других частях вашего приложения.
 

3.3 Использование компонента в приложении

Теперь, когда у нас есть компонент, давайте научимся его использовать.

Откройте файл src/App. tsx (не забудьте переименовать js в tsx).

Импортируйте ваш компонент в этот файл:

 
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
  return (
    <div>
      <h1> Мое приложение React </h1>
      <MyComponent />
    </div>
);
}
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 (
<React.StrictMode>
    <App />
</React.StrictMode>
);
reportWebVitals ()
 

reportWebVitals – это функция, предоставляемая Create React App для измерения производительности приложения. Она отправляет данные о производительности на сервер Google Analytics (по умолчанию), что позволяет отслеживать метрики производительности приложения в реальном времени. Эти метрики могут включать в себя время загрузки страницы, время рендеринга компонентов, использование памяти и другие аспекты производительности. Они могут помочь выявить узкие места в приложении и улучшить его производительность. Эта функция не является обязательной и вы можете упустить её в своем приложении. Таким образом, если вы не планируете использовать reportWebVitals для отслеживания производительности, вы можете безопасно удалить соответствующие импорты и вызовы функции из index. js. Это не повлияет на основной функционал вашего приложения.

<React.StrictMode> – это компонент, предоставляемый React, который помогает выявлять потенциальные проблемы в компонентах и их потомках. Он не влияет на продакшен-сборку¹², но помогает разработчикам рано обнаруживать и исправлять проблемы.

Он может выявить следующие виды проблем:

– Устаревшие методы жизненного цикла. Предупреждает, если ваш компонент использует устаревшие методы жизненного цикла, которые могут быть удалены в будущих версиях React.

– Побочные эффекты при рендеринге. Если код при рендеринге компонента вызывает побочные эффекты (например, изменение состояния, которое влияет на сам компонент), <React.StrictMode> поможет обнаружить такие сценарии.

– Использование несовместимых API. Предупреждает о применении устаревших или несовместимых с версией React API в приложении.

Запись document.getElementById (’root’) as HTMLElement означает, что мы пытаемся получить элемент с идентификатором ’root’ из DOM (Document Object Model) веб-страницы и привести его к типу HTMLElement. Этот код представляет собой так называемый «Type Assertion»¹³ в TypeScript, который используется для явного указания типа переменной.

При этом:

– document – это объект, представляющий веб-страницу в браузере.

– getElementById (’root’) – это метод объекта document, который пытается найти элемент на веб-странице с указанным идентификатором ’root’.

– as HTMLElement – это TypeScript-синтаксис, который используется для явного указания типа переменной. В данном случае, мы явно указываем, что результат вызова getElementById (’root’) должен быть интерпретирован как объект типа HTMLElement.

Обычно это используется, когда TypeScript не может определить тип элемента автоматически, и мы хотим явно указать, какой тип ожидается. В данном случае, мы ожидаем, что элемент с идентификатором ’root’ является элементом типа HTMLElement.

Пример «App. js»:

 
import React from «react»
import». /App. css»
 
 
function App () {
  return (
    <div className=«App»>
      <header>
        <h1> Мое React-приложение </h1>
      </header>
      <main>
        {/* Здесь может быть контент вашего приложения */}
      </main>
    </div>
);
}
 
 
export default App
 

– Заполняем файл tsconfig. json

Файл tsconfig. json – это конфигурационный файл для TypeScript, который используется для настройки параметров компиляции и поведения TypeScript-компилятора¹⁴ (tsc). Этот файл обычно располагается в корневой директории проекта и определяет, как TypeScript должен обрабатывать и компилировать исходный код. В целом, tsconfig. json позволяет настроить проект так, чтобы TypeScript понимал, как правильно компилировать код в JavaScript.

В файле tsconfig. json можно определить ряд важных параметров и настроек для компиляции TypeScript. Вот некоторые из них:

– compilerOptions: Этот раздел определяет параметры компиляции TypeScript. Некоторые распространенные опции включают:

– target: Определяет версию JavaScript, на которую будет транспилирован TypeScript-код (например, «ES5» или «ES6»).

– module: Указывает, как TypeScript должен обрабатывать модули (например, «CommonJS», «ESNext»).

– outDir: Задает директорию, в которую будут скомпилированы выходные файлы.

– strict: Включает или отключает строгую типизацию.

– jsx: Определяет, как TypeScript должен обрабатывать JSX (например, «react» или «preserve»).

– include и exclude: Эти опции определяют, какие файлы TypeScript должны включаться в процесс компиляции (include) и какие файлы исключаться (exclude).

– extends: Позволяет использовать другой конфигурационный файл в качестве базового и переопределить или дополнить его настройки.

– files и include: Определяют, какие файлы исходного кода TypeScript должны быть включены в компиляцию. Файлы перечислены в виде массива строк с путями к файлам.

– exclude: Определяет, какие файлы исходного кода TypeScript следует исключить из компиляции. Это также представлено в виде массива строк с путями к файлам.

– baseUrl и paths: Определяют настройки для алиасов путей к модулям, что может упростить импорт файлов в TypeScript.

При настройке tsconfig. json в своем проекте, убедитесь, что параметры соответствуют вашим требованиям, и что ваш код успешно компилируется и работает в соответствии с ожиданиями. Этот файл является важной частью инфраструктуры TypeScript-проекта и помогает обеспечить более точное и надежное развитие приложения. Правильная настройка tsconfig. json может также значительно улучшить процесс совместной разработки и обеспечить соблюдение стандартов кодирования в вашем проекте. В корне с проектом создайте файл tsconfig. json и напишите в него следующий код:

 
{
   «compilerOptions»: {
      «target»: «es5»,
      «lib»: [
         «dom»,
"dom.iterable»,
         «esnext»
],
      «allowJs»: true,
      «skipLibCheck»: true,
      «esModuleInterop»: true,
      «allowSyntheticDefaultImports»: true,
      «strict»: true,
      «forceConsistentCasingInFileNames»: true,
      «noFallthroughCasesInSwitch»: true,
      «module»: «esnext»,
      «moduleResolution»: «node»,
      «resolveJsonModule»: true,
      «isolatedModules»: true,
      «noEmit»: true,
      «jsx»: «react-jsx»
},
   «include»: [
      «src»
 

]

}

3.6 Файл README.md

Файл README.md в проекте на TypeScript (или любом другом проекте) обычно служит для предоставления информации о проекте, его использовании и внутренней структуре. Этот файл предназначен для документирования проекта и обеспечения ясности для других разработчиков, которые могут работать с ним. В README.md вы можете включить описание проекта, инструкции по установке и запуску, а также примеры использования и важную информацию о зависимостях¹⁵ и лицензии. Кроме того, README.md может содержать ссылки на документацию, рекомендации по структуре проекта, а также контактные данные для связи с авторами или поддержкой проекта, делая его ценным ресурсом для совместной разработки и использования.

Обычно в файл README.md для проекта на TypeScript включают следующее:

– Заголовок и описание. Начните файл README.md с заголовка, который описывает ваш проект. Затем предоставьте краткое описание проекта, которое объясняет, что ваше приложение делает.

– Установка. Опишите, как установить и настроить ваш проект. Укажите, какие зависимости нужно установить, какой пакетный менеджер¹⁶ использовать (например, npm или yarn) и какие команды выполнить.

– Использование. Предоставьте примеры кода или инструкции о том, как использовать ваше приложение. Объясните, как запустить приложение, какие команды или параметры доступны.

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

– Структура проекта¹⁷. Поясните структуру каталогов и файлов в вашем проекте. Это поможет другим разработчикам быстро ориентироваться в коде.

– Лицензия. Укажите информацию о лицензии, в соответствии с которой распространяется ваш проект. Это важно для определения правил использования и распространения вашего кода.

– Ссылки и контакты. Если у вас есть веб-сайт, репозиторий¹⁸ на GitHub или другие ресурсы, связанные с проектом, укажите их здесь. Также предоставьте контактную информацию для обратной связи или вопросов.

Пример простейшего файла README.md для проекта на TypeScript:

# Проект на TypeScript

Этот проект представляет собой пример README.md файла для проекта на TypeScript.

## Установка

1. Установите зависимости с помощью npm:

```bash

npm install

3.7 Запуск приложения

Убедитесь, что ваш разработческий сервер остановлен (если запущен), иначе введите Ctrl + C в терминале.

Запустите разработческий сервер снова с помощью команды:

npm start

Откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть ваш компонент MyComponent отображенным внутри приложения.

Если в коде будут обнаружены ошибки – они отобразятся на странице с указанием на саму ошибку и на строку, где она расположена. Этот шаг важен для проверки функциональности вашего приложения в реальной среде разработки. Обратите также внимание на сообщения в консоли браузера и на подчеркнутые красным строки кода в редакторе, чтобы оперативно выявить и исправить возможные проблемы.

3.8 Заключение

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

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

Создание компонентов в React – ключевой этап при разработке приложений, и глубокое понимание этой концепции поможет вам создавать более удобные, модульные и легко обслуживаемые приложения.

В следующей главе мы погрузимся в изучение JSX и его синтаксиса, что позволит нам создавать более выразительные и мощные пользовательские интерфейсы.

Глава 4. JSX и его синтаксис

JSX (JavaScript XML) представляет собой особый синтаксис в JavaScript, который применяется в React для создания структуры пользовательского интерфейса. Вместо того чтобы писать код на чистом JavaScript для создания элементов, можно использовать JSX для более удобной и декларативной разметки компонентов.

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

4.1 Понятие JSX

JSX – это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript. Этот код компилируется в обычный JavaScript, который React может понимать и использовать для создания элементов пользовательского интерфейса. Когда мы пишем код в JSX, он будет преобразован в обычный JavaScript, который React может понимать и использовать для построения интерфейсных элементов. Проще говоря, JSX – это инструмент, позволяющий нам описывать компоненты более наглядно и эффективно, чем просто с помощью JavaScript.

Пример JSX:

const element = <h1> Hello, World! </h1>;

В этом примере <h1> Hello, World! </h1> – это JSX элемент, который представляет собой заголовок первого уровня.

4.2 Основы синтаксиса JSX

В этом разделе мы изучим основы синтаксиса JSX, который используется в React для создания интерфейсов. JSX напоминает HTML, но имеет некоторые исключения и интересные особенности:

– Теги. В JSX можно создавать элементы с использованием тегов, как в HTML. Например, для создания блока текста используется тег <div>, для заголовка – <h1>, а для изображения – <img>. Однако есть некоторые исключения, такие как использование <className> вместо <class> для определения классов элементов.

– Значения атрибутов. Вы также можете добавлять атрибуты к JSX элементам, как в HTML. Например, для указания источника изображения и его альтернативного текста используются атрибуты src и alt.

– Вложенные элементы. JSX позволяет создавать вложенные элементы, аналогично HTML. Это значит, что вы можете размещать одни элементы внутри других:

 
<div>
<h1> Заголовок </h1>
<p> Параграф текста </p>
</div>
 

– Интерполяция. Одной из мощных особенностей JSX является возможность вставки значений JavaScript внутрь элементов с использованием фигурных скобок {}. Это называется интерполяцией. Например, вы можете вставить значение переменной name в текст:

 
const name = «John’
const greeting = <p> Привет, {name}! </p>;
 

Некоторые исключения в синтаксисе JSX включают замену class на className, как уже упоминалось ранее, и также замену for на htmlFor при работе с атрибутами class и for. Эти изменения внесены для избежания конфликтов с ключевыми словами JavaScript и HTML.

4.3 Рендеринг JSX

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

Пример рендеринга JSX в React:

 
import React from ’react’
import ReactDOM from ’react-dom’
const element = <h1> Hello, React! </h1>
ReactDOM.render (element, document.getElementById (’root’))
<h1> Hello, React! </h1>
ReactDOM.render ()
 

Пояснения:

– JSX элемент <h1> Hello, React! </h1> сохраняется в переменной element.

– ReactDOM – это библиотека, предоставляемая React, которая используется для взаимодействия с DOM (Document Object Model) в веб-приложениях. Она позволяет React-компонентам отображаться и обновляться в браузере путем управления виртуальным DOM и его согласованием с реальным DOM.

– ReactDOM.render () используется для отображения element в элементе с идентификатором root на веб-странице.

Основные функции ReactDOM включают:

– ReactDOM.render (element, container): Эта функция используется для отображения React-элемента или компонента в заданном контейнере (обычно в div или другом HTML-элементе). Она инициализирует процесс создания виртуального DOM и его синхронизацию с реальным DOM.

– ReactDOM. hydrate (element, container): Эта функция аналогична ReactDOM.render, но предназначена для гидратации (hydration) существующего серверного рендеринга<sup>19</sup>. Она используется, когда React приложение запускается на стороне клиента и должно восстановить состояние, созданное на сервере.

– ReactDOM. unmountComponentAtNode (container): Эта функция используется для отключения (размонтирования) React-компонента, который был ранее отображен в заданном контейнере.

– Другие функции, такие как ReactDOM.createPortal, которые позволяют встраивать React-компоненты вне их обычной иерархии DOM.

Примечание: Виртуальный DOM (Document Object Model) и реальный DOM представляют собой две разные концепции, связанные с манипуляциями интерфейсом в веб-разработке.

Реальный DOM:

– Реальный DOM – это фактическое представление структуры веб-страницы, доступное в браузере. Он представляет дерево объектов, где каждый узел представляет собой часть страницы.

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

Виртуальный DOM:

– Виртуальный DOM – это абстрактное представление структуры веб-страницы, существующее в памяти программы (обычно на языке JavaScript). Он является копией реального DOM.

– Манипуляции с виртуальным DOM происходят быстрее, так как это операции в памяти программы. Вместо того чтобы изменять реальный DOM сразу, изменения происходят в виртуальном DOM.

– После внесения изменений в виртуальный DOM сравнивается с реальным DOM, и только изменения применяются к фактической структуре. Это позволяет сделать процесс обновления более эффективным, так как браузеру не нужно пересчитывать и перерисовывать всю страницу, а только те части, которые изменились.

Таким образом, виртуальный DOM служит промежуточным этапом для оптимизации процесса манипуляций интерфейсом в React и других библиотеках, сокращая нагрузку на реальный DOM.

4.4 Преимущества JSX

Использование JSX в React обладает рядом преимуществ:

– Читаемость кода. JSX делает код более читаемым и похожим на HTML, что упрощает понимание структуры интерфейса. Разработчики могут легко определить иерархию элементов, что сделает поддержку и рефакторинг кода более удобными.

– Интерполяция данных. Вы можете вставлять переменные и выражения JavaScript в JSX с использованием фигурных скобок {}, что делает динамическое создание интерфейса простым. Это позволяет вам связывать компоненты с данными и динамически обновлять контент на веб-странице.

– Компоненты. JSX позволяет создавать компоненты, которые можно переиспользовать в разных частях приложения. Это способствует модульности и повторному использованию кода, что сокращает дублирование и упрощает обслуживание приложения.

Использование JSX в React упрощает разработку интерфейсов, делая код более выразительным и функциональным.

4.5 Заключение

JSX – это мощное средство для описания пользовательского интерфейса в React, позволяющее разработчикам создавать динамические, интерактивные и легко сопровождаемые веб-приложения. Оно объединяет в себе удобство декларативного описания интерфейса с мощью JavaScript, что делает его популярным выбором для программистов в области веб-разработки.

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