LITMIR.BIZ

Скачать книгу

с библиотеками. Некоторые сторонние библиотеки и устаревший код могут предпочитать использование классовых компонентов.

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

      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-приложение. Этот файл обычно является стартовой точкой, с которой

Скачать книгу