BitWithBite
React · Quick Reference
Lesson 4 — Components & Props Cheat Sheet
In one line: Props pass data one-way from parent to child; callbacks let the child notify the parent instead of modifying props directly.
Key Ideas
1Props. Passed as attributes, read-only.
2Destructuring. ({ title, lessons, free })
3Conditional. {cond && <X/>} or {cond ? A : B}
4Callback props. onEnroll={(id)=>handleEnroll(id)}
Example
function CourseCard({title, free, onEnroll}) {
return <div>
<h2>{title}</h2>
{free && <span>FREE</span>}
<button onClick={()=>onEnroll(title)}>Enroll</button>
</div>;
}