02. JSX: HTML in JavaScript

JSX looks like HTML, with a few rules: one parent element, className instead of class, and every tag closed.

JSX looks like HTML, but it's JavaScript underneath, so a few things are different:

1. A component returns one element: wrap several in a <div> (or <>…</>, an empty wrapper called a fragment). 2. Write className, not class (class is a JavaScript word). 3. Close every tag: <img />, <br />, <input />.

JSX

1export default function App() {2  return (3    <>4      <h1 className="title">Our school trip</h1>5      <img src="https://picsum.photos/200" alt="The hills" />6      <p>Leaving at 7 am. Bring water!</p>7    </>8  );9}

When JSX goes over several lines, wrap it in round brackets after return, so JavaScript knows it all belongs together.

Your turn

1Steps

1Build a little contact card. Inside a <div className="card">, show an <h2> with the name Asha Rao, an <hr />, and a <p className="phone"> with 98450 12345.
2Use className (not class), and close the <hr />.

Write your component in App.jsx, as export default function App(); the preview shows it as you type.

Starting code

The editor starts empty. Copy this into it to begin, or write your own from scratch.

JSX

1export default function App() {2  return (3    <h2>Asha Rao</h2>4    <p>98450 12345</p>5  );6}

2Expected output

Your page should have

There's a div with the class card
The card's heading says Asha Rao
There's a line (<hr>) in the card
The phone number is in p.phone
App.jsx uses className, not class

Submit answer checks each of these.

3Hints

Stuck? Open one hint at a time: each gives a bit more help.

Hint 1

The starting code returns two elements side by side: React needs one parent around them.

Hint 2

Wrap everything in <div className="card"> … </div>, and put <hr /> between the heading and the paragraph.

Hint 3

The paragraph is <p className="phone">98450 12345</p>.