JSX Transformation

JSX is not valid JavaScript

JSX syntax like <MyComponent /> doesn't exist in standard JavaScript. Transpilers must convert it to function calls before the browser or Node can run it.

Old transform: React.createElement

Classic Babel JSX transpilation calls React.createElement. You must import React even if not directly using it.

// Input: JSX (needs React imported)
import React from 'react';
const el = <div>Hello</div>;

// Output: React.createElement calls
var el = React.createElement('div', null, 'Hello');

New transform: jsx/jsxDev

Modern React 17+ uses automatic JSX transformation. Babel injects jsx() from 'react/jsx-runtime' automatically — no need to import React.

// Input: No React import needed
const el = <div>Hello</div>;

// Output: Automatic jsx runtime
import { jsx as _jsx } from 'react/jsx-runtime';
var el = _jsx('div', { children: 'Hello' });