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

Шаг 2: Карточка с пропсами

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

challenge icon

Задание

Легко

Сделайте карточку многоразовой.

  1. Определите ProfileCard, получающий пропсы name и bio, и рендерящий ту же структуру, что и на этапе 1 (div с классом card, id="profile-name", id="profile-bio") со значениями пропсов.
  2. В App отрендерите один ProfileCard с name Grace Hopper и bio Invented the compiler.

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

<!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Формы и поля ввода

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