When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

• Product pages, login forms, and todo lists all use components, props, and state.
• When a user types in a search box, React state holds the text and filters a list.

Real-world: Practo appointment booking UI

Practo booking screen mixes HTML structure with JavaScript expressions — doctor name, slot time, and fee come from variables, not hard-coded text.

Production-style code

function AppointmentSlot({ doctor, slot, fee, onBook }) {
  const isEvening = slot.hour >= 17;
  return (
    <div className="slot-card">
      <h3>{doctor.name}</h3>
      <p>{doctor.specialty}</p>
      <time dateTime={slot.iso}>{slot.label}</time>
      <p className="fee">Consultation: ₹{fee}</p>
      {isEvening && <span className="badge">Evening slot</span>}
      <button type="button" onClick={() => onBook(slot.id)}>Book</button>
    </div>
  );
}

What happens in production: Designers hand off Figma frames; developers translate them to JSX with dynamic data — one language for structure and logic.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function Welcome() {
  const name = 'Ravi';
  return (
    <div className="card">
      <h1>Hello, {name}!</h1>
    </div>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Use className instead of class.
• Put JavaScript expressions inside curly braces { }.
• The return must have one parent element (or use a Fragment <>).

Do this on your computer

1. Add a variable and show it inside { } in JSX.
2. Try className="title" on a div.
3. Wrap multiple siblings in <> ... .
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

JSX = HTML-like syntax in JavaScript. Use { } for dynamic values and className for CSS classes.

Common questions