# JSX Transformation — बेबल और SWC

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

> कैसे Babel और SWC JSX को function calls में परिवर्तित करते हैं।

## JSX मान्य JavaScript नहीं है

`<MyComponent />` जैसी JSX syntax standard JavaScript में exist नहीं करती है। Transpilers को इसे function calls में convert करना चाहिए इससे पहले कि browser या Node इसे चला सके।

## पुरानी transform: React.createElement

Classic Babel JSX transpilation `React.createElement` कॉल करता है। आपको React को import करना चाहिए भले ही directly use न कर रहे हों।

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

## नई transform: jsx/jsxDev

आधुनिक React 17+ automatic JSX transformation का उपयोग करता है। Babel स्वचालित रूप से 'react/jsx-runtime' से `jsx()` को inject करता है — React को import करने की कोई जरूरत नहीं।

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