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

– Использовали 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, который помогает выявлять потенциальные проблемы в компонентах и их потомках. Он не влияет на продакшен-сборку[12 - Продакшен-сборка (production build) – это версия вашего программного продукта, предназначенная для развертывания и использования в реальной эксплуатационной среде.], но помогает разработчикам рано обнаруживать и исправлять проблемы.

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

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

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

– Использование несовместимых 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»
import». /App. css»

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

export default App