Полезные видео о фронтенде. Подпишись на Rutube

Как добавить React на сайт

год назад·6 мин. на чтение

Как добавить скрипты React на сайт. Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.

Содержание туториала по React Вам не нужно создавать весь веб-сайт с помощью React. Можно ограничиться добавление React в HTML. Добавление React в HTML не требует установки, занимает пару минут и позволяет сразу начать писать интерактивные компоненты.

Добавление React в HTML

React с самого начала был разработан для постепенного внедрения. Большинство веб-сайтов не полностью построены (и не должны) с помощью React. В этом руководстве показано, как добавить немного интерактивности на существующую HTML-страницу. Попробуйте это на своем собственном веб-сайте или на пустом HTML-файле. Все, что вам нужно, это подключение к Интернету и текстовый редактор, такой как Блокнот или VS Code (Вот как настроить ваш редактор для подсветки синтаксиса).

Шаг 1. Добавьте корневой HTML-тег

Сначала откройте HTML-страницу, которую хотите отредактировать. Добавьте пустой тег <div>, чтобы отметить место, где вы хотите отобразить что-то с помощью React. Дайте этому <div> уникальное значение атрибута id. Например:

<!-- ... существующий HTML ... -->

<div id="like-button-root"></div>

<!-- ... существующий HTML ... -->

Он называется "корень" ("root"), потому что с него начинается дерево React. Такой корневой HTML-тег можно разместить в любом месте внутри тега <body>. Оставьте его пустым, потому что React заменит его содержимое вашим компонентом React. У вас может быть столько корневых тегов HTML, сколько вам нужно на одной странице.

Шаг 2: Добавьте теги `script`

На HTML-странице прямо перед закрывающим тегом </body> добавьте три тега <script> для следующих файлов:

react.development.js позволяет вам определять компоненты React.
react-dom.development.js позволяет React отображать HTML-элементы в DOM.
like-button.js — это место, где будет находиться код нашего компонента, который напишем на следующем шаге.

Теперь код HTML-страницы должен заканчиваться так:

    <!-- конец страницы -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="like-button.js"></script>
  </body>
</html>

Перед развертыванием веб-сайта в продакшн обязательно замените development.js на production.min.js. Сборки React для разработки предоставляют более полезные сообщения об ошибках, но сильно замедляют работу сайта.

Шаг 3: Создайте React компонент

Создайте файл с именем like-button.js рядом со своей HTML-страницей, добавьте этот фрагмент кода и сохраните файл. Этот код определяет React компонент под названием LikeButton.

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

Шаг 4: Добавьте React компонент на страницу

Наконец, добавьте три строки в конец файла like-button.js. Эти строки кода находят <div>, который мы добавили в HTML на первом шаге, создают корень React, а затем отображают React компонент кнопки «Нравится» внутри него:

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

Компоненты можно использовать повторно. Вы можете захотеть отобразить компоненты React в нескольких местах на одной HTML-странице. Это полезно, если части вашей страницы, основанные на React, отделены друг от друга. Вы можете сделать это, поместив несколько корневых тегов в свой HTML, а затем визуализировав компоненты React внутри каждого из них с помощью ReactDOM.createRoot(). Например:

В index.html добавьте дополнительный элемент-контейнер <div id="another-root"></div>.
В like-button.js добавьте в конце еще три строчки:

const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

Если вам нужно отрендерить один и тот же компонент во многих местах, вы можете назначить CSS класс вместо id для каждого корня, а затем найти их все.

Шаг 5: Минифицируйте JavaScript для продакшена

Неминифицированный JavaScript может значительно замедлить загрузку страниц для пользователей. Перед развертыванием веб-сайта в продакшене рекомендуется минимизировать его скрипты.

Если у вас нет шага минификации для скриптов, вот один из способов его настройки.

npx terser -c -m -o like-button.min.js -- like-button.js

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

<script
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
  crossorigin
></script>

React с JSX

Приведенные выше примеры основаны на функциях, изначально поддерживаемых браузерами. Вот почему like-button.js использует вызов JavaScript функции, чтобы сообщить React, что отображать:

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

Однако React также предлагает возможность использовать вместо этого JSX, HTML-подобный синтаксис JavaScript:

return <button onClick={() => setLiked(true)}>Like</button>;

Эти два фрагмента кода эквивалентны. JSX — популярный синтаксис для описания разметки в JavaScript. Многие с ним знакомы и считают полезным для написания UI кода — как с React, так и с другими библиотеками.

Попробуйте JSX

Самый быстрый способ попробовать JSX — добавить на страницу компилятор Babel в теге <script> . Поместите его перед like-button.js, а затем в тег <script> для like-button.js добавьте атрибут type="text/babel":

  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script src="like-button.js" type="text/babel"></script>
</body>

Теперь вы можете открыть like-button.js и заменить

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

на эквивалентный JSX код:

return <button onClick={() => setLiked(true)}>Like</button>;

Поначалу может показаться немного непривычным смешивать JS с разметкой, но вам это понравится. Ознакомьтесь со статьей Разметка с JSX. Компилятор Babel в теге <script> отлично подходит для обучения и создания простых демо. Однако это замедляет ваш сайт и не подходит для продакшена. Когда вы будете готовы двигаться дальше, удалите тег <script> с Babel и удалите атрибут type="text/babel". Вместо этого в следующем разделе мы настроим препроцессор JSX для преобразования всех тегов <script> из JSX в JS.

Добавление JSX в проект

Добавление JSX в проект не требует сложных инструментов, таких как сборщик или сервер разработки. Добавление препроцессора JSX очень похоже на добавление препроцессора CSS. Перейдите в папку проекта в терминале и вставьте эти две команды (убедитесь, что у вас установлен Node.js):

npm init -y (if it fails, here’s a fix)
npm install @babel/cli@7 babel-preset-react-app@10

Если вы получаете сообщение об ошибке "Invalid name" при запуске npm init -y, переименуйте папку проекта, чтобы она содержала только строчные буквы ASCII или дефисы (например, my-project), и повторите попытку. В данном случае npm будет нужен только для установки препроцессора JSX. И React, и код приложения могут оставаться в виде тегов <script> без изменений.

Запуск препроцессора JSX

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

Создайте папку с именем src.
В терминале выполните следующую команду:

npx babel --watch src --out-dir . --presets babel-preset-react-app/prod

Не ждите завершения. Эта команда запускает автоматическое наблюдение за изменениями в JSX внутри src.

Переместите свой файл like-button.js c JSX в папку src.

Наблюдатель создаст предварительно обработанный like-button.js с простым JavaScript кодом, подходящим для браузера. Если вы видите сообщение об ошибке "You have mistakenly installed the babel package" ("Вы установили пакет babel по ошибке"), возможно, вы пропустили предыдущий шаг (Добавление JSX в проект). Выполните его в той же папке, а затем повторите попытку. Инструмент, который вы только что использовали, называется Babel, и вы можете узнать больше о нем из его документации. В дополнение к JSX он позволяет вам использовать самые последние функции синтаксиса JavaScript, не беспокоясь о поломках в старых браузерах. Если вы освоились с инструментами сборки и хотите, чтобы они делали для вас больше, то здесь вы можете найти обзор на некоторые из самых популярных и доступных наборов инструментов.

React без JSX

Первоначально JSX был представлен для того, чтобы написание компонентов с помощью React было таким же привычным, как написание HTML. С тех пор синтаксис получил широкое распространение. Однако могут быть случаи, когда вы не хотите или не можете использовать JSX. У вас есть два варианта:

Используйте альтернативу JSX, такую как htm, которая использует шаблонные строки JavaScript вместо компилятора.
Используйте React.createElement() со специальной структурой, описанной ниже.

С JSX вы бы написали такой компонент:

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

С React.createElement() вы бы написали это так:

function Hello(props) {
  return React.createElement('div', null, 'Hello ', props.toWhat);
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, { toWhat: 'World' }, null));

Он принимает несколько аргументов: React.createElement(component, props, ...children). Вот как они работают:

Компонент, который может быть строкой, представляющей элемент HTML или функциональный компонент.
Объект с любыми пропсами, который вы хотите передать
Остальные являются дочерними компонентами, такими как текстовые строки или другие элементы.

Если вам надоело постоянно вводить React.createElement(), один из распространенных шаблонов — назначить сокращение:

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

Затем, если вы предпочитаете этот стиль, он может быть таким же удобным, как и JSX.

React Туториал по React Frontend

Что за хук useId в React?

год назад·1 мин. на чтение

useId - хук, который появился в React 18. Он помогает при работе с уникальными идентификаторами в компонентах.

Как работает хук `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 из-за всех других удивительных функций/хуков, выпущенных вместе с ним, но этот маленький хук невероятно полезен.

Frontend React React hooks