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 min

Mar 31, 2026

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.

Best quote from 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.

This audio lesson was created by a BeFreed community member

Input question

"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 {}."

Host voices

Lena

Jackson

Learning style

Deep

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

How JSX Works Under the Hood

32 min

Mar 31, 2026

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.

Best quote from 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.