Menu
Coddy logo textTech
НАЧАТЬ УЧИТЬСЯ
flag Ru iconРусскийdown icon

Шаг 4: Переключатель подписки

Часть раздела Основы путешествия по React на Coddy — урок 42 из 42.

challenge icon

Задание

Средне

Завершите карточку профиля.

  1. Добавьте логическое состояние following (начальное значение false) в ProfileCard.
  2. Добавьте кнопку с id="follow", которая переключает это состояние при клике.
  3. Текст кнопки — Following, когда состояние равно true, и Follow, когда false.

Попробуйте сами

<!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Итоги: Знакомство с React

4Пропсы (Props)

Что такое пропсы?Передача пропсовДва пропсаТот же компонент, новые данныеПроп childrenИтоги: пропсы

7Условия и списки

Тернарный рендерингОтображение с помощью &&Рендеринг спискаВажность ключейФильтрация, затем отображениеИтоги: Условия и списки

2Выражения JSX

Фигурные скобкиМатематика в скобкахСкобки в атрибутахВызов функций в JSXИтоги: Выражения JSX

5Состояние и события

Что такое состояние?Счетчик кликовСчетчик с шагомПереключение с помощью состоянияНезависимое состояниеИтоги: Состояние и события

8Проект: Карточка профиля

Шаг 1: Структура карточкиШаг 2: Карточка с пропсамиШаг 3: Кнопка «Мне нравится»Шаг 4: Переключатель подписки

3Компоненты

Базовые элементыВаш второй компонентПовторное использование компонентовСоздание страницы из компонентовИтоги: Компоненты

6Формы и поля ввода

Управляемые поля вводаВывод введенных данныхСчетчик символовКнопка очисткиИтоги: Формы и поля ввода