Treat JSX as rendering logic, not HTML paste
Explain why JSX colocates markup and rendering logic, and apply the core JSX syntax rules.
The move: write JSX as the output of a component function. JSX lets markup live next to the rendering logic that controls it. That is useful because interactive UI is rarely static HTML. A button label may depend on loading state, a row badge may depend on a status, and a form message may depend on validation. The core rules follow from JSX being JavaScript: use className, close tags, return one tree, and put JavaScript expressions inside curly braces. When JSX becomes hard to read, the fix is usually not more clever inline syntax. The fix is to pull decisions…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in