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

Быстрый старт с React

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

React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница.

Содержание туториала по React Эта страница познакомит вас с 80% концепций React, которые вы будете использовать ежедневно.

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

React приложения состоят из компонентов. Компонент — это часть UI (пользовательского интерфейса), которая имеет собственную логику и внешний вид. Компонент может быть маленьким, как кнопка, или большим, как целая страница. React компоненты — это функции JavaScript, которые возвращают разметку:

function MyButton() {
  return <button>I'm a button</button>;
}

Теперь, когда вы объявили MyButton, вы можете вложить его в другой компонент:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

Обратите внимание, что <MyButton /> начинается с заглавной буквы. Так мы узнаем, что это React компонент. Имена React компонентов всегда должны начинаться с заглавной буквы, а теги HTML должны быть строчными. Ключевые слова export default определяют главный компонент в файле.

Написание разметки с помощью JSX

Синтаксис разметки, который вы видели выше, называется JSX. Это необязательно, но большинство проектов React используют JSX для удобства. Все рекомендуемые для локальной разработки инструменты, поддерживают JSX «из коробки». JSX строже, чем HTML. Вы должны закрыть теги типа <br />. Ваш компонент также не может возвращать несколько тегов JSX. Вы должны обернуть их в общий родитель, например <div>...</div> или пустую оболочку <>...</>:

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>
        Hello there.
        <br />
        How do you do?
      </p>
    </>
  );
}

Если у вас есть много HTML для переноса в JSX, вы можете использовать онлайн-конвертер.

Добавление стилей

В React вы указываете CSS класс с помощью className. Он работает так же, как атрибут class в HTML:

<img className="avatar" />

Затем вы пишете правила CSS для него в отдельном файле CSS:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

React не предписывает, как добавлять файлы CSS. В самом простом случае вы добавите тег <link> в свой HTML. Если вы используете инструмент сборки или фреймворк, обратитесь к его документации, чтобы узнать, как добавить файл CSS в свой проект.

Отображение данных

JSX позволяет размещать разметку в JavaScript. Фигурные скобки позволяют вам «уйти обратно» в JavaScript, чтобы вы могли внедрить некоторую переменную из своего кода и отобразить ее пользователю. Например, это отобразит user.name:

return <h1>{user.name}</h1>;

Вы также можете «убежать в JavaScript» из атрибутов JSX, но вам нужно использовать фигурные скобки вместо кавычек. Например, className="avatar" передает строку "avatar" как CSS класс, но src={user.imageUrl} считывает значение JavaScript переменной user.imageUrl, а затем передает это значение как атрибут src:

return <img className="avatar" src={user.imageUrl} />;

Вы также можете поместить более сложные выражения в фигурные скобки JSX, например, конкатенацию строк:

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize,
        }}
      />
    </>
  );
}

В приведенном выше примере style={{}} не является специальным синтаксисом, а является обычным объектом {} внутри фигурных скобок style={ } JSX. Вы можете использовать атрибут style, когда ваши стили зависят от переменных JavaScript.

Рендеринг по условию

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

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return <div>{content}</div>;

Если вы предпочитаете более компактный код, вы можете использовать условный ? оператор. В отличие от if, он работает внутри JSX:

<div>{isLoggedIn ? <AdminPanel /> : <LoginForm />}</div>

Если вам не нужна ветвь else, вы также можете использовать более короткий синтаксис логического &&:

<div>{isLoggedIn && <AdminPanel />}</div>

Все эти подходы также работают для указанных по условию атрибутов. Если вы не знакомы с некоторыми элементами этого синтаксиса JavaScript, вы можете начать с постоянного использования if...else.

Рендеринг списков

Вы будете полагаться на возможности JavaScript, такие как цикл for и метод массива map() для отображения списков компонентов. Например, допустим, у вас есть набор продуктов:

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

Внутри вашего компонента используйте метод map() для преобразования массива продуктов в массив элементов <li>:

const listItems = products.map((product) => (
  <li key={product.id}>{product.title}</li>
));

return <ul>{listItems}</ul>;

Обратите внимание, что <li> имеет атрибут key. Для каждого элемента в списке вы должны передать строку или число, которое однозначно идентифицирует этот элемент среди его соседних элементов. Обычно ключ должен исходить из ваших данных, таких как идентификатор базы данных. React будет полагаться на ваши ключи, чтобы понять, что произошло, если вы позже вставите, удалите или измените порядок элементов.

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map((product) => (
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen',
      }}
    >
      {product.title}
    </li>
  ));

  return <ul>{listItems}</ul>;
}

Реакция на события

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

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Обратите внимание, что onClick={handleClick} не имеет круглых скобок в конце. Не вызывайте функцию обработчика событий: вам нужно только передать ее вниз. React вызовет ваш обработчик событий, когда пользователь нажмет кнопку.

Обновление компонентов

Часто необходимо, чтобы компонент «запоминал» некоторую информацию и отображал ее. Например, может быть, вы хотите подсчитать, сколько раз была нажата кнопка. Для этого нужно добавить состояние к компоненту. Во-первых, импортируйте useState из React: Теперь вы можете объявить переменную состояния внутри вашего компонента:

function MyButton() {
  const [count, setCount] = useState(0);

От useState вы получите две вещи: текущее состояние (count) и функцию, которая позволяет вам его обновить (setCount). Вы можете давать им любые имена, но принято называть их как [something, setSomething]. При первом отображении кнопки count будет равен 0, потому что вы передали 0 в useState(). Если вы хотите изменить состояние, вызовите setCount() и передайте ему новое значение. Нажатие на эту кнопку увеличит счетчик:

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

React снова вызовет функцию вашего компонента. На этот раз счет будет 1. Затем будет 2. И так далее. Если вы визуализируете один и тот же компонент несколько раз, каждый из них получит свое собственное состояние.

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return <button onClick={handleClick}>Clicked {count} times</button>;
}

Обратите внимание, как каждая кнопка «запоминает» свое собственное состояние счетчика и не влияет на другие кнопки.

Использование хуков

Функции, начинающиеся с use, называются хуками. useState — это встроенный хук, предоставляемый React. Вы можете найти другие встроенные хуки в справочнике React API. Вы также можете написать свои собственные хуки, комбинируя существующие. Хуки накладывают больше ограничений, чем обычные функции. Вы можете вызывать хуки только на верхнем уровне ваших компонентов (или других хуков). Если вы хотите использовать useState в условии или цикле, создайте новый компонент и поместите его туда.

Обмен данными между компонентами

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

Во-первых, переместите состояние из MyButton в MyApp:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  //
}

Затем передайте состояние из MyApp в каждый MyButton вместе с общим обработчиком кликов. Вы можете передавать информацию в MyButton с помощью фигурных скобок JSX, точно так же, как вы делали это раньше со встроенными тегами, такими как <img>:

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

Информация, которую вы передаете таким образом, называется пропсами. Теперь компонент MyApp содержит состояние счетчика и обработчик события handleClick и передает их оба в качестве пропсов каждой из кнопок. Наконец, измените MyButton, чтобы он считывал пропсы, которые вы передали из его родительского компонента:

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

Когда вы нажимаете кнопку, срабатывает обработчик onClick. Проп onClick каждой кнопки было установлено на функцию handleClick внутри MyApp, поэтому код внутри него выполняется. Этот код вызывает setCount(count + 1), увеличивая переменную состояния count. Новое значение счетчика передается в качестве пропса каждой кнопке, поэтому все они показывают новое значение. Это называется «подъем состояния вверх». Переместив состояние вверх, мы разделили его между компонентами.

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Счетчики, изменяющиеся вместе</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return <button onClick={onClick}>Clicked {count} times</button>;
}

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

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

Реакция на события в React компонентах

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

React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.

Содержание туториала по React React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.

Добавление обработчиков событий

Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее в качестве пропса соответствующему тегу JSX. Например, вот кнопка, которая пока ничего не делает:

export default function Button() {
  return <button>I don't do anything</button>;
}

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

Объявите функцию с именем handleClick внутри компонента Button.
Реализуйте логику внутри этой функции (используйте alert для отображения сообщения).
Добавьте onClick={handleClick} в <button>.

export default function Button() {
  function handleClick() {
    alert('You clicked me!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

Вы определили функцию handleClick, а затем передали ее как проп в <button>. handleClick — это обработчик событий. Обработчик событий:

Обычно определяется внутри ваших компонентов.
Имеет имена, которые начинаются с handle, за которым следует имя события.

По соглашению принято называть обработчики событий как handle, за которым следует имя события. Вы часто будете видеть onClick={handleClick}, onMouseEnter={handleMouseEnter} и т.д. По-другому вы можете определить встроенный обработчик событий в JSX:

<button onClick={function handleClick() {
  alert('You clicked me!');
}}>

Или, более кратко, используя функцию стрелки:

<button onClick={() => {
  alert('You clicked me!');
}}>

Все эти стили эквивалентны. Инлайновые обработчики событий удобны для коротких функций.

Особенности передачи обработчиков событий

Функции, передаваемые обработчикам событий, должны отправляться, а не вызываться. Например:

отправка функции (верно)	вызов функции (неверно)
`<button onClick={handleClick}>`	`<button onClick={handleClick()}>`

Разница тонкая. В первом примере функция handleClick передается как обработчик события onClick. Это говорит React запомнить ее и вызывать функцию только тогда, когда пользователь нажимает кнопку. Во втором примере () в конце handleClick() запускает функцию сразу же во время рендеринга, без каких-либо кликов. Это связано с тем, что JavaScript внутри JSX { и } выполняется сразу.

Когда вы пишете код инлайном (определение в той же строке), та же ловушка проявляется по-другому:

отправка функции (верно)	вызов функции (неверно)
`<button onClick={() => alert('...')}>`	`<button onClick={alert('...')}>`

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

// Это оповещение срабатывает при рендеринге компонента, а не при нажатии!
<button onClick={alert('You clicked me!')}>

Если вы хотите определить инлайн (встроенный) обработчик событий, оберните его в анонимную функцию следующим образом:

<button onClick={() => alert('You clicked me!')}>

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

<button onClick={handleClick}> передает функцию handleClick.
<button onClick={() => alert('...')}> передает функцию () => alert('...').

Чтение пропсов в обработчиках событий

Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, при нажатии на которую отображается предупреждение с сообщением message:

function AlertButton({ message, children }) {
  return <button onClick={() => alert(message)}>{children}</button>;
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">Play Movie</AlertButton>
      <AlertButton message="Uploading!">Upload Image</AlertButton>
    </div>
  );
}

Это позволяет этим двум кнопкам отображать разные сообщения.

Передача обработчиков событий в качестве пропса

Часто требуется, чтобы родительский компонент указывал обработчик событий дочернего элемента. Рассмотрим кнопки: в зависимости от того, где вы используете компонент Button, вы можете захотеть выполнить другую функцию — возможно, одна воспроизводит фильм, а другая загружает изображение. Для этого передайте проп, который компонент получает от своего родителя, в качестве обработчика событий, например:

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return <Button onClick={handlePlayClick}>Play "{movieName}"</Button>;
}

function UploadButton() {
  return <Button onClick={() => alert('Uploading!')}>Upload Image</Button>;
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

Здесь компонент Toolbar отображает PlayButton и UploadButton:

PlayButton передает handlePlayClick в качестве пропса onClick внутренней кнопке.
UploadButton передает () => alert('Uploading!') в качестве пропса onClick для Button, который находится внутри.

Наконец, компонент Button принимает проп onClick. Он передает этот проп непосредственно встроенной в браузер кнопке <button> с onClick={onClick}. Это говорит React вызывать переданную функцию по клику. Если вы используете дизайн-систему, такие компоненты, как кнопки, обычно содержат стили, но не определяют поведение. Вместо этого такие компоненты, как PlayButton и UploadButton, будут передавать обработчики событий вниз.

Именование пропсов обработчика событий

Встроенные компоненты, такие как <button> и <div>, поддерживают только имена событий браузера, такие как onClick. Однако, когда вы создаете свои собственные компоненты, вы можете называть пропсы их обработчиков событий как угодно. По соглашению пропсы обработчиков событий должны начинаться с on, за которым следует заглавная буква. Например, проп onClick компонента Button можно было бы назвать onSmash:

function Button({ onSmash, children }) {
  return <button onClick={onSmash}>{children}</button>;
}

export default function App() {
  return (
    <div>
      <Button onSmash={() => alert('Playing!')}>Play Movie</Button>
      <Button onSmash={() => alert('Uploading!')}>Upload Image</Button>
    </div>
  );
}

В этом примере <button onClick={onSmash}> показывает, что браузерному <button> (нижний регистр) по-прежнему требуется проп onClick, но имя пропса, полученное вашим пользовательским компонентом Button, зависит от вас. Когда ваш компонент поддерживает несколько взаимодействий, вы можете назвать пропсы обработчика событий по именам конкретных действий. Например, компонент Toolbar получает обработчики событий onPlayMovie и onUploadImage:

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div>
      <Button onClick={onPlayMovie}>Play Movie</Button>
      <Button onClick={onUploadImage}>Upload Image</Button>
    </div>
  );
}

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

Обратите внимание, что компоненту App не нужно знать, что Toolbar будет делать с onPlayMovie или onUploadImage. Это деталь реализации компонента Toolbar. Здесь Toolbar передает их как обработчики onClick своим компонентам Button, но позже он также может запускать их с помощью сочетания клавиш. Именование пропсов в честь специфичных в приложении действий, таких как onPlayMovie, дает вам возможность изменить способ их использования позже.

Распространение события (Event Propagation)

Обработчики событий также будут перехватывать события от любых дочерних элементов вашего компонента. Мы говорим, что событие «пузырится» или «распространяется» вверх по дереву: оно начинается там, где произошло событие, а затем идет вверх по дереву. Этот <div> содержит две кнопки. И <div>, и каждая кнопка имеют свои собственные обработчики onClick. Как вы думаете, какие обработчики сработают, когда вы нажмете кнопку?

export default function () {
  return (
    <div
      className="Toolbar"
      onClick={() => {
        alert('You clicked on the toolbar!');
      }}
    >
      <button onClick={() => alert('Playing!')}>Play Movie</button>
      <button onClick={() => alert('Uploading!')}>Upload Image</button>
    </div>
  );
}

Если вы нажмете на любую кнопку, ее onClick будет запущен первым, а затем onClick родителя <div>. Таким образом, появятся два сообщения. Если вы щелкнете по самому Toolbar, запустится onClick только родительского элемента <div>. Все события в React распространяются, кроме onScroll, который работает только с тегом JSX, к которому вы его прикрепляете.

Остановка распространения события

Обработчики событий получают объект события в качестве единственного аргумента. По соглашению его обычно называют e, что означает "event" ("событие"). Вы можете использовать этот объект для чтения информации о событии. Этот объект события также позволяет остановить распространение. Если вы хотите, чтобы событие не достигало родительских компонентов, вам нужно вызвать e.stopPropagation(), как это делает этот компонент Button:

function Button({ onClick, children }) {
  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
    >
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div
      className="Toolbar"
      onClick={() => {
        alert('You clicked on the toolbar!');
      }}
    >
      <Button onClick={() => alert('Playing!')}>Play Movie</Button>
      <Button onClick={() => alert('Uploading!')}>Upload Image</Button>
    </div>
  );
}

При нажатии на кнопку:

React вызывает обработчик onClick, переданный <button>.
Этот обработчик, определенный в Button, делает следующее:
- Вызывает e.stopPropagation(), предотвращая дальнейшее всплытие события.
- Вызывает функцию onClick, которая является пропсом, переданным из компонента Toolbar.
Эта функция, определенная в компоненте Toolbar, отображает собственное оповещение кнопки.
Поскольку распространение было остановлено, обработчик onClick родительского элемента <div> не запускается.

В результате e.stopPropagation() при нажатии на кнопки теперь отображается только одно предупреждение (от <button>), а не два из них (от <button> и родительской Toolbar <div>). Клик по кнопке — это не то же самое, что клик по окружающему Toolbar, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.

Захват событий

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

<div
  onClickCapture={() => {
    /* запускается первым */
  }}
>
  <button onClick={(e) => e.stopPropagation()} />
  <button onClick={(e) => e.stopPropagation()} />
</div>

Каждое событие распространяется в три этапа:

Он перемещается вниз, вызывая все обработчики onClickCapture.
Он запускает обработчик onClick выбранного элемента.
Он перемещается вверх, вызывая все обработчики onClick.

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

Передача обработчиков как альтернатива распространению

Обратите внимание, как этот обработчик кликов запускает код, а затем вызывает проп onClick, переданное родителем:

function Button({ onClick, children }) {
  return (
    <button
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
    >
      {children}
    </button>
  );
}

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

Предотвращение поведения по умолчанию

С некоторыми событиями браузера связано поведение по умолчанию. Например, событие отправки <form>, которое происходит при нажатии кнопки внутри него, по умолчанию перезагружает всю страницу:

export default function Signup() {
  return (
    <form onSubmit={() => alert('Submitting!')}>
      <input />
      <button>Send</button>
    </form>
  );
}

Вы можете вызвать e.preventDefault() для объекта события, чтобы этого не произошло:

export default function Signup() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        alert('Submitting!');
      }}
    >
      <input />
      <button>Send</button>
    </form>
  );
}

Не путайте e.stopPropagation() и e.preventDefault(). Они оба полезны, но не связаны между собой:

e.stopPropagation() останавливает срабатывание обработчиков событий, прикрепленных к указанным выше тегам.
e.preventDefault() предотвращает поведение браузера по умолчанию для нескольких событий, которые его содержат.

Могут ли обработчики событий иметь побочные эффекты?

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

Резюме

Вы можете обрабатывать события, передавая функцию в качестве пропса элементу, такому как <button>.
Обработчики событий должны передаваться, а не вызываться. onClick={handleClick}, а не onClick={handleClick()}.
Вы можете определить функцию обработчика событий отдельно или встроенную (инлайн).
Обработчики событий определяются внутри компонента, поэтому они могут получить доступ к пропсам.
Вы можете объявить обработчик событий в родительском элементе и передать его в качестве пропса дочернему элементу.
Вы можете определить свои собственные пропсы обработчика событий с именами, специфичными для приложения.
События распространяются вверх. Вызовите e.stopPropagation() для первого аргумента, чтобы это предотвратить.
События могут иметь нежелательное поведение браузера по умолчанию. Вызовите e.preventDefault(), чтобы это предотвратить.
Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению события.

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