What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside JavaScript code. JSX is not valid JavaScript — it must be transformed by a compiler (Babel or the new React compiler) into regular JavaScript function calls. For example, <h1>Hello, {name}!</h1> compiles to React.createElement("h1", null, "Hello, ", name, "!"). Key JSX rules: every element must be closed (self-closing tags like <img />); use className instead of class and htmlFor instead of for; JavaScript expressions go inside { }; components must start with an uppercase letter to distinguish them from HTML elements; adjacent JSX elements must be wrapped in a single parent (or a Fragment). JSX is optional — you can use React without it — but it is universally adopted because it makes component markup far more readable and maintainable.