What is JSX in React?

What is JSX in React?

• A. An HTML-like syntax extension for JavaScript used with React.
• B. A separate templating language compiled to Python.
• C. A CSS preprocessor for styling React components.
• D. A runtime optimization technique for rendering.

Answer: (A)

JSX is an HTML-like syntax extension for JavaScript that React uses to describe the UI. It lets you write markup that looks like HTML inside your JavaScript code, which makes the component structure easy to read and maintain. During build time, JSX is transformed into JavaScript function calls (typically React.createElement) that create the element tree React renders. Because of that, the browser doesn't run JSX directly; it needs a compiler like Babel to convert it before runtime. You can include JavaScript expressions inside JSX by wrapping them in braces, enabling dynamic content, conditional rendering, and mapping over arrays. There are small differences from real HTML—attributes use camelCase in many cases, and you should use className instead of class, htmlFor instead of for, etc.—but the syntax remains familiar for structuring UI. This combination makes React components straightforward to define in a declarative way. The other options describe things like templating languages, CSS preprocessors, or runtime optimizations, which don’t capture what JSX actually is.

JSX is an HTML-like syntax extension for JavaScript that React uses to describe the UI. It lets you write markup that looks like HTML inside your JavaScript code, which makes the component structure easy to read and maintain. During build time, JSX is transformed into JavaScript function calls (typically React.createElement) that create the element tree React renders. Because of that, the browser doesn't run JSX directly; it needs a compiler like Babel to convert it before runtime. You can include JavaScript expressions inside JSX by wrapping them in braces, enabling dynamic content, conditional rendering, and mapping over arrays. There are small differences from real HTML—attributes use camelCase in many cases, and you should use className instead of class, htmlFor instead of for, etc.—but the syntax remains familiar for structuring UI. This combination makes React components straightforward to define in a declarative way. The other options describe things like templating languages, CSS preprocessors, or runtime optimizations, which don’t capture what JSX actually is.