Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Render an Element in React | React Basics and First UI
Introduction to React

bookChallenge: Render an Element in React

Swipe to show menu

Note
Note

All challenges may appear incomplete by default. They include empty sections where you need to add the required code. Once all missing parts are filled in correctly, the completed code will be rendered on the live page.

Each challenge includes two helper buttons:

  • Hint: shows small clues to guide you;
  • Solution: opens the completed version in a new tab.

You can also watch the short video tutorial below to learn how to work with CodeSandbox.

How to work with Code Sandbox

Task: Creating a Product Card

Create a simple product card using JSX and render it to the DOM. The product card must include:

  1. The product image (img element).
    • src attribute must be equal to the imageUrl variable.
    • alt attribute must be equal to the string Computer.
    • width attribute must be equal to the 256.
  2. The product title (h3 element).
    • Its text content must be Computer.
  3. The product price (span element).
    • Its text content must be Price: $129.99.
  4. The product description (p element).
    • Its text content must be 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ย h3,ย span, andย pย elements have correct values.
Everything was clear?

How can we improve it?

Thanks for your feedback!

Sectionย 1. Chapterย 5

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Sectionย 1. Chapterย 5
some-alt