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.

All of React Tutorial Next: Components and Props