Why can't I use the standard "class" attribute for CSS styling in JSX?

In JSX, you must use "className" instead of "class" because JSX is actually JavaScript in disguise rather than pure HTML. Since "class" is a reserved keyword in the JavaScript language, React requires the use of "className" to avoid syntax conflicts. This follows a broader pattern in JSX where most attributes are written in camelCase to align with JavaScript naming conventions, such as using "onClick" instead of "onclick."

What is a Fragment and when should I use one?

A Fragment is a built-in React feature that allows you to group multiple elements together without adding an extra node to the DOM. It is written as an empty set of angle brackets. You should use Fragments to satisfy the "Single Root" rule, which dictates that a component function can only return one parent element. Using a Fragment instead of a div prevents unnecessary clutter in your HTML structure, which helps maintain clean layouts and avoids breaking CSS tools like Flexbox or Grid.

What is the "Zero Trap" in conditional rendering?

The "Zero Trap" occurs when using the logical AND operator (&&) to conditionally render UI based on a numeric value. In JavaScript, the number zero is considered "falsy," but React will still render "0" as a literal value on the screen. To avoid having a stray zero appear in your layout when a count is zero, you should convert the condition into a proper boolean, such as "count > 0," or use a ternary operator to explicitly return "null."

Why is it discouraged to use an array index as a "key" prop when rendering lists?

Using an array index as a key can lead to significant UI bugs because the index is not a stable identity. If the list is reordered, filtered, or an item is deleted, the index for a specific piece of data changes, which confuses React's ability to track that element's state. This can cause issues like checkmarks or form inputs "jumping" to the wrong items. Instead, you should always use a unique, stable ID from your data, such as a database ID.

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

JSX provides built-in security by automatically escaping all values embedded within it before they are rendered. This means that if a user inputs malicious code, such as a script tag, React treats it as literal text rather than executable code. If a developer intentionally needs to render raw HTML, they must use the "dangerouslySetInnerHTML" attribute, which serves as a loud, clear warning that the developer is opting into a potential security risk.

Why JSX Isn't Just HTML

24分

2026年3月31日

Technology Education Career

Struggling with React syntax errors? Learn why className and self-closing tags matter so you can write cleaner JavaScript and build better interfaces.

Why JSX Isn't Just HTMLのベスト引用

JSX is 'syntactic sugar'—a shorthand that makes our lives easier while the computer does the heavy lifting of converting it into plain JavaScript objects.

このオーディオレッスンはBeFreedコミュニティメンバーが作成しました

質問を入力

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.

ホストの声

Lena

Jackson

学習スタイル

ファン

知識ソース

よくある質問

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

BeFreedがウェブ上でどのように話題になっているかをもっと見る

"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

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

BeFreedがウェブ上でどのように話題になっているかをもっと見る

"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

今すぐ学習の旅を始めよう

Why JSX Isn't Just HTML

24分

2026年3月31日

Technology Education Career

Struggling with React syntax errors? Learn why className and self-closing tags matter so you can write cleaner JavaScript and build better interfaces.

Why JSX Isn't Just HTMLのベスト引用

JSX is 'syntactic sugar'—a shorthand that makes our lives easier while the computer does the heavy lifting of converting it into plain JavaScript objects.

重要なポイント

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

このオーディオレッスンはBeFreedコミュニティメンバーが作成しました

質問を入力

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.

ホストの声

Lena

Jackson

学習スタイル

ファン

知識ソース

よくある質問

関連コンテンツ

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

26 sources

React State: Why Your Components Need Internal Memory

31 min

26 sources

React interview questions and the mental model gap

23 min

23 sources

React Components: Functional vs Class Deep Dive

42 min

Effective Programming

Jeff Atwood

9 min

Refactoring

Martin Fowler

9 min

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

BeFreedがウェブ上でどのように話題になっているかをもっと見る

"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

コロンビア大学卒業生がサンフランシスコで開発

BeFreedは1,000,000の好奇心旺盛な仲間が集うグローバルコミュニティ

BeFreedがウェブ上でどのように話題になっているかをもっと見る

"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

今すぐ学習の旅を始めよう