Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Челендж: Рендеринг Елемента | Вступ до Основ React
Опановуємо React
course content

Зміст курсу

Опановуємо React

Опановуємо React

4. React в Реальному Світі

bookЧелендж: Рендеринг Елемента

Примітка

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

Кожен челендж також має дві кнопки: Hint та Solution. При їхньому натисканні відкриється підказка до завдання або нова вкладка із вирішеним завданням і робочим проектом.

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

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

Створіть картку товару і відрендерите її в DOM. Картка товару потребує:

  1. Зображення товару (елемент img).
    • Атрибут src повинен дорівнювати змінній imageUrl.
    • Атрибут alt повинен дорівнювати рядку Computer.
    • Атрибут width повинен дорівнювати значенню 256.
  2. Назва товару (елемент h3).
    • Його текстовий вміст повинен бути Computer.
  3. Ціна товару (елемент span).
    • Його текстовий вміст повинен бути Price: $129.99.
  4. Опис товару (елемент p).
    • Його текстовий вміст повинен бути New Model.
  1. The src attribute must contain the imageUrl variable as a value. Use curly braces {}.
  2. The alt attribute must contain the string "Computer" as a value. Enclose it in double quotes.
  3. The width attribute must contain the number 256 as a value. Use curly braces {}.
  4. Ensure that the h3span, and p elements have correct values.
Все було зрозуміло?

Як ми можемо покращити це?

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

Секція 1. Розділ 7
We're sorry to hear that something went wrong. What happened?
some-alt