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

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

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
some-alt