JSX Rules: Expressions, Attributes, Fragments
Use JSX expressions with { }, apply camelCase attributes (className, onClick), and return multiple elements via fragments.
JSX Rules: Expressions, Attributes, Fragments is a free React Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What JSX adds
Goal: Master JSX basics—use { } for expressions, apply camelCase attributes, and group siblings with fragments.
Expressions and attributes
Expressions go inside { } and can be variables, function calls, or simple math. Attributes use camelCase like className, htmlFor, onClick.
Demo: expressions & attributes
Render dynamic values with { } and use className/title/onClick as camelCase attributes.
<div id="root"></div>
Fragments for siblings
Return multiple siblings using a fragment: either <>...</> or <React.Fragment>. Fragments avoid extra wrapper divs.
Demo: fragments
Use short <> fragments to group siblings; they do not render extra DOM nodes.
<div id="root"></div>
Tips & pitfalls
Tips:
- Only expressions in { } (not statements).
- Use className instead of class.
- Prefer fragments over unnecessary wrapper divs.
JSX expression rule
Recap
Recap: Put dynamic values in { }, use camelCase attributes, and group siblings with fragments to keep markup clean.
Frequently asked questions
Is the “JSX Rules: Expressions, Attributes, Fragments” lesson free?
Yes — the full text of “JSX Rules: Expressions, Attributes, Fragments” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “JSX Rules: Expressions, Attributes, Fragments”?
Use JSX expressions with { }, apply camelCase attributes (className, onClick), and return multiple elements via fragments. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “JSX Rules: Expressions, Attributes, Fragments” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- JSX Rules: Expressions, Attributes, Fragments
- Lists & Keys; Conditional Rendering
- Styling Options: CSS Modules, Inline Styles, Class Helpers