Components and JSX

In this lesson you will build the first real screen of the Brew & Bean website from small pieces called components, and learn the rules of JSX, the syntax React uses to describe the screen.

Prerequisites: the brew-and-bean project from *Start a React project with Vite*, running with npm run dev, and the JavaScript from *Modern JavaScript for React* (functions, template strings, ES modules).

A component is a JavaScript function that returns a piece of the user interface. Think of LEGO bricks: a header brick, a menu card brick, a footer brick. You snap them together to build a page, and you can reuse a brick as many times as you like.

Two rules make a function a component:

1. Its name starts with a capital letter (Header, not header). React uses the capital letter to tell your components apart from ordinary HTML tags like <header>. 2. It returns something React can draw, usually JSX.

function Greeting() {
  return <p>Welcome to Brew &amp; Bean</p>;
}

A complete component. Use it like a tag: <Greeting />.

JSX looks like HTML but it is JavaScript. A tool in Vite converts it into plain JavaScript calls before the browser sees it. Because it is not exactly HTML, a few rules differ.

class is a reserved word in JavaScript, which is why JSX uses className. The htmlFor attribute replaces for on labels for the same reason.

Inside curly braces you can put any JavaScript expression: a variable, a calculation, a function call, a template string, a ternary. You cannot put statements such as if or for there.

const shop = "Brew & Bean";
const price = 180;

const card = (
  <div className="card">
    <h3>{shop} Cappuccino</h3>
    <p>Price: ₹{price}</p>
    <p>With GST (5%): ₹{price * 1.05}</p>
  </div>
);

Braces drop a JavaScript value into the markup. Text inside JSX that is not in braces is plain text. Tax here is only for illustration.

We will make three components, each in its own file inside src/, and put them together in App. A common convention is one component per file, named after the component, with a default export.

export default function Header() {
  return (
    <header className="header">
      <h1>Brew &amp; Bean</h1>
      <p>Indiranagar, Bengaluru. Open 8 am to 10 pm. Pickup only.</p>
    </header>
  );
}

A header with the shop name. The & is how you write an ampersand in JSX text.

export default function MenuCard() {
  return (
    <article className="card">
      <h3>Espresso</h3>
      <p className="category">coffee</p>
      <p className="price">₹120</p>
    </article>
  );
}

One menu card with the content typed in directly. This is deliberately limited; the next lesson fixes it.

export default function Footer() {
  const year = new Date().getFullYear();

  return (
    <footer className="footer">
      <p>&copy; {year} Brew &amp; Bean, Indiranagar</p>
    </footer>
  );
}

Shows JavaScript running before the return: we compute the year, then use it with braces.

import Header from "./Header.jsx";
import MenuCard from "./MenuCard.jsx";
import Footer from "./Footer.jsx";

export default function App() {
  return (
    <>
      <Header />
      <main className="page">
        <h2>Today's menu</h2>
        <div className="menu-grid">
          <MenuCard />
          <MenuCard />
          <MenuCard />
        </div>
      </main>
      <Footer />
    </>
  );
}

App imports the other components and uses them as tags. The empty tags <> and </> are a fragment: a parent that adds nothing to the page.

Notice what you did: you wrote <MenuCard /> three times and got three cards. That is reuse. The problem is also clear: all three show Espresso. You need a way to give each card different data, and that is props, the next lesson.

Your components form a tree: App is the root, Header, main and Footer are its children, and each MenuCard is a child of the grid. When data changes, React re-runs the affected component functions, compares the new result with the old one, and updates only the parts of the real page that changed. You describe what the screen should look like; React works out how to get there.

Convert this HTML into a React component written in JSX (plain JavaScript). Keep the structure, change attributes to the JSX versions (className, htmlFor, camelCase events), self-close void tags, and wrap in a single parent or fragment. Name the component [ComponentName].

---
[paste your HTML]
---

Then list every change you made so I can learn the rules.

What to expect: Check class became className, void tags are self-closed, and the list of changes matches what the code actually does.