JSX In Depth

JSX is a syntax extension for JavaScript that lets you write HTML-like markup which compiles to React.createElement calls returning plain JavaScript objects. Because it is really JavaScript, you embed values with {' '} , write attributes in camelCase like className , and must return a single root element.

Learn JSX In Depth in our free React course — an interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ JSX Is Sugar for createElement

Every JSX tag is rewritten into a React.createElement(type, props, ...children) call, which returns a plain object describing what to render. JSX never touches the real DOM directly — it just builds these lightweight descriptions.

2️⃣ Expressions in {' '} and camelCase Attributes

Curly braces embed a single JavaScript expression — a value like {' '} , {' '} , or {' '} . Statements such as if or for are not allowed there. Attributes are written in camelCase because they map to DOM properties: HTML class becomes className and for becomes htmlFor (both are reserved words in JavaScript).

3️⃣ One Root, Self-Closing Tags & Comments

A component returns a single expression, so sibling elements must share one parent. Use a real wrapper when you need one, or a fragment when you do not want an extra DOM node. Void tags like and must be self-closed ( ), and comments use the form. Whitespace and newlines between tags collapse, so add explicit spaces with {" "} when needed.

These lines build a valid component that returns two elements inside a fragment. Put them in the right order:

📋 Quick Reference

A React.createElement(type, props, children) call that returns a plain JavaScript object describing the element.

Because class is a reserved word in JavaScript, and JSX attributes map to DOM properties. Likewise for becomes htmlFor .

No — braces hold an expression, not a statement. Use a ternary, && , or compute a variable above the return.

Map an array of fruits into list-item strings the same way {' '} produces an array of elements. Run it and check your output.

Practice quiz

What does a JSX tag compile to?

  • A raw HTML string
  • A CSS rule
  • A React.createElement(...) call returning a plain JavaScript object
  • A DOM node directly

Answer: A React.createElement(...) call returning a plain JavaScript object. Every JSX tag is rewritten into React.createElement(type, props, ...children), which returns a plain object.

Is JSX the same as HTML?

  • No — it looks like HTML but compiles to JavaScript and uses camelCase attributes
  • Yes, exactly
  • Yes, but only for divs
  • No, it is actually XML

Answer: No — it looks like HTML but compiles to JavaScript and uses camelCase attributes. JSX resembles HTML but is JavaScript underneath, which is why it uses className and htmlFor.

What goes inside JSX curly braces { }?

  • Any statement like if or for
  • Only string literals
  • CSS rules
  • A single JavaScript expression

Answer: A single JavaScript expression. Braces hold one expression (a value); statements like if/for/switch are not allowed there.

Why can't you write an if statement directly inside JSX braces?

  • if is not supported in JavaScript
  • Braces only hold an expression, not a statement
  • It would be too slow
  • React forbids all conditionals

Answer: Braces only hold an expression, not a statement. Braces evaluate an expression. Use a ternary, &&, or compute a variable above the return instead of an if.

What is the JSX attribute for the HTML 'class' attribute?

  • className
  • class
  • cssClass
  • classList

Answer: className. class is a reserved JS word, so JSX uses className. Likewise the HTML 'for' becomes htmlFor.

Why must a component return a single root element?

  • The DOM allows only one element
  • React renders only the first child
  • A JSX expression compiles to one element, and a function returns one value
  • To save memory

Answer: A JSX expression compiles to one element, and a function returns one value. A return is one expression evaluating to one element; wrap siblings in a parent or a fragment.

How do you write a comment inside JSX?

  • // comment
  • {/* comment */}
  • /* comment */
  • <!-- comment -->

Answer: {/* comment */}. Use an expression comment {/* like this */}; a plain // between tags would render as text or error.

How must void/self-closing tags like img be written in JSX?

  • <img>
  • <img></img> only
  • </img>
  • <img />

Answer: <img />. Void elements must be self-closed in JSX: <img />, <br />, etc.

What is the JSX attribute equivalent of the HTML 'for' attribute on a label?

  • for
  • htmlFor
  • forHtml
  • labelFor

Answer: htmlFor. Because 'for' is a reserved JS word, JSX uses htmlFor for the label's for attribute.

What does {items.map(...)} produce in JSX?

  • A single string
  • Nothing
  • An array of elements that React renders as a list
  • A DOM fragment node

Answer: An array of elements that React renders as a list. map returns an array of elements; React renders each one, which is how lists are built.