Шаг 3: Кнопка «Мне нравится»
Часть раздела Основы путешествия по React на Coddy — урок 41 из 42.
Задание
СреднеДобавьте лайки к карточке.
- Добавьте в
ProfileCardсостояниеlikes, начальное значение которого равно 0. - Добавьте кнопку с
id="like"и текстомLike, которая добавляет один лайк при каждом клике. - Отобразите количество лайков в
<span>сid="likes".
Попробуйте сами
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>Все уроки раздела Основы
1Знакомство с React
Что такое React?Ваш первый компонентПравило одного родителяJSX — это не HTMLИтоги: Знакомство с React2Выражения JSX
Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX5Состояние и события
Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события8Проект: Карточка профиля
Шаг 1: Структура карточкиШаг 2: Карточка с пропсамиШаг 3: Кнопка «Мне нравится»Шаг 4: Переключатель подписки