BitWithBite
Full-Stack · Quick Reference
Lesson 20 — Components, JSX & Props Cheat Sheet
In one line: A React component is a function returning JSX; props pass data one-way from parent to child.
Key Ideas
1Component. A function that returns JSX.
2JSX. HTML-like syntax compiled to React.createElement().
3Props. Read-only data passed parent → child.
4One-way data flow. Children never mutate parent data directly.
5className. JSX's version of the HTML "class" attribute.
Example
function UserCard({ name, role }) {
return (
<div className="card">
<h3>{name}</h3>
<p>{role}</p>
</div>
);
}
<UserCard name="Aisha" role="Developer" />