JSX Is Real React Code
Every subchapter in this chapter, free to read online. Work through them in order, or open the concept required by your current project.
Expressions Inside JSX
Evaluate JavaScript inside JSX, distinguish expressions from statements, and account for every value React can render or reject.
Attributes, Class Names, and Styles
How JSX props reach browser elements, why className exists, when the style prop makes sense, and how HTML semantics still work normally.
Fragments and Nested Trees
Group sibling React nodes without creating a DOM wrapper, then use a real HTML element whenever the document actually needs one.
Arrays in JSX
Transform data arrays into React nodes with map and filter, preserve the source collection, and give empty results explicit UI.
Keys in the First List
Identify sibling list elements with stable data keys and avoid index or random keys that make React match the wrong instances.
Modern JavaScript Syntax in Components
Read the JavaScript syntax used in current React components without mistaking destructuring, spread, and optional access for React APIs.