JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to describe the structure of UI components. It allows you to write HTML-like code directly in your JavaScript code. It makes it easier to define and render React elements by resembling the structure of HTML. JSX gets transformed into JavaScript by tools like **Babel or SWC** before it's rendered in the browser. //When you write this: const element = Hello, world! ; //It gets converted into a React.createElement() call: const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}. This allows you to toggle classes, calculate values, or map through arrays dynamically. Since JSX is closer to JavaScript than HTML, React uses camelCase property naming conventions instead of HTML attribute names. A JSX expression must have exactly one outermost element. If you need to return multiple elements, you must wrap them in a parent (like a ) or a Fragment (<>... ).

What is JSX?

Difficulty: 5/10

syntax, transpilation, rendering

1
JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to describe the structure of UI components.
2
It allows you to write HTML-like code directly in your JavaScript code.
3
It makes it easier to define and render React elements by resembling the structure of HTML.
4
JSX gets transformed into JavaScript by tools like Babel or SWC before it's rendered in the browser.

The Transformation

Key Features of JSX

1
You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}. This allows you to toggle classes, calculate values, or map through arrays dynamically.
2
Since JSX is closer to JavaScript than HTML, React uses camelCase property naming conventions instead of HTML attribute names.
3
A JSX expression must have exactly one outermost element. If you need to return multiple elements, you must wrap them in a parent (like a <div>) or a Fragment (<>...</>).

Scenario Questions

0-2 years experience

2-5 years experience

1While working on a feature, you notice the UI stops updating after a conditional JSX block returns `null`. Walk me through why that might happen and how you'd debug it.

What is JSX?

Scenario Questions

Follow-up Questions