Обработка кликов

В курсе JavaScript кнопка срабатывала в три шага: вы находили её через querySelector(), писали функцию и передавали её в addEventListener(). В React искать элементы на странице не нужно. Обработчик пишется прямо в JSX, как атрибут кнопки:

export default function App() {
    function handleHello() {
        console.log("Привет с фестиваля!");
    }

    return <button onClick={handleHello}>Поздороваться</button>;
}

Каждый клик по кнопке выводит строку в консоль:

Привет с фестиваля!

Что здесь нового:

• onClick — это on и название события в camelCase, как и className. В React есть такой атрибут для каждого знакомого вам события: onClick, onChange, onSubmit, onKeyDown и других.
• Его значение записано в фигурных скобках, потому что это JavaScript: функция handleHello. React запоминает её и вызывает при каждом клике, как это делал addEventListener().
• Функция лежит внутри компонента, рядом с JSX, к которому относится. Именно там в React и живут обработчики. Им доступно всё, что есть у компонента: его переменные, его пропсы и, совсем скоро, его состояние.

Функция, которая обрабатывает событие, — это обработчик, как и в курсе JavaScript. В React-приложениях её имя обычно начинается с handle и говорит, что именно она обрабатывает: handleClick, handleBuy, handleVote. Это всего лишь соглашение, React на имена всё равно, но так сразу видно, какие функции — обработчики.

Типичные ошибки:

• Скобки после имени: onClick={handleHello()}. Так React получает не функцию. Функция вызывается сразу, пока отрисовывается компонент. Об этом — викторина после этого упражнения.
• onclick маленькими буквами, как в HTML. React такого атрибута не знает, поэтому клики ничего не делают, а предупреждение в консоли подскажет, что не так.