Why can't I return multiple sibling elements in a single JSX block?

This restriction exists because JSX is ultimately converted into standard JavaScript function calls, such as `React.createElement`. In JavaScript, a function cannot return multiple values simultaneously; it must return a single object or an array. To satisfy this requirement, you must wrap sibling elements in a single parent container, like a `div` or a React Fragment, so the function has one single return value to process.

What is the difference between a compiler and a transpiler like Babel?

While the terms are often used interchangeably, a traditional compiler typically translates a high-level language into a lower-level language, such as machine code. A transpiler, like Babel, translates one high-level language into another high-level language. In the context of React, Babel takes modern JSX and "transpiles" it into a version of JavaScript that is compatible with all browsers, including older ones that do not understand JSX syntax.

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

JSX is an extension of JavaScript, and `class` is a reserved keyword in the JavaScript language used for defining classes. To avoid a naming conflict and syntax errors, React uses the DOM property name `className` instead. This logic applies to other attributes as well, such as using `htmlFor` instead of `for`, and adopting camelCase for most properties like `onClick` or `tabIndex`.

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

By default, React automatically escapes any values embedded within curly braces. This means that if a user attempts to inject a malicious script tag, React treats that input as plain text rather than executable HTML. It converts dangerous characters like angle brackets into safe character codes, ensuring the browser displays the literal text instead of running a script.

What are React Fragments and when should they be used?

React Fragments allow you to group multiple children without adding an extra, unnecessary node to the actual DOM. They are useful for satisfying the "single parent" rule without creating "div soup," which can clutter the HTML and break CSS layouts like Flexbox. You can use the shorthand `<> ` syntax for most cases, but you must use the full ` ` syntax if you need to pass a `key` attribute to the wrapper during list rendering.

How JSX Works Under the Hood

32 分钟

2026年3月31日

Technology Education Career

Confused why you're writing HTML in JavaScript? Learn how Babel transforms JSX into clean code and master the rules for building secure React components.

How JSX Works Under the Hood最佳语录

JSX is a powerful abstraction that prioritizes developer productivity without sacrificing browser compatibility; it’s not trying to replace HTML, but rather give it the full power of a programming language.

此音频课程由 BeFreed 社区成员创建

输入问题

"Create a detailed podcast and a set of flashcards explaining JSX. Cover what it is, how it gets converted to JavaScript, and the key rules, such as using className instead of class and how to embed JavaScript expressions inside curly braces {}."

主持声音

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

开启你的学习之旅，就是现在

How JSX Works Under the Hood

32 分钟

2026年3月31日

Technology Education Career

Confused why you're writing HTML in JavaScript? Learn how Babel transforms JSX into clean code and master the rules for building secure React components.

How JSX Works Under the Hood最佳语录

JSX is a powerful abstraction that prioritizes developer productivity without sacrificing browser compatibility; it’s not trying to replace HTML, but rather give it the full power of a programming language.