# JSX Transformation — Babel & SWC

Source: https://www.geekswithgeeks.com/en/babel-swc/bs-jsx-transform

> How Babel and SWC convert JSX into function calls.

## 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.

```javascript
// 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.

```javascript
// 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' });
```