What is JSX? Complete Guide with Examples
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like markup directly within JavaScript code. Created by Facebook for React, JSX combines the visual clarity of HTML templates with the full power of JavaScript expressions. JSX is not valid JavaScript — it must be transpiled by tools like Babel or TypeScript into regular JavaScript function calls (React.createElement) before browsers can execute it.
How Does JSX Work?
JSX elements are syntactic sugar for React.createElement() calls. When you write <Button color='blue'>Click</Button>, it's transformed into React.createElement(Button, { color: 'blue' }, 'Click'). A JSX transpiler (Babel, TypeScript, SWC) parses the JSX syntax, identifies elements, attributes, and children, then generates the equivalent function calls. JSX expressions can embed JavaScript using curly braces {expression}, and JSX elements can be assigned to variables, returned from functions, and used in control flow.
Key Features
- HTML-like syntax within JavaScript for intuitive component authoring
- JavaScript expression embedding via curly braces for dynamic content
- Component composition — custom components used as JSX tags alongside HTML elements
- TypeScript support via TSX files with full type checking of component props
- Key differences from HTML: className instead of class, htmlFor instead of for, camelCase attributes
Common Use Cases
React Component Development
JSX is the standard syntax for building React components. Every React tutorial and codebase uses JSX for defining component rendering logic and UI structure.
HTML to React Migration
When converting HTML templates to React components, developers transform HTML to JSX by changing class to className, adjusting self-closing tags, and converting event handlers to camelCase.
Server-Side Rendering
Frameworks like Next.js use JSX for server-rendered pages, generating HTML on the server from JSX components for better SEO and initial page load performance.