Why JSX Isn't Just HTML
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.
Часто задаваемые вопросы
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."
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.
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."
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.
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.
Узнать больше
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.
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.
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.
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.
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.
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.
High-load Rust
This plan is designed for software engineers transitioning into systems programming where performance and reliability are non-negotiable. It bridges the gap between basic syntax and building high-throughput, production-grade services that leverage Rust's unique safety guarantees.
Создано выпускниками Колумбийского университета в Сан-Франциско
"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"
"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"
