Функции — отличный способ повторно использовать код при написании на ванильном Javascript. Это может сэкономить вам много времени и сделать ваш код чище и легче для чтения. Однако в React вы пишете свой код как класс или функциональные компоненты, которые также можно повторно использовать, передавая реквизиты. Я предполагаю, что вы прочитали сотни сообщений в блогах о том, как create-react-app так что давайте вообще пропустим эту часть и просто начнем!

Мы создадим два простых компонента-кнопки, которые, естественно, будут console.log() «Привет», а другой — «Шайа Лабаф». В нашей папке /src давайте создадим подпапку с именем «components» и создадим наш компонент Button. Ваша файловая структура должна выглядеть так:

Давайте сделаем этот компонент функциональным компонентом. React Hooks были в моде в прошлом году, поэтому я предлагаю вам погуглить, если вы о них не слышали. Вот как теперь выглядит наш компонент Button:

import React from "react";
const Button = () => <button>something</button>;
export default Button;

Вау.

Теперь давайте перейдем к нашему файлу App.js и заменим начальный шаблон, который поставляется с create-react-app, двумя нашими компонентами Button. Не забудьте импортировать его вверху!

import React from "react";
import "./App.css";
import Button from "./components/Button";
function App() {
  return (
    <>
      <Button />
      <Button />
    </>
  );
}
export default App;

Запуск npm start в вашем терминале оживит наш прекрасный веб-сайт. Просто две кнопки с надписью «что-то» в верхнем левом углу на белом фоне. Эй, я учу вас многоразовым компонентам, а не стилям.

Итак, в нынешнем виде у нас есть две кнопки, которые выглядят совершенно одинаково и делают одно и то же (ничего). Если вы обратили внимание, чтобы заставить одну и ту же кнопку делать разные вещи, вам нужно передать ей реквизиты от ее родителя. В данном случае это App.js.

Давайте различать две кнопки «что-то», передав им свойства label:

// App.js
<Button label="Hello" />
<Button label="Shia LaBeouf" />

И, получив реквизит в качестве аргумента, а затем вызвав эти реквизиты:

// Button.js
const Button = props => <button>{props.label}</button>;

Теперь взгляните на свой сайт. Одна кнопка говорит «Привет», а другая, естественно, говорит «Шиа». Думаю, вы понимаете, к чему я клоню с этим «реквизитом».

Давайте добавим наши обработчики onClick, которые будут выполнять функцию для записи текста в нашу консоль:

// Button.js
const Button = props => 
  <button onClick={props.log}>
    {props.label}
  </button>;
// App.js
const log = e => {
  console.log(e.target.textContent);
};
function App() {
  return (
    <>
      <Button label="Hello" log={log} />
      <Button label="Shia LaBeouf" log={log} />
    </>
  );
}

Теперь взгляните на свою консоль, когда вы нажимаете на одну из кнопок. Мы просто использовали один и тот же компонент Button, назвав его двумя разными именами и записав два разных имени в консоль. Это то, что люди называют повторно используемыми компонентами, и в этом сила React!