BiteSizedChunks.comLearn one small thing at a time.

Course contentsShow

React

74JSX Compiles to Function Calls
75The React.createElement Signature
76JSX Without a Transpiler: The Raw API
77Why JSX Improves Developer Experience
78JSX is Not HTML: Key Differences
79The Role of Babel and Modern Transpilers
80JSX Transform: Classic vs Automatic
81Why React Must Be In Scope (Classic Transform)
82Inspecting Compiled JSX Output
83Curly Braces: The Escape Hatch to JavaScript
84Interpolating Variables and Constants
85Evaluating Expressions: Math, String Concatenation, Function Calls
86Accessing Object Properties and Array Elements
87Template Literals Inside JSX
88Calling Functions Inside JSX
89Short-Circuit Evaluation: && and ||
90What You Can't Interpolate: Statements
91null, undefined, true, false: Rendered as Nothing
92Numbers and Strings: Rendered as Text
93Interpolation in Attributes vs Children
94className vs class: The JSX Naming Convention
95htmlFor Instead of for: Label Attribute Edge Case
96camelCase Attributes: style, onClick, onChange
97The style Prop: Objects Instead of Strings
98Boolean Attributes: checked, disabled, readOnly
99data-* and aria-* Attributes: The kebab-case Exceptions
100dangerouslySetInnerHTML: XSS Protection by Design
101suppressHydrationWarning: The Escape Hatch
102SVG Attributes in JSX: Subtle Naming Differences
103Custom Attributes: When They Work and When They're Stripped
104Why Adjacent Elements Need a Parent
105React.Fragment for Grouping Without DOM Nodes
106The <> </> Shorthand Syntax
107When Fragments Need the key Prop
108Fragments vs Wrapper Divs: Performance and Semantics
109Nested Fragments and Common Patterns

React

74JSX Compiles to Function Calls
75The React.createElement Signature
76JSX Without a Transpiler: The Raw API
77Why JSX Improves Developer Experience
78JSX is Not HTML: Key Differences
79The Role of Babel and Modern Transpilers
80JSX Transform: Classic vs Automatic
81Why React Must Be In Scope (Classic Transform)
82Inspecting Compiled JSX Output
83Curly Braces: The Escape Hatch to JavaScript
84Interpolating Variables and Constants
85Evaluating Expressions: Math, String Concatenation, Function Calls
86Accessing Object Properties and Array Elements
87Template Literals Inside JSX
88Calling Functions Inside JSX
89Short-Circuit Evaluation: && and ||
90What You Can't Interpolate: Statements
91null, undefined, true, false: Rendered as Nothing
92Numbers and Strings: Rendered as Text
93Interpolation in Attributes vs Children
94className vs class: The JSX Naming Convention
95htmlFor Instead of for: Label Attribute Edge Case
96camelCase Attributes: style, onClick, onChange
97The style Prop: Objects Instead of Strings
98Boolean Attributes: checked, disabled, readOnly
99data-* and aria-* Attributes: The kebab-case Exceptions
100dangerouslySetInnerHTML: XSS Protection by Design
101suppressHydrationWarning: The Escape Hatch
102SVG Attributes in JSX: Subtle Naming Differences
103Custom Attributes: When They Work and When They're Stripped
104Why Adjacent Elements Need a Parent
105React.Fragment for Grouping Without DOM Nodes
106The <> </> Shorthand Syntax
107When Fragments Need the key Prop
108Fragments vs Wrapper Divs: Performance and Semantics
109Nested Fragments and Common Patterns

← React

Lesson 108 of 2,396·3. JSX FundamentalsPro lesson

Fragments vs Wrapper Divs: Performance and Semantics

Understanding when fragments prevent DOM bloat and why avoiding unnecessary wrappers matters for CSS and accessibility.

This lesson is for subscribers

You've completed the free preview. Subscribe to unlock every lesson in every course.

See pricing Back to course