Q3: How is JSX compiled under the hood in modern React?
JSX is a syntax extension for JavaScript. It does not run natively in browsers. Compilers like Babel transform JSX tags into React.createElement() calls (or _jsxRuntime.jsx() in React 17+ JSX transform) that return plain Virtual DOM objects.
JSX to JS Compilation Comparison
// 1. Input JSX
const element = <h1 className="title">Hello World</h1>;
// 2. Output (Compiled JS via Babel React 17+ Runtime)
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello World' });💡 Compilers translate declarative JSX syntax into functional call trees creating React element descriptors.
Key Takeaways
- JSX is syntactic sugar for
React.createElement()or_jsx()calls. - Modern JSX transform eliminates the need to explicitly import
Reactin every file.
Knowledge Check
What does a JSX tag <MyComponent /> evaluate to after compilation?