React JSX Cheat Sheet: Elements, Fragments, Props & Children

JSX is syntactic sugar for React.createElement: tags look like HTML but compile to JavaScript. Use className not class, htmlFor not for, camelCase events, {} for expressions, and a parent or fragment around siblings. User text in {} is escaped unless you set HTML on purpose.

This React cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Expression: {user.name} inside markup. Objects are not valid children except for the special case of components.
• className: CSS class. class is a syntax error in JSX (reserved-ish / invalid).
• htmlFor: Label’s for attribute.
• Fragment: <>...</> or <Fragment key={id}> when mapping.
• Self-close: <img />, <MyIcon />. Unclosed tags fail compile.
• Spread: <Button {...props} /> — later props override. Be careful with children.
• Boolean attrs: <input disabled /> is disabled={true}. disabled={false} must be explicit.
• Comments: {/* comment */} inside JSX. // only works in the {} JS block.

Copy-paste examples

Fragment, className, and children

A component that takes children is how you share chrome (layout, card) without duplicating markup.

export function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2 className="panel__title">{title}</h2>
      <div className="panel__body">{children}</div>
    </section>
  );
}
export function Page() {
  return (
    <>
      <Panel title="Billing">
        <p>Invoices appear here.</p>
      </Panel>
    </>
  );
}

Common mistakes

• Using class and for as in HTML and failing the build.
• innerHTML / dangerouslySetInnerHTML with untrusted strings.
• Returning two sibling elements from a component without a fragment.
• Putting if statements directly in JSX instead of &&, a ternary, or a variable above the return.

FAQ

1. Is JSX HTML? No. It is JS that produces React elements, which React later turns into DOM nodes.

1. Why BLOGPH0? JSX sits in JavaScript, where class is a reserved word. React maps className to the DOM class attribute.

1. Can I use JSX without React? Other libraries adopted the syntax. In this stack, JSX compiles with the React runtime (jsx import source).

Related React cheat sheets

• React Js Cheat Sheet 2026
• React Hooks Cheat Sheet
• React Vs React Native Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.