React Workshop Series

Day 1 — What is JSX?

Day 1 · Topic 3 of 15Teaching & theory

Foundations & build/What is JSX?

3

What is JSX?

Slide companion · 32–33

Your takeaway: Recognise HTML-like JSX inside a JavaScript component and distinguish it from a separate HTML file.

Core concept · after project setup

You just created a Next.js project. When you open a file like page.js, you will see something that looks like HTML inside JavaScript. That mix is called JSX.

What is JSX?

  • JSX stands for JavaScript XML.
  • It lets us write HTML-like tags directly inside React.
  • That makes building the page much easier — you see the UI shape in your code.

Still not sure?

JSX = HTML + JavaScript working together

Think of it like this: HTML describes what the page looks like. JavaScript adds logic. JSX is how React lets you write both in one place.

Look at the difference:

Normal HTML (in a .html file)
1<!-- Normal HTML -->
2<h1>Hello World</h1>
JSX (inside React)
1// JSX — HTML-looking tags inside a JavaScript function
2function Greeting() {
3  return <h1>Hello World</h1>;
4}
Facilitator noteShow note
Advice from us: you do notneed to memorize the word "XML". Just remember: JSX looks like HTML, but it lives inside your React / JavaScript files (like .js or .jsx).

Common first-day confusion

If you open src/app/page.js and see <div> or <h1> tags, that is normal — that is JSX. You are not editing a separate .html file for this workshop.

Checkpoint

Open your project in VS Code, find src/app/page.js, and point to one JSX tag (for example <main> or <h1>). Next we will map the full file structure.