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

Какую структуру состояния React выбрать

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

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

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

Принципы структурирования состояния

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

Состояние, связанное с группой. Если вы всегда одновременно обновляете две или более переменных состояния, рассмотрите возможность их объединения в одну переменную состояния.
Избегайте противоречий в состоянии. Когда состояние структурировано таким образом, что несколько частей состояния могут противоречить и «не согласовываться» друг с другом, вы оставляете место для ошибок. Постарайтесь избежать этого.
Избегайте избыточного состояния. Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента.
Избегайте дублирования состояния. Когда одни и те же данные дублируются между несколькими переменными состояния или внутри вложенных объектов, их сложно синхронизировать. Уменьшайте дублирование, если возможно.
Избегайте глубоко вложенных состояний. Глубоко иерархическое состояние не очень удобно обновлять. По возможности предпочтительнее структурировать состояние в плоском виде.

Цель этих принципов — упростить обновление состояния без внесения ошибок. Удаление избыточных и повторяющихся данных из состояния помогает обеспечить синхронизацию всех его частей. Это похоже на то, как инженер базы данных может захотеть «нормализовать» структуру базы данных, чтобы уменьшить вероятность ошибок. Теперь давайте посмотрим, как эти принципы применяются в действии.

Состояние, связанное с группой

Иногда вы можете быть не уверены, использовать одну или несколько переменных состояния. Должны ли вы это сделать так?

const [x, setX] = useState(0);
const [y, setY] = useState(0);

Или так?

const [position, setPosition] = useState({ x: 0, y: 0 });

Технически вы можете использовать любой из этих подходов. Но если какие-то две переменные состояния всегда изменяются вместе, было бы неплохо объединить их в одну переменную состояния. Тогда вы не забудете всегда синхронизировать их, как в этом примере, где перемещение курсора обновляет обе координаты красной точки:

import { useState } from 'react';

export default function MovingDot() {
  const [position, setPosition] = useState({
    x: 0,
    y: 0,
  });
  return (
    <div
      onPointerMove={(e) => {
        setPosition({
          x: e.clientX,
          y: e.clientY,
        });
      }}
      style={{
        position: 'relative',
        width: '100vw',
        height: '100vh',
      }}
    >
      <div
        style={{
          position: 'absolute',
          backgroundColor: 'red',
          borderRadius: '50%',
          transform: `translate(${position.x}px, ${position.y}px)`,
          left: -10,
          top: -10,
          width: 20,
          height: 20,
        }}
      />
    </div>
  );
}

Другой случай, когда вы будете группировать данные в объект или массив, — это когда вы не знаете, сколько различных частей состояния вам понадобится. Например, когда у вас есть форма, в которой пользователь может добавлять настраиваемые поля. Если ваша переменная состояния является объектом, помните, что вы не можете обновить в ней только одно поле без явного копирования других полей. Например, вы не можете использовать setPosition({ x: 100 }) в приведенном выше примере, потому что у него вообще не будет свойства y. Вместо этого, если вы хотите установить только x, вы должны либо выполнить setPosition({ ...position, x: 100}), либо разделить их на две переменные состояния и выполнить setX(100).

Избегайте противоречий в состоянии

Вот форма обратной связи отеля с переменными состояния isSending и isSent:

import { useState } from 'react';

export default function FeedbackForm() {
  const [text, setText] = useState('');
  const [isSending, setIsSending] = useState(false);
  const [isSent, setIsSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    setIsSending(true);
    await sendMessage(text);
    setIsSending(false);
    setIsSent(true);
  }

  if (isSent) {
    return <h1>Thanks for feedback!</h1>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <p>How was your stay at The Prancing Pony?</p>
      <textarea
        disabled={isSending}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      <button disabled={isSending} type="submit">
        Send
      </button>
      {isSending && <p>Sending...</p>}
    </form>
  );
}

// Имитация отправки сообщения.
function sendMessage(text) {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
}

Хотя этот код работает, в нем могут возникнуть «невозможные» состояний. Например, если вы забудете вызвать setIsSent и setIsSending вместе, вы можете оказаться в ситуации, когда и isSending, и isSent одновременно имеют значение true. Чем сложнее ваш компонент, тем сложнее будет понять, что произошло. Поскольку isSending и isSent никогда не должны принимать значение true одновременно, лучше заменить их одной переменной состояния, которая может принимать одно из трех допустимых состояний: «ввод» (typing), «отправка» (sending) и «отправлено» (sent):

import { useState } from 'react';

export default function FeedbackForm() {
  const [text, setText] = useState('');
  const [status, setStatus] = useState('typing');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    await sendMessage(text);
    setStatus('sent');
  }

  const isSending = status === 'sending';
  const isSent = status === 'sent';

  if (isSent) {
    return <h1>Thanks for feedback!</h1>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <p>How was your stay at The Prancing Pony?</p>
      <textarea
        disabled={isSending}
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <br />
      <button disabled={isSending} type="submit">
        Send
      </button>
      {isSending && <p>Sending...</p>}
    </form>
  );
}

// Имитация отправки сообщения.
function sendMessage(text) {
  return new Promise((resolve) => {
    setTimeout(resolve, 2000);
  });
}

Вы также можете объявить некоторые константы для удобства чтения:

const isSending = status === 'sending';
const isSent = status === 'sent';

Но они не являются переменными состояния, поэтому вам не нужно беспокоиться об их рассинхронизации друг с другом.

Избегайте избыточного состояния

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

import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [fullName, setFullName] = useState('');

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
    setFullName(e.target.value + ' ' + lastName);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
    setFullName(firstName + ' ' + e.target.value);
  }

  return (
    <>
      <h2>Let’s check you in</h2>
      <label>
        First name: <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name: <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p>
        Your ticket will be issued to: <b>{fullName}</b>
      </p>
    </>
  );
}

Эта форма имеет три переменные состояния: firstName, lastName и fullName. Однако fullName является избыточным. Вы всегда можете вычислить fullName из firstName и lastName во время рендеринга, поэтому удалите его из состояния. Вот как вы можете это сделать:

import { useState } from 'react';

export default function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const fullName = firstName + ' ' + lastName;

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  return (
    <>
      <h2>Let’s check you in</h2>
      <label>
        First name: <input value={firstName} onChange={handleFirstNameChange} />
      </label>
      <label>
        Last name: <input value={lastName} onChange={handleLastNameChange} />
      </label>
      <p>
        Your ticket will be issued to: <b>{fullName}</b>
      </p>
    </>
  );
}

Здесь fullName не является переменной состояния. Вместо этого он вычисляется во время рендеринга:

const fullName = firstName + ' ' + lastName;

В результате обработчикам изменений не нужно делать ничего особенного для его обновления. Когда вы вызываете setFirstName или setLastName, вы запускаете повторный рендеринг, а затем следующее значение fullName будет вычислено из свежих данных.

Не отзеркаливайте пропсы в состоянии

Типичным примером избыточного состояния является такой код:

function Message({ messageColor }) {
  const [color, setColor] = useState(messageColor);

Здесь переменная состояния color инициализируется пропсом messageColor. Проблема в том, что если родительский компонент позже передаст другое значение messageColor (например, «красный» вместо «синий»), переменная состояния цвета не будет обновлена. Состояние инициализируется только во время первого рендеринга. Вот почему «отзеркаливание» некоторых пропсов в переменной состояния может привести к путанице. Вместо этого используйте проп messageColor непосредственно в коде. Если вы хотите дать ему более короткое имя, используйте константу:

function Message({ messageColor }) {
  const color = messageColor;

Таким образом, он не будет рассинхронизирован с пропсом, переданным от родительского компонента. «Зеркалирование» пропсов в состояние имеет смысл только в том случае, если вы хотите игнорировать все обновления для определенного пропса. По соглашению начинайте имя пропса с initial или default, чтобы уточнить, что его новые значения игнорируются:

function Message({ initialColor }) {
  // Переменная состояния `color` содержит начальное значение `initialColor`.
  // Последующие изменения пропса `initialColor` игнорируются.
  const [color, setColor] = useState(initialColor);

Избегайте дублирования состояния

Этот компонент меню позволяет выбрать один перекус из нескольких:

import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedItem, setSelectedItem] = useState(items[0]);

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.title}{' '}
            <button
              onClick={() => {
                setSelectedItem(item);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}

В настоящее время он сохраняет выбранный элемент как объект в переменной состояния selectedItem. Однако это не очень хорошо: содержимое selectedItem — это тот же объект, что и один из элементов в списке элементов. Это означает, что информация о самом предмете дублируется в двух местах. Почему это проблема? Давайте сделаем каждый элемент редактируемым:

import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedItem, setSelectedItem] = useState(items[0]);

  function handleItemChange(id, e) {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            title: e.target.value,
          };
        } else {
          return item;
        }
      })
    );
  }

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <input
              value={item.title}
              onChange={(e) => {
                handleItemChange(item.id, e);
              }}
            />{' '}
            <button
              onClick={() => {
                setSelectedItem(item);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}

Обратите внимание, что если вы сначала нажмете «Выбрать» на элементе, а затем отредактируете его, ввод обновится, но метка внизу не отразит изменения. Это потому, что вы дублировали состояние и забыли обновить selectedItem. Хотя вы также можете обновить selectedItem, более простое решение — удалить дублирование. В этом примере вместо объекта selectedItem (который создает дублирование объектов внутри элементов) вы сохраняете selectedId в состоянии, а затем получаете selectedItem путем поиска в массиве элементов элемента с этим идентификатором:

import { useState } from 'react';

const initialItems = [
  { title: 'pretzels', id: 0 },
  { title: 'crispy seaweed', id: 1 },
  { title: 'granola bar', id: 2 },
];

export default function Menu() {
  const [items, setItems] = useState(initialItems);
  const [selectedId, setSelectedId] = useState(0);

  const selectedItem = items.find((item) => item.id === selectedId);

  function handleItemChange(id, e) {
    setItems(
      items.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            title: e.target.value,
          };
        } else {
          return item;
        }
      })
    );
  }

  return (
    <>
      <h2>What's your travel snack?</h2>
      <ul>
        {items.map((item, index) => (
          <li key={item.id}>
            <input
              value={item.title}
              onChange={(e) => {
                handleItemChange(item.id, e);
              }}
            />{' '}
            <button
              onClick={() => {
                setSelectedId(item.id);
              }}
            >
              Choose
            </button>
          </li>
        ))}
      </ul>
      <p>You picked {selectedItem.title}.</p>
    </>
  );
}

В качестве альтернативы вы можете хранить выбранный индекс в состоянии. Раньше состояние дублировалось так:

items = [{ id: 0, title: 'pretzels'}, ...]
selectedItem = {id: 0, title: 'pretzels'}

А вот после замены состояние выглядит так:

items = [{ id: 0, title: 'pretzels'}, ...]
selectedId = 0

Дублирование исчезло, и вы сохранили только основное состояние. Теперь, если вы отредактируете выбранный элемент, сообщение ниже будет немедленно обновлено. Это связано с тем, что setItems вызывает повторный рендеринг, а items.find(...) найдет элемент с обновленным заголовком. Вам не нужно было удерживать выбранный элемент в состоянии, потому что важен только выбранный идентификатор. Остальное можно рассчитать во время рендера.

Избегайте глубоко вложенных состояний

Представьте план путешествия, состоящий из планет, континентов и стран. У вас может возникнуть соблазн структурировать его состояние с помощью вложенных объектов и массивов, как в этом примере:

// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

function PlaceTree({ place }) {
  const childPlaces = place.childPlaces;
  return (
    <li>
      {place.title}
      {childPlaces.length > 0 && (
        <ol>
          {childPlaces.map((place) => (
            <PlaceTree key={place.id} place={place} />
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const planets = plan.childPlaces;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planets.map((place) => (
          <PlaceTree key={place.id} place={place} />
        ))}
      </ol>
    </>
  );
}

// places.js

export const initialTravelPlan = {
  id: 0,
  title: '(Root)',
  childPlaces: [
    {
      id: 1,
      title: 'Earth',
      childPlaces: [
        {
          id: 2,
          title: 'Africa',
          childPlaces: [
            {
              id: 3,
              title: 'Botswana',
              childPlaces: [],
            },
            {
              id: 4,
              title: 'Egypt',
              childPlaces: [],
            },
          ],
        },
        {
          id: 5,
          title: 'Asia',
          childPlaces: [
            {
              id: 6,
              title: 'China',
              childPlaces: [],
            },
            {
              id: 7,
              title: 'Hong Kong',
              childPlaces: [],
            },
          ],
        },
      ],
    },
    {
      id: 8,
      title: 'Mars',
      childPlaces: [
        {
          id: 9,
          title: 'Corn Town',
          childPlaces: [],
        },
        {
          id: 10,
          title: 'Green Hill',
          childPlaces: [],
        },
      ],
    },
  ],
};

Теперь предположим, что вы хотите добавить кнопку для удаления места, которое вы уже посетили. Как бы вы это сделали? Обновление вложенного состояния включает в себя создание копий объектов от той части, которая была изменена. Удаление глубоко вложенного места потребует копирования всей его родительской цепочки мест. Такой код может быть очень многословным. Если состояние слишком вложенное, чтобы его можно было легко обновить, подумайте о том, чтобы сделать его «плоским». Вот один из способов реструктуризации этих данных. Вместо древовидной структуры, в которой каждое место имеет массив своих дочерних мест, вы можете сделать так, чтобы каждое место содержало массив идентификаторов своих дочерних мест. Затем вы можете сохранить сопоставление каждого идентификатора места с соответствующим местом. Эта реструктуризация данных может напомнить вам таблицу базы данных:

// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

function PlaceTree({ id, placesById }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree key={childId} id={childId} placesById={placesById} />
          ))}
        </ol>
      )}
    </li>
  );
}

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);
  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree key={id} id={id} placesById={plan} />
        ))}
      </ol>
    </>
  );
}

// places.js

export const initialTravelPlan = {
  0: {
    id: 0,
    title: '(Root)',
    childIds: [1, 8],
  },
  1: {
    id: 1,
    title: 'Earth',
    childIds: [2, 5],
  },
  2: {
    id: 2,
    title: 'Africa',
    childIds: [3, 4],
  },
  3: {
    id: 3,
    title: 'Botswana',
    childIds: [],
  },
  4: {
    id: 4,
    title: 'Egypt',
    childIds: [],
  },
  5: {
    id: 5,
    title: 'Asia',
    childIds: [6, 7],
  },
  6: {
    id: 6,
    title: 'China',
    childIds: [],
  },
  7: {
    id: 7,
    title: 'Hong Kong',
    childIds: [],
  },
  8: {
    id: 8,
    title: 'Mars',
    childIds: [9, 10],
  },
  9: {
    id: 9,
    title: 'Corn Town',
    childIds: [],
  },
  10: {
    id: 10,
    title: 'Green Hill',
    childIds: [],
  },
};

Теперь, когда состояние «плоское» (также известное как «нормализованное»), обновление вложенных элементов становится проще. Чтобы удалить место сейчас, вам нужно всего лишь обновить два уровня состояния:

Обновленная версия родительского места должна исключить удаленный идентификатор из массива childIds.
Обновленная версия корневого объекта должна включать обновленную версию родительского места.

Вот пример того, как вы можете это сделать:

// App.jsx

import { useState } from 'react';
import { initialTravelPlan } from './places.js';

export default function TravelPlan() {
  const [plan, setPlan] = useState(initialTravelPlan);

  function handleComplete(parentId, childId) {
    const parent = plan[parentId];
    // Создаем новую версию родительского места,
    // которая не включает этот дочерний ID.
    const nextParent = {
      ...parent,
      childIds: parent.childIds.filter((id) => id !== childId),
    };
    // Обновляем состояние корневого объекта...
    setPlan({
      ...plan,
      // ...чтобы он содержал обновленный объект родителя.
      [parentId]: nextParent,
    });
  }

  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree
            key={id}
            id={id}
            parentId={0}
            placesById={plan}
            onComplete={handleComplete}
          />
        ))}
      </ol>
    </>
  );
}

function PlaceTree({ id, parentId, placesById, onComplete }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      <button
        onClick={() => {
          onComplete(parentId, id);
        }}
      >
        Complete
      </button>
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree
              key={childId}
              id={childId}
              parentId={id}
              placesById={placesById}
              onComplete={onComplete}
            />
          ))}
        </ol>
      )}
    </li>
  );
}

Вы можете сколько угодно вкладывать состояния, но если сделать их «плоскими», это может решить множество проблем. Это упрощает обновление состояния и помогает избежать дублирования в разных частях вложенного объекта.

Улучшение использования памяти

В идеале вы также должны удалить удаленные элементы (и их дочерние элементы) из объекта-таблицы, чтобы оптимизировать использование памяти. Реализация ниже содержит эту логику. Он также использует Immer, чтобы сделать логику обновления более лаконичной.

import { useImmer } from 'use-immer';
import { initialTravelPlan } from './places.js';

export default function TravelPlan() {
  const [plan, updatePlan] = useImmer(initialTravelPlan);

  function handleComplete(parentId, childId) {
    updatePlan((draft) => {
      // Удлаим дочерние ID из родительского `place`.
      const parent = draft[parentId];
      parent.childIds = parent.childIds.filter((id) => id !== childId);

      // Удалим это место и все его поддерево.
      deleteAllChildren(childId);
      function deleteAllChildren(id) {
        const place = draft[id];
        place.childIds.forEach(deleteAllChildren);
        delete draft[id];
      }
    });
  }

  const root = plan[0];
  const planetIds = root.childIds;
  return (
    <>
      <h2>Places to visit</h2>
      <ol>
        {planetIds.map((id) => (
          <PlaceTree
            key={id}
            id={id}
            parentId={0}
            placesById={plan}
            onComplete={handleComplete}
          />
        ))}
      </ol>
    </>
  );
}

function PlaceTree({ id, parentId, placesById, onComplete }) {
  const place = placesById[id];
  const childIds = place.childIds;
  return (
    <li>
      {place.title}
      <button
        onClick={() => {
          onComplete(parentId, id);
        }}
      >
        Complete
      </button>
      {childIds.length > 0 && (
        <ol>
          {childIds.map((childId) => (
            <PlaceTree
              key={childId}
              id={childId}
              parentId={id}
              placesById={placesById}
              onComplete={onComplete}
            />
          ))}
        </ol>
      )}
    </li>
  );
}

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

Резюме

Если две переменные состояния всегда обновляются вместе, рассмотрите возможность их объединения в одну.
Тщательно выбирайте переменные состояния, чтобы избежать создания «невозможных» состояний.
Структурируйте свое состояние таким образом, чтобы уменьшить вероятность того, что вы совершите ошибку при его обновлении.
Избегайте избыточного и дублирующего состояния, чтобы вам не нужно было синхронизировать его.
Не помещайте пропсы в состояние, если вы специально не хотите предотвратить обновления.
Для шаблонов пользовательского интерфейса, таких как выбор, сохраняйте в состоянии не сам объект, а его идентификатор или индекс.
Если обновление глубоко вложенного состояния затруднено, попробуйте сделать его плоским.

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

Как добавить 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