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
Supply DOM props through JSX, apply stable CSS classes, use style objects for calculated values, and retain accessible HTML.
Fragments and Nested Trees
Group sibling React nodes without creating a DOM wrapper, then choose real semantic containers wherever the document 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.