Создание первого компонента в React

React - это одна из самых популярных библиотек JavaScript, которая используется для создания пользовательских интерфейсов. Она позволяет разработчикам создавать компоненты, которые могут быть повторно использованы и эффективно обновляться при изменении данных. В этой статье мы рассмотрим процесс создания первого компонента в React для новичков. Первым шагом будет установка необходимых инструментов. Для работы с React нам понадобится Node.js и пакетный менеджер npm. Если вы уже установили их на своем компьютере, можете перейти к следующему шагу. Если нет, то загрузите и установите Node.js с официального сайта (https://nodejs.org) и npm будет установлен автоматически. После успешной установки откройте командную строку или терминал и проверьте версии Node.js и npm с помощью команд:

node -v
npm -v

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

npx create-react-app my-app

Эта команда создаст новую папку my-app и установит в нее все необходимые файлы и зависимости для проекта React. После завершения установки перейдите в созданную папку с помощью команды:

cd my-app

Теперь мы готовы создать наш первый компонент. В React компонент - это просто JavaScript-функция или класс, которая возвращает некоторую разметку. Давайте создадим простой функциональный компонент. В папке src проекта найдите файл App.js и откройте его в любом текстовом редакторе. Удалите весь код, который находится внутри файла, и добавьте следующий код:

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h1>Привет, я компонент React!</h1>
      <p>Это моя первая статья о React.</p>
    </div>
  );
}

export default MyComponent;

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

Теперь давайте добавим наш компонент в основной файл приложения index.js. Откройте файл index.js в папке src и замените его содержимое следующим кодом:

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './App';

ReactDOM.render(
  <React.StrictMode>
    <MyComponent />
  </React.StrictMode>,
  document.getElementById('root')
);

В этом коде мы импортируем библиотеку ReactDOM, которая отвечает за рендеринг React-компонентов в DOM. Затем мы импортируем наш компонент MyComponent из файла "App.js". Функция ReactDOM.render() используется для рендеринга компонента на странице. Мы передаем компонент внутрь тега <React.StrictMode> и указываем место, где компонент должен быть отображен с помощью document.getElementById('root'). Теперь, когда все готово, сохраните изменения и запустите проект с помощью команды:

npm start

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

Как работает хук useId?

Основным вариантом использования useId является создание уникальных идентификаторов для использования в элементах HTML. Лучшим примером этого может быть создание идентификатора для input и label, которые указывают на тот же идентификатор. Например, если у вас есть компонент EmailForm, вы можете написать его так.

function EmailForm() {
  return (
    <>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" />
    </>
  )
}

Этот код будет работать, но если вы попытаетесь отобразить эту форму на одной и той же странице несколько раз, у вас будет несколько элементов input с одним и тем же идентификатором email. Это, очевидно, плохо, поскольку каждый идентификатор на странице должен быть уникальным, и, кроме того, ваши label при нажатии теперь будут фокусироваться на первом инпуте с email на странице, а не на инпуте электронной почты, связанном с этим label. Чтобы исправить это, мы можем использовать useId.

function EmailForm() {
  const id = useId()
  return (
    <>
      <label htmlFor={id}>Email</label>
      <input id={id} type="email" />
    </>
  )
}

Хук useId — это простой хук, который не принимает входных данных и возвращает уникальный идентификатор. Этот идентификатор уникален для каждого отдельного компонента, что означает, что мы можем отображать эту форму на нашей странице столько раз, сколько захотим, не беспокоясь о повторяющихся идентификаторах. Идентификаторы, сгенерированные useId, будут выглядеть примерно так: :r1:, :r2: и т.д.

Получение элементов с querySelector

Одна вещь, которую следует отметить в отношении хука useId, заключается в том, что идентификаторы, созданные им, являются недопустимыми селекторами для использования с методом querySelector. Это сделано намеренно, поскольку React не хочет, чтобы вы выбирали элементы по их идентификатору, используя что-то вроде querySelector. Вместо этого вы должны использовать для этого хук useRef. Если вы не знакомы с хуком useRef, вам следует ознакомиться с руководством по хуку useRef.

Использование нескольких идентификаторов в одном компоненте

Одна важная вещь, которую следует отметить в отношении этого хука, заключается в том, что вы должны использовать его только один раз для каждого компонента. Это поможет с производительностью и по-прежнему даст вам преимущества, которые вы хотите получить от хука.

function LogInForm() {
  const id = useId()
  return (
    <>
    <div>
      <label htmlFor={`${id}-email`}>Email</label>
      <input id={`${id}-email`} type="email" />
    </div>
    <div>
      <label htmlFor={`${id}-password`}>Password</label>
      <input id={`${id}-password`} type="password" />
    </div>
    </>
  )
}

Как вы можете видеть в приведенном выше примере, мы использовали useId один раз в компоненте и просто добавили уникальный идентификатор в конец идентификатора, сгенерированного useId. Это по-прежнему дает нам уникальные идентификаторы для всех элементов на нашей странице, но избавляет нас от накладных расходов на производительность, связанных с многократным вызовом этого хука в компоненте с несколькими идентификаторами.

Рендеринг на стороне сервера

Еще одна важная причина использовать этот хук — помочь с рендерингом на стороне сервера. Если вы используете что-то вроде Math.random() или другой генератор случайных чисел для генерации идентификаторов, вы столкнетесь с проблемой, когда ваши идентификаторы для одного и того же компонента на сервере отличаются от идентификаторов для этих компонентов на клиенте. Это становится особенно проблематичным, когда в вашем приложении есть сочетание клиентского и серверного отображаемого кода, поскольку теперь вы больше не можете доверять идентификаторам, сгенерированным вашим кодом. Хук useId исправляет все это, поскольку сгенерированные им идентификаторы не являются случайными. Это означает, что идентификатор будет совпадать между сервером и клиентом, и независимо от того, какое сочетание клиент-серверный код у вас есть, вы можете быть уверены, что ваши идентификаторы верны. Это самая большая причина для использования этого хука, поскольку он значительно упрощает работу с серверным кодом.

Итоги

Легко упустить из виду хук useId в React 18 из-за всех других удивительных функций/хуков, выпущенных вместе с ним, но этот маленький хук невероятно полезен.