Why does React use "className" instead of the standard HTML "class" attribute?

JSX may look like HTML, but it is actually a syntax extension for JavaScript. Because "class" is a reserved keyword in the JavaScript language, React uses "className" to avoid syntax conflicts. This follows a broader pattern in JSX where most attributes use camelCase naming conventions, such as "onClick" instead of "onclick," to align with JavaScript’s DOM property naming.

What is a Fragment and when should I use it?

A Fragment is a built-in React feature that allows you to group multiple elements together without adding an extra, unnecessary node to the actual HTML DOM. In JavaScript, a function can only return one value, so JSX requires a single root element. Using a Fragment—which looks like empty angle brackets—satisfies this requirement while keeping your rendered HTML clean and preventing extra "div" tags from breaking CSS layouts like Flexbox or Grid.

What is the difference between an expression and a statement inside JSX curly braces?

Curly braces in JSX act as a "JavaScript Mode" switch that only accepts expressions. An expression is a piece of code that evaluates to a specific value, such as a variable name, a math operation, or a ternary operator. Statements, such as "if" blocks or "for" loops, do not result in a single value and cannot be placed directly inside JSX. To handle complex logic, you should perform the "chopping and dicing" of data above the return statement and assign the result to a variable.

Why is it discouraged to use a list index as a "key" prop?

The "key" prop serves as a stable identity that helps React track which items in a list have changed, been added, or been removed. If you use the array index as a key and the list is reordered or an item is deleted, the indexes change, which can confuse React's reconciliation process. This often leads to UI bugs, such as a checkbox or input state "jumping" to the wrong list item. It is best practice to use a unique, stable ID from your data source.

How does JSX protect applications from Cross-Site Scripting (XSS) attacks?

By default, React automatically escapes all values embedded in JSX before rendering them to the screen. This means that if a user inputs a malicious script tag, React treats it as literal text rather than executable code. If a developer intentionally needs to render raw HTML from a trusted source, they must use the "dangerouslySetInnerHTML" attribute, which serves as an explicit warning that the action carries security risks.

Why JSX Isn't Just HTML

24 min

Mar 31, 2026

Technology Education Career

Struggling with React syntax errors? Learn why JSX requires className and self-closing tags so you can write cleaner JavaScript code without the bugs.

Best quote from Why JSX Isn't Just HTML

JSX looks like HTML, but it’s actually JavaScript in disguise. Think of the curly braces as a 'JavaScript Mode' switch that acts as a bridge between your logic and your UI.

This audio lesson was created by a BeFreed community member

Input question

Teach JSX basics: embedding JavaScript expressions, className vs class, self-closing tags, and why JSX is not HTML. Mention common beginner mistakes. Keep examples tiny and spoken-friendly.

Host voices

Lena

Jackson

Learning style

Fun

Knowledge sources

Frequently Asked Questions

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

1.5K Ratings4.7

Start your learning journey, now

Why JSX Isn't Just HTML

24 min

Mar 31, 2026

Technology Education Career

Struggling with React syntax errors? Learn why JSX requires className and self-closing tags so you can write cleaner JavaScript code without the bugs.

Best quote from Why JSX Isn't Just HTML

JSX looks like HTML, but it’s actually JavaScript in disguise. Think of the curly braces as a 'JavaScript Mode' switch that acts as a bridge between your logic and your UI.

Key Takeaways

Unmasking the HTML Illusion

0:00

Lena: You know, Jackson, I was looking at some React code earlier and I honestly thought I was just looking at a standard HTML file with some extra spice. But then I tried to use a simple "class" attribute for styling, and my console basically had a meltdown.

0:15

Jackson: Oh, the classic "Invalid DOM property" warning! It’s such a rite of passage. That’s the big reality check: JSX looks like HTML, but it’s actually JavaScript in disguise. Since "class" is a reserved keyword in JavaScript, React makes us use "className" instead. It’s one of those small syntax rules that makes a massive difference in how your code behaves.

0:37

Lena: Exactly! And it’s not just the naming. I noticed that if you forget a self-closing slash on something like an image tag, the whole app breaks.

0:46

Jackson: Right, because in JSX, every single tag must be closed. We’re going to break down why these rules exist and how to use those magic curly braces to bridge the gap between your logic and your UI. Let’s dive into the basics of making JSX work for you.

The Building Blocks of JavaScript XML

The Power of the Curly Braces

The Self-Closing Tag Requirement

Lists, Keys, and the Dreaded Index

Security and the HTML Safety Net

The Practical Playbook for Clean JSX

Final Reflections and Next Steps

This audio lesson was created by a BeFreed community member

Input question

Teach JSX basics: embedding JavaScript expressions, className vs class, self-closing tags, and why JSX is not HTML. Mention common beginner mistakes. Keep examples tiny and spoken-friendly.

Host voices

Lena

Jackson

Learning style

Fun

Knowledge sources

Frequently Asked Questions

More like this

24 sources

How JSX Works Under the Hood

32 min

Accelerate: The Science of Lean Software and DevOps

24 sources

React architecture is more than just code

22 min

The Internet Is Not What You Think It Is

Israel: A Concise History of a Nation Reborn

27 sources

React Essentials: From jQuery Chaos to Modern Web

24 min

25 sources

React State: Why Your Components Need Internal Memory

31 min

25 sources

React state mistakes and why you should derive data

22 min

23 sources

React Components: Functional vs Class Deep Dive

42 min

Developing Backbone.js Applications

Addy Osmani

8 min

Clean Code

Robert C. Martin

9 min

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

From Columbia University alumni built in San Francisco

BeFreed Brings Together A Global Community Of 1,000,000 Curious Minds

See more on how BeFreed is discussed across the web

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."

@Moemenn

"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."

@Chloe, Solo founder, LA

117

"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."

@Raaaaaachelw

"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."

@Matt, YC alum

108

"Reading used to feel like a chore. Now it’s just part of my lifestyle."

@Erin, Investment Banking Associate , NYC

254

"Feels effortless compared to reading. I’ve finished 6 books this month already."

@djmikemoore

"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."

@Pitiful

4.5K

"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."

@SofiaP

"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"

@Jaded_Falcon

201

"It is great for me to learn something from the book without reading it."

@OojasSalunke

"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."

@Leo, Law Student, UPenn

483

"Makes me feel smarter every time before going to work"

@Cashflowbubu

1.5K Ratings4.7

Start your learning journey, now