BitWithBite
Full-Stack Worksheet
⚙️ Components, JSX & Props
SCORE___ / 20
NameClassDate
After this worksheet you can
Write a functional componentPass and read propsExplain one-way data flowUse JSX syntax correctly📚 Quick Recap
🎯 What you'll practice: Functional components, JSX, and passing data via props.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1A React component is fundamentally a:
2Props are:
3JSX's version of the "class" attribute is:
4Data flows in React:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5JSX compiles down to calls of React.().
6Props are accessed inside the component function as a single parameter (or destructured).
7Write a Greeting component that accepts a "name" prop and renders "Hello, {name}!"
8Write the JSX to use that Greeting component with name="Sam".
9Why can't a child component directly change the value of a prop it receives?
🚀 Section C · Challenge ● CHALLENGE 5
10Design a ProductCard component that takes title, price, and an onAddToCart function as props. Write the component and an example usage.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = createElement 6 = props 7 = function Greeting({name}){return <p>Hello, {name}!</p>;} 8 = <Greeting name="Sam" /> 9 = Props are owned and controlled by the parent; React's one-way data flow means only the parent that passed a prop can change it (usually by updating its own state), keeping data flow predictable and traceable | 10 = function ProductCard({title,price,onAddToCart}){return <div><h3>{title}</h3><p>${price}</p><button onClick={onAddToCart}>Add to Cart</button></div>;} used as <ProductCard title="Mug" price={12} onAddToCart={handleAdd} />