Итоги

В этом уроке вы узнали, что:

• Обработчик записывается прямо в JSX, onClick={handleClick}, а сама функция пишется внутри компонента. Названия событий начинаются с on и пишутся в camelCase: onClick, onChange.
• onClick получает функцию, а не её вызов. onClick={handleClick()} вызывает функцию при отрисовке компонента, и клики после этого ничего не делают.
• Чтобы передать аргумент, оберните вызов в стрелочную функцию: onClick={() => handleVote(band.name)}.
• Обработчик с параметром получает объект события. event.target — это элемент, в котором произошло событие. onChange текстового поля приходит после каждого изменения текста, а event.target.value — это сам текст.
• Функция может быть пропсом: <BandCard onVote={handleVote} />, а дочерний компонент вызывает её: onVote(band.name). По соглашению пропсы для обработчиков называют onSomething, а функции-обработчики — handleSomething.
• Изменение переменной в обработчике не меняет страницу. React об этом не знает, а при каждой отрисовке функция компонента выполняется заново с самого начала.

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

Но сначала немного практики: лавка с мерчем на фестивале, где корзина пока только выводит текст.