Вивчайте Завдання: Відобразити Елемент у React | Основи React та Перший Інтерфейс Користувача

Примітка

Усі завдання можуть виглядати незавершеними за замовчуванням. Вони містять порожні секції, куди потрібно додати необхідний код. Після того, як усі відсутні частини будуть правильно заповнені, завершений код відобразиться на сторінці в реальному часі.

Кожне завдання містить дві допоміжні кнопки:

Підказка: показує невеликі підказки для орієнтації;
Розв'язок: відкриває готовий варіант у новій вкладці.

Ви також можете переглянути короткий відеоурок нижче, щоб дізнатися, як працювати з CodeSandbox.

Як працювати з Code Sandbox

Завдання: Створення картки продукту

Створіть просту картку продукту за допомогою JSX і відобразіть її у DOM. Картка продукту повинна містити:

Зображення продукту (img елемент).
- Атрибут src має дорівнювати змінній imageUrl.
- Атрибут alt має дорівнювати рядку Computer.
- Атрибут width має дорівнювати 256.
Назва продукту (h3 елемент).
- Текстовий вміст має бути Computer.
Ціна продукту (span елемент).
- Текстовий вміст має бути Price: $129.99.
Опис продукту (p елемент).
- Текстовий вміст має бути New Model.

Атрибут src має містити змінну imageUrl як значення. Використовуйте фігурні дужки {}.
Атрибут alt має містити рядок "Computer" як значення. Візьміть його у подвійні лапки.
Атрибут width має містити число 256 як значення. Використовуйте фігурні дужки {}.
Переконайтеся, що елементи h3, span та p мають правильні значення.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 1. Розділ 5

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Свайпніть щоб показати меню