C
React list
Previous2 / 22Next
React/Getting Started/Lesson 02

JSX Syntax

25 min·theory
This chapter
2/2
JavaScript

JSX Syntax

💡 Why Should You Learn This?

🎯 This is essential syntax for building websites with React.
💼 It is easy to learn because it mixes HTML and JavaScript together.
⚡ It is the foundational skill that every React developer uses every day.
🏢 실무에서는
In professional practice, JSX is used to build UI elements such as buttons, forms, and cards. For example, an e-commerce developer writes a product listing screen in JSX, which is then compiled into JavaScript code and rendered in the browser.

What Is JSX? — JavaScript That Looks Like HTML

JSX is a syntax for writing UI that looks like HTML, right inside JavaScript.

jsx
// This is JSX — it's JavaScript code, not HTML!
const element = <h1>Hello!</h1>;

Browsers don't understand JSX, so Vite/Webpack automatically transforms it for you:

js
// Actually transformed like this (we don't need to see it)
const element = React.createElement('h1', null, 'Hello!');

> 💡 It's enough to think of it as "just write it like HTML."

Using JavaScript in JSX — Curly Braces {}

To use a JavaScript expression inside JSX, wrap it in curly braces {}.

jsx
const name = "Hong Gil-dong";
const age = 25;

// Put JS values/expressions inside {}
return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>Age: {age} years old</p>
    <p>Next year's age: {age + 1} years old</p>
    <p>Adult status: {age >= 18 ? "Adult" : "Minor"}</p>
  </div>
);
💻 JSX Rules at a Glance 
// ✅ 1. Must be wrapped in a single parent tag
return (
  <div>          {/* Parent tag */}
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

// ✅ 2. class → className (class is a JS reserved word)
return <div className="container">Content</div>;

// ✅ 3. Self-closing tags require /
return <img src="photo.jpg" />;   // In HTML, /> is optional, but in JSX it's required

// ✅ 4. Styles as objects
return (
  <h1 style={{ color: 'red', fontSize: '24px' }}>
    Red Title
  </h1>
);

⚛️ React Pattern — JSX Syntax

Follow along step by step with code examples to see how JSX syntax is used in React.
1 🧩 1. JSX Syntax Use Case
Situations where this feature is needed.
↓
2 💻 2. Writing the Code
Basic usage of JSX syntax.
↓
3 🎨 3. Rendered Result
What the user sees on screen.
↓
4 💡 4. Pro Tips
Common pitfalls and best practices.

🎮 JSX Syntax — Step-by-Step Understanding

Click each step to read the content, then use the ✓ Got it button to track your progress.
🖥️ Result — rendered React component
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — see the result first, then edit the code yourself.

Check Your Understanding

What is the correct way to specify a CSS class in JSX?
💡 In JSX, you must use `className` instead of `class`. This is because `class` is a reserved keyword in JavaScript (used for class declarations) and cannot be used as an attribute name.
Read this first: Introduction to React
Up next: Component Basics
PreviousListNext
JSX Syntax - React