Video 50-1 Module Introduction, site resources,
figma
Video 50-2 Header Component, logo position, set nav
menu
Video 50-3 Shop Component Layout, load data and set
state
Video 50-4 Product Component, component layout,
display data
Video 50-5 Style Product Cart, style debug and
button position
Video 50-6 (advanced) set eventhandler, pass
eventhandler to child
Video 50-7 (advanced) Cart state setup,
react-fontawesome, display icon
Video 50-8 Module summary and deploy to surge or
netlify
QUIZ
Q1: What is the purpose of the key prop used in
react?
Ans: It can efficiently identify the changes in virtual dom
Q2: How will you import useState in React?
Ans: import{useState} from 'react'
Q3: const [count, setCount] =useState(0)
What should you do to increase the count state?
Ans: setCount(count+1)
Q4: Can we pass a function through props?
Ans: Yes
Q5: If A and B are siblings of components that
share a common state, where should you declare the state?
Ans: In their parent Component
Q6: What does the package.json file do? (Search on
Google Mama)
Ans: It records important metadata about a project
Q7: Which is the correct way to call the function
inside a button in React?
const handleAdd = ( item ) => {
console.log(item)
}
Ans: <
button onClick={() => handleAdd(item)}>
<
/button>
Q8: How will you set a clickhandler on a Button
using React?
<button ________= {handleClick}>Click me</button>
Ans: onClick
Q9: Where can we call react hooks?
Ans: At the top level of React function.
