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. This is 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, and your progress syncs across the web and the CoddyKit app. The React Academy course includes 3 lessons in total.
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. 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. The React Academy course includes 3 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.
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