Полезные видео о фронтенде. Подпишись на 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

Динамический рендеринг компонентов в React

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

В этой статье рассмотрим, как динамически добавлять или удалять компоненты в react.

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

// userA.js

import React from "react";

function UserA() {
  return (
    <div>
      <h1>This is user A</h1>
    </div>
  );
}

export default UserA;

// userB.js

import React from "react";

function UserA() {
  return (
    <div>
      <h1>This is user B</h1>
    </div>
  );
}

export default UserB;

Создание динамического компонента

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

// Dynamic.js

import React from "react";
import UserA from "./userA";
import UserB from "./userB";

const components = {
  usera: UserA,
  userb: UserB
};

function DynamicComponent(props) {
  const SelectUser = components[props.user];
  return <SelectUser />;
}

export default DynamicComponent;

В приведенном выше коде мы сначала импортировали два компонента (UserA, UserB), а затем добавили их в объект components. Внутри DynamicComponent мы создали переменную SelectUser и вернули ее. Таким образом, если мы передадим usera в качестве пропса, то отрендерится компонент UserA. Если мы передадим userb в качестве пропса, отрендерится компонент UserB.

Использование динамического компонента

Давайте теперь воспользуемся нашим динамическим компонентом, импортировав его.

// App.js

import React, { useState } from "react";
import DynamicComponent from "./Dynamic";

function App() {
  const [user, changeUser] = useState("usera");
  return (
    <div>
      {/* изначально отрендерится компонент UserA */}
      <DynamicComponent user={user} />
      <button onClick={() => changeUser("usera")}>Switch user-a</button>
      <button onClick={() => changeUser("userb")}>Switch user-b</button>
    </div>
  );
}

export default App;

Frontend React