How JSX Works Under the Hood
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
"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 {}."
Frequently Asked Questions
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.
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.
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.
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.
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 <React.Fragment> syntax if you need to pass a key attribute to the wrapper during list rendering.
Discover more
Learn React, speaking, and interview skills
In today's competitive tech landscape, technical proficiency alone is rarely enough for rapid career growth. This learning plan is designed for developers who want to bridge the gap between building robust React applications and communicating their expertise effectively to land top-tier roles.
Programming
This comprehensive path bridges the gap between basic syntax and professional system architecture. It is ideal for aspiring developers who want to master both the practical skills of coding and the high-level design patterns used in top-tier tech companies.
I want to learn react native
React Native is one of the most in-demand skills for mobile development, allowing developers to build iOS and Android apps with a single codebase. This learning plan is ideal for JavaScript developers looking to break into mobile development, web developers wanting to expand their skillset, or anyone seeking to build professional cross-platform mobile applications efficiently.
Learn to code from scratch
This comprehensive path bridges the gap between writing your first line of code and architecting complex systems. It is ideal for aspiring developers who want to move beyond basic syntax to master the professional engineering standards required in the tech industry.
Designing and Programming Software
This comprehensive path is designed for developers looking to transition from writing scripts to engineering robust, production-ready systems. It provides the essential bridge between basic syntax and complex architectural decision-making required in modern tech roles.
Master Conceptual Tech for Expert Vibecoding
This plan is designed for developers who want to move beyond syntax and master the underlying philosophy of software creation. It is ideal for engineers seeking to bridge the gap between technical execution and high-level architectural intuition.
How an engine works
Understanding how engines work is essential for anyone interested in automotive technology, mechanical engineering, or simply wanting to know what happens under the hood of their vehicle. This knowledge is valuable for aspiring mechanics, engineering students, car enthusiasts, and professionals in transportation industries who need to grasp both the practical and theoretical aspects of engine operation.
Solana
This learning plan is essential for developers transitioning to Web3 who want to leverage Solana's high-speed performance. It is ideal for software engineers and aspiring blockchain architects looking to master Rust and decentralized application development.
From Columbia University alumni built in San Francisco
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
From Columbia University alumni built in San Francisco
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
"Instead of endless scrolling, I just hit play on BeFreed. It saves me so much time."
"I never knew where to start with nonfiction—BeFreed’s book lists turned into podcasts gave me a clear path."
"Perfect balance between learning and entertainment. Finished ‘Thinking, Fast and Slow’ on my commute this week."
"Crazy how much I learned while walking the dog. BeFreed = small habits → big gains."
"Reading used to feel like a chore. Now it’s just part of my lifestyle."
"Feels effortless compared to reading. I’ve finished 6 books this month already."
"BeFreed turned my guilty doomscrolling into something that feels productive and inspiring."
"BeFreed turned my commute into learning time. 20-min podcasts are perfect for finishing books I never had time for."
"BeFreed replaced my podcast queue. Imagine Spotify for books — that’s it. 🙌"
"It is great for me to learn something from the book without reading it."
"The themed book list podcasts help me connect ideas across authors—like a guided audio journey."
"Makes me feel smarter every time before going to work"
