JSX Syntax
Overview
JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside your JavaScript code. When you look at a React component, you are not actually looking at HTML. You are looking at JSX, which is eventually compiled into plain JavaScript functions (React.createElement) by tools like Babel or Vite.
JSX exists because rendering logic (JavaScript) and UI markup (HTML) are inherently coupled. Instead of artificially separating technologies by putting HTML in one file and JS in another, React separates concerns by putting both the markup and the logic that controls it into one cohesive unit: the Component.
Because JSX is fundamentally JavaScript under the hood, it comes with strict rules. You cannot return multiple top-level elements, you must use camelCase for attributes (like className instead of class), and you can instantly inject dynamic JavaScript logic straight into your markup using curly braces {}.
Syntax
function UserGreeting() {
const username = "Kartik";
const unreadMessages = 5;
return (
// HTML-like syntax
<div className="notification-panel">
{/* Executing pure JavaScript inside the JSX */}
<h1>Welcome back, {username.toUpperCase()}!</h1>
<p>You have {unreadMessages * 2} new alerts.</p>
</div>
);
}Common Pitfalls
- Using HTML 'class' instead of 'className': Because
classis a reserved keyword in JavaScript (used for OOP), you MUST useclassNameto apply CSS classes in JSX. Usingclasswill throw a warning in the console and potentially break styling tools. - Forgetting to Close Tags: HTML is forgiving; JSX is strict. Every single tag MUST be closed. Elements without children like
<img>or<input>must be self-closing:<img />,<input />.
Interview Questions
No, web browsers can only parse standard HTML, CSS, and plain JavaScript. JSX must be transpiled (converted) by a build tool (like Babel or SWC/Vite) into plain JavaScript React.createElement() calls before the code ever reaches the browser.
Because JSX translates into a JavaScript function call (React.createElement), and a JavaScript function can only return ONE single value or object. Returning two sibling <div>s is like trying to write return 1; return 2;. They must be wrapped in a single parent container (like a <div> or a <Fragment>).
Real-World Example
JSX in a Product Card: This example highlights the true power of JSX. We are injecting JavaScript variables, running ternary operators to determine button colors and text, and using camelCase for properties, all within a structure that looks perfectly natural to a web developer.
function ProductCard() {
const product = {
name: "MacBook Pro M3",
price: 1999,
inStock: true,
image: "/macbook.png"
};
return (
<div className="product-card">
{/* Self-closing tag, dynamic src, camelCase className */}
<img src={product.image} alt={product.name} className="productImg" />
<h2>{product.name}</h2>
{/* Formatting data using standard JS methods inside JSX */}
<p className="price">$ {product.price.toLocaleString()}</p>
{/* Dynamic inline styles require double curly braces */}
<button style={{ backgroundColor: product.inStock ? 'green' : 'red' }}>
{product.inStock ? 'Add to Cart' : 'Out of Stock'}
</button>
</div>
);
}Check Your Knowledge
Test your understanding of JSX Syntax with these quick questions.