JSX
3 lessonsAbout 18 minutesBeginner
This part of the React Tutorial runs from JSX Explained through to JSX Rules and Gotchas. There are 3 lessons here, and working through them takes about 18 minutes at a steady pace.
It follows on from React Introduction, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1JSX ExplainedJSX is not HTML and not a template language — it compiles to React.createElement calls. See exactly what it becomes and why that matters.
- 2Expressions in JSXEmbed JavaScript in JSX with curly braces. What counts as an expression, what React renders, and why some values silently disappear.
- 3JSX Rules and GotchasThe JSX mistakes that produce confusing errors: multiple roots, unclosed tags, rendering objects, and returning nothing by accident.