JSX Transformation

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 न कर रहे हों।

// 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 करने की कोई जरूरत नहीं।

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