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

Примітка

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

Крім того, кожне завдання має дві кнопки: Підказка та Розв'язок. Натискання на Підказка надає короткі підказки до поточного завдання, а вибір кнопки Розв'язок відкриває нову вкладку з готовим розв'язанням завдання.

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

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

Створіть картку продукту та відобразьте її в 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. Розділ 7

Запитати АІ

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

Suggested prompts:

Can you explain how to use the Hint and Solution buttons?

What should I do if the live page doesn't render after making changes?

Can you walk me through creating the product card step by step?

Awesome!

Completion rate improved to 2.17

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