What is JSX?

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 (<>...</>).

Difficulty: 5/10

Topics: syntax, transpilation, rendering

0-2 years experience

1
You need to add a new button component that shows a label passed via props. How would you write the JSX for this component?
2
If you accidentally write <div>{user.name}</div> but user is sometimes undefined, what will React render and how can you guard against it in JSX?

2-5 years experience

1
While 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.
2
Your team wants to switch from using className strings to a CSS‑in‑JS solution. How would you refactor existing JSX to accommodate the new styling approach while keeping the component logic intact?

5-8 years experience

1
A large codebase has mixed JavaScript and TypeScript files, all using JSX. What are the performance and maintenance trade‑offs of introducing a custom Babel plugin to enforce a specific JSX pragma across the repo?
2
During a server‑side rendering rollout, you encounter a mismatch error between client and server markup caused by JSX that accesses window. How would you redesign the component to avoid this issue?

8+ years experience

1
Your organization is migrating a legacy React app that uses plain React.createElement calls to JSX. What architectural considerations and migration strategy would you propose to minimize risk and ensure consistency?
2
We plan to share a component library across multiple teams, some of which use different bundlers and JSX transforms. How would you design the library's build and publishing pipeline to support these variations while keeping the public API stable?