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 107 of 2,396·3. JSX FundamentalsPro lesson

When Fragments Need the key Prop

Using the long-form React.Fragment syntax when mapping over arrays and needing to pass a key attribute.

This lesson is for subscribers

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

See pricing Back to course