Beginner LevelReact JS & React 19
What is JSX and how does it work under the hood?
❓ Interview Prompt: Explain JSX syntax, how it compiles to JavaScript, and why React 17+ no longer requires importing React in JSX files.
JSX (JavaScript XML) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript files.
How It Works:
1
Browsers cannot understand JSX directly. A compiler like Babel, SWC, or TypeScript transforms JSX into standard JavaScript function calls.
2
Before React 17: JSX compiled to 'React.createElement(component, props, ...children)', which required 'import React from 'react'' in every file.
3
React 17+ (New JSX Transform): Compilers automatically import special functions from 'react/jsx-runtime' ('_jsx' and '_jsxs'). You no longer need to import React just to use JSX!
Rules of JSX:
•
Return a single root element (or use a Fragment '<>...</>').
•
Close all tags ('<img />', '<br />').
•
Use camelCase for attribute names ('className' instead of 'class', 'tabIndex' instead of 'tabindex').
Code Implementation Example
jsx
// JSX syntax in your code
function Profile({ user }) {
return (
<div className="card">
<img src={user.avatar} alt={user.name} />
<h2>{user.name}</h2>
</div>
);
}
// What React 17+ compiler transforms it to (using react/jsx-runtime):
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function Profile({ user }) {
return _jsxs("div", {
className: "card",
children: [
_jsx("img", { src: user.avatar, alt: user.name }),
_jsx("h2", { children: user.name })
]
});
}💡JSX compilation to react/jsx-runtime functions in React 17 and 19.
🎯 Interview Key Takeaway
JSX is syntactic sugar for React element creation. React 17+ uses react/jsx-runtime so importing React is optional for JSX.
#JSX#React 19#Compiler#Beginner
Back to all React JS & React 19 Questions→