What is JSX in React?
Understand what JSX is in React, how it compiles to React.createElement, key rules like className, expression embedding, plus examples and interview questions.
Expected Interview Answer
JSX is a syntax extension for JavaScript that lets you write HTML-like markup directly in your code; a compiler such as Babel transforms it into regular React.createElement calls that produce the elements React renders.
JSX is not HTML and not a string — it is syntactic sugar over function calls. Each tag compiles to React.createElement(type, props, ...children), which returns a plain JavaScript object describing the UI. You can embed any JavaScript expression inside curly braces, and because it compiles to expressions, JSX must return a single root element and uses attributes like className and htmlFor instead of class and for.
- Markup and logic live together in one readable place
- Full power of JavaScript expressions inside the UI
- Compile-time checks catch many mistakes early
- More concise than manual React.createElement calls
- Editor tooling like autocomplete and highlighting
AI Mentor Explanation
JSX is like the shorthand notation a scorer writes in the book — 'W', '4', 'nb' — which looks compact and human-friendly but is later expanded into full official records. You write terse HTML-like tags, and Babel expands each into a complete React.createElement call, just as the scorer's shorthand becomes the formal scorecard.
Step-by-Step Explanation
Step 1
Write HTML-like markup
Author tags such as <h1>Hi</h1> directly inside your JavaScript component code.
Step 2
Embed expressions
Use curly braces to inject any JavaScript expression, like {user.name} or {count + 1}, into the markup.
Step 3
Compile with Babel
A build tool transpiles each JSX tag into a React.createElement(type, props, children) call.
Step 4
Produce element objects
Those calls return plain JavaScript objects that describe the UI tree.
Step 5
Render to the DOM
React reads those objects, reconciles them with the Virtual DOM, and updates the real DOM.
What Interviewer Expects
- That JSX compiles to React.createElement calls
- Awareness that JSX is not HTML and not a string
- Knowledge of expression embedding with curly braces
- The single-root-element and self-closing-tag rules
- Attribute differences like className and htmlFor
Common Mistakes
- Believing JSX is understood by browsers directly
- Using class and for instead of className and htmlFor
- Forgetting a single wrapping root element or fragment
- Confusing JSX with a templating string language
Best Answer (HR Friendly)
“JSX is a special syntax that lets React developers write HTML-like code inside JavaScript, making UI code easier to read and write. A build tool then converts it into plain JavaScript that the browser can run.”
Code Example
// What you write in JSX
const element = <h1 className="title">Hello, {name}!</h1>;
// What Babel compiles it into
const element = React.createElement(
'h1',
{ className: 'title' },
'Hello, ',
name,
'!'
);Follow-up Questions
- What does JSX compile down to?
- Why do we use className instead of class in JSX?
- How do you embed JavaScript expressions in JSX?
- What are React fragments and why are they useful?
- Can you use React without JSX?
MCQ Practice
1. JSX ultimately compiles into?
Babel transforms each JSX tag into a React.createElement call that returns an element object.
2. How do you write the HTML class attribute in JSX?
Because class is a reserved word in JavaScript, JSX uses className for the CSS class attribute.
3. How do you embed a JavaScript expression in JSX?
Any JavaScript expression can be embedded inside JSX using curly braces, such as {user.name}.
Flash Cards
What is JSX? — A syntax extension for JavaScript that compiles HTML-like markup into React.createElement calls.
Does the browser understand JSX? — No — it must be transpiled by a tool like Babel into plain JavaScript first.
How to embed JS in JSX? — Wrap the expression in curly braces, e.g. {count} or {isOn ? 'On' : 'Off'}.
Why className not class? — class is a reserved JavaScript keyword, so JSX uses className for the CSS class attribute.