Ирина Кириченко React и TypeScript: Практическое руководство. Быстрый старт читать онлайн страница 5

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

      <MyComponent />
   
);
}
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 (
eact.StrictMode>
    <App />
eact.StrictMode>
);
reportWebVitals ()

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