Course Content
Mastering React
1. Introduction to React
What is React?Web Application ArchitecturesVirtual DOM and Browser DOMJSXRender Element to DOM TreeChallenge: Render ElementComponentsChallenge: Functional ComponentsConditional RenderingChallenge: Render Content ConditionallyRender a Data CollectionChallenge: Render Collection"Introduction to React" Section Sum Up
Mastering React
Challenge: Render Element
Note
All challenges may appear broken by default since they contain whitespace sections where you need to input the necessary code. Once you correctly fill in these whitespace sections, the completed code will be displayed on the live page.
Task 1
Create the product card and render it to the DOM. The product card needs:
- The product image (
img
element).src
attribute must be equal to theimageUrl
variable.alt
attribute must be equal to the stringComputer
.width
attribute must be equal to the256
.
- The product title (
h3
element).- Its text content must be
Computer
.
- Its text content must be
- The product price (
span
element).- Its text content must be
Price: $129.99
.
- Its text content must be
- The product description (
p
element).- Its text content must be
New Model
.
- Its text content must be
Hint
1.
2.
3.
3.
src
attribute must contain the imageUrl
variable
as a value. Also, as it is not the string, we must set it in the curly
braces {...}
. 2.
alt
attribute must contain the string
Computer
as a value. It is the string. We can set in the quotes
"..."
. 3.
width
attribute must contain the number 256
as a
value. It is not the string. We set in in the curly braces
{...}
. 3.
h3
, span
, and p
elements must have
correct values.
Everything was clear?
Section 1. Chapter 6