Шаг 1: Структура карточки

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

Задание

Легко

Создайте каркас карточки в App.jsx:

<div> с className="card".
Внутри него: <h2> с id="profile-name" и текстом Ada Lovelace.
Под именем: <p> с id="profile-bio" и текстом First programmer.

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

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

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