Components and JSX
Building with components
A React component is a JavaScript function that returns something that looks like HTML:
export default function HomePage() {
return <h1>Corner Café</h1>;
}That HTML-like code is JSX. It looks like HTML, but it's really JavaScript — so there are a few rules:
| Rule | Example |
|---|---|
| Component names start with a capital letter | function MenuCard(), used as <MenuCard /> |
Return one outer element — use <>…</> (a fragment) to group without extra HTML | <><h1>…</h1><p>…</p></> |
Use className, not class | <p className="intro"> |
| Close every tag, even empty ones | <img />, <br /> |
| Curly braces put JavaScript inside JSX | <p>{2 + 2}</p> shows 4 |
Why components?
Instead of copying the same HTML for 14 menu items, you write one MenuCard component and use it 14 times. Change it once, and every card updates.
Files and folders
Reusable components usually live in a components/ folder, and data and helpers in lib/. A component file exports the component, and other files import it:
import MenuCard from "@/components/MenuCard";Try it
Make a component components/OpeningHours.tsx that returns a short paragraph of opening hours, and use it on the home page.