npm-react

1
# JSX Runtime
2

3
The JSX runtime provides low-level functions used by transpilers to convert JSX syntax into JavaScript function calls. These functions are typically not used directly but are important for understanding how JSX works under the hood.
4

5
## Capabilities
6

7
### jsx (Production Runtime)
8

9
Creates React elements from JSX in production mode.
10

11
```javascript { .api }
12
/**
13
 * Creates React element from JSX (production)
14
 * @param type - Element type (component, HTML tag, etc.)
15
 * @param props - Element props including children
16
 * @param key - Optional element key
17
 * @returns React element
18
 */
19
function jsx(type: any, props: any, key?: any): ReactElement;
20
```
21

22
**Usage Examples:**
23

24
```javascript
25
// Note: These functions are typically called by transpilers, not directly
26

27
// JSX syntax
28
const element = <div className="container">Hello World</div>;
29

30
// Transpiles to jsx() call
31
const element = jsx('div', { 
32
  className: 'container', 
33
  children: 'Hello World' 
34
});
35

36
// Component JSX
37
const MyComponent = ({ name }) => <h1>Hello {name}</h1>;
38
const componentElement = <MyComponent name="John" />;
39

40
// Transpiles to
41
const componentElement = jsx(MyComponent, { name: 'John' });
42

43
// JSX with key
44
const listItem = <li key="item-1">First item</li>;
45

46
// Transpiles to
47
const listItem = jsx('li', { children: 'First item' }, 'item-1');
48

49
// Self-closing JSX
50
const input = <input type="text" placeholder="Enter name" />;
51

52
// Transpiles to
53
const input = jsx('input', { 
54
  type: 'text', 
55
  placeholder: 'Enter name' 
56
});
57

58
// Nested JSX
59
const nested = (
60
  <div>
61
    <h1>Title</h1>
62
    <p>Content</p>
63
  </div>
64
);
65

66
// Transpiles to
67
const nested = jsx('div', {
68
  children: [
69
    jsx('h1', { children: 'Title' }),
70
    jsx('p', { children: 'Content' })
71
  ]
72
});
73
```
74

75
### jsxs (Production Runtime with Static Children)
76

77
Creates React elements with static children (optimization for multiple children known at compile time).
78

79
```javascript { .api }
80
/**
81
 * Creates React element with static children (production)
82
 * @param type - Element type (component, HTML tag, etc.)
83
 * @param props - Element props including children array
84
 * @param key - Optional element key
85
 * @returns React element
86
 */
87
function jsxs(type: any, props: any, key?: any): ReactElement;
88
```
89

90
**Usage Examples:**
91

92
```javascript
93
// JSX with multiple static children
94
const container = (
95
  <div>
96
    <h1>Title</h1>
97
    <p>Paragraph 1</p>
98
    <p>Paragraph 2</p>
99
  </div>
100
);
101

102
// Transpiles to jsxs() for static children optimization
103
const container = jsxs('div', {
104
  children: [
105
    jsx('h1', { children: 'Title' }),
106
    jsx('p', { children: 'Paragraph 1' }),
107
    jsx('p', { children: 'Paragraph 2' })
108
  ]
109
});
110

111
// List with static items
112
const list = (
113
  <ul>
114
    <li>Item 1</li>
115
    <li>Item 2</li>
116
    <li>Item 3</li>
117
  </ul>
118
);
119

120
// Transpiles to
121
const list = jsxs('ul', {
122
  children: [
123
    jsx('li', { children: 'Item 1' }),
124
    jsx('li', { children: 'Item 2' }),
125
    jsx('li', { children: 'Item 3' })
126
  ]
127
});
128

129
// Form with static structure
130
const form = (
131
  <form>
132
    <label htmlFor="name">Name:</label>
133
    <input id="name" type="text" />
134
    <button type="submit">Submit</button>
135
  </form>
136
);
137

138
// Transpiles to jsxs() for performance
139
const form = jsxs('form', {
140
  children: [
141
    jsx('label', { htmlFor: 'name', children: 'Name:' }),
142
    jsx('input', { id: 'name', type: 'text' }),
143
    jsx('button', { type: 'submit', children: 'Submit' })
144
  ]
145
});
146
```
147

148
### jsxDEV (Development Runtime)
149

150
Creates React elements with additional development-time information for debugging.
151

152
```javascript { .api }
153
/**
154
 * Creates React element with development info
155
 * @param type - Element type (component, HTML tag, etc.)
156
 * @param props - Element props including children
157
 * @param key - Optional element key
158
 * @param isStaticChildren - Whether children are static
159
 * @param source - Source location information
160
 * @param self - Component instance info
161
 * @returns React element with debug information
162
 */
163
function jsxDEV(
164
  type: any, 
165
  props: any, 
166
  key?: any, 
167
  isStaticChildren?: boolean, 
168
  source?: any, 
169
  self?: any
170
): ReactElement;
171
```
172

173
**Usage Examples:**
174

175
```javascript
176
// In development mode, JSX includes additional debug info
177

178
// JSX in development
179
const element = <div className="container">Hello World</div>;
180

181
// Transpiles to jsxDEV() with source information
182
const element = jsxDEV('div', {
183
  className: 'container',
184
  children: 'Hello World'
185
}, undefined, false, {
186
  fileName: '/src/components/MyComponent.js',
187
  lineNumber: 15,
188
  columnNumber: 10
189
}, this);
190

191
// Component JSX in development
192
const MyComponent = ({ name }) => {
193
  return <h1>Hello {name}</h1>;
194
};
195

196
// Transpiles to jsxDEV() with debugging context
197
const componentJSX = jsxDEV('h1', {
198
  children: ['Hello ', name]
199
}, undefined, true, {
200
  fileName: '/src/components/MyComponent.js',
201
  lineNumber: 3,
202
  columnNumber: 10
203
}, this);
204

205
// Development warnings and errors use this info
206
function ProblematicComponent() {
207
  // This will show clear error location in dev tools
208
  return (
209
    <div>
210
      <UnknownComponent />  {/* Clear error with file/line info */}
211
    </div>
212
  );
213
}
214
```
215

216
### Fragment
217

218
JSX Fragment component available in JSX runtime for grouping elements.
219

220
```javascript { .api }
221
/**
222
 * Fragment component for JSX runtime
223
 */
224
const Fragment: ExoticComponent<{ children?: ReactNode }>;
225
```
226

227
**Usage Examples:**
228

229
```javascript
230
import { Fragment } from 'react/jsx-runtime';
231

232
// Fragment in JSX
233
const elements = (
234
  <>
235
    <h1>Title</h1>
236
    <p>Content</p>
237
  </>
238
);
239

240
// Transpiles to
241
const elements = jsx(Fragment, {
242
  children: [
243
    jsx('h1', { children: 'Title' }),
244
    jsx('p', { children: 'Content' })
245
  ]
246
});
247

248
// Fragment with key (useful in lists)
249
const listItems = items.map(item => (
250
  <Fragment key={item.id}>
251
    <dt>{item.term}</dt>
252
    <dd>{item.definition}</dd>
253
  </Fragment>
254
));
255

256
// Transpiles to
257
const listItems = items.map(item => 
258
  jsx(Fragment, {
259
    children: [
260
      jsx('dt', { children: item.term }),
261
      jsx('dd', { children: item.definition })
262
    ]
263
  }, item.id)
264
);
265

266
// Conditional Fragment
267
function ConditionalContent({ showDetails, data }) {
268
  return (
269
    <div>
270
      <h2>Summary</h2>
271
      {showDetails && (
272
        <>
273
          <p>Details: {data.details}</p>
274
          <p>Updated: {data.lastModified}</p>
275
        </>
276
      )}
277
    </div>
278
  );
279
}
280

281
// Function returning Fragment
282
function renderUserInfo(user) {
283
  return (
284
    <>
285
      <span className="user-name">{user.name}</span>
286
      <span className="user-email">({user.email})</span>
287
    </>
288
  );
289
}
290
```
291

292
## Transpiler Configuration
293

294
### Automatic JSX Runtime
295

296
Modern React transpiler configuration uses the automatic JSX runtime:
297

298
```javascript
299
// babel.config.js
300
{
301
  "presets": [
302
    ["@babel/preset-react", {
303
      "runtime": "automatic" // Uses jsx/jsxs imports automatically
304
    }]
305
  ]
306
}
307

308
// webpack.config.js (for esbuild)
309
{
310
  loader: 'esbuild-loader',
311
  options: {
312
    jsx: 'automatic' // Uses React 17+ JSX transform
313
  }
314
}
315

316
// tsconfig.json
317
{
318
  "compilerOptions": {
319
    "jsx": "react-jsx" // TypeScript automatic JSX
320
  }
321
}
322
```
323

324
### Classic JSX Runtime (Legacy)
325

326
Older configuration that requires React to be in scope:
327

328
```javascript
329
// babel.config.js (legacy)
330
{
331
  "presets": [
332
    ["@babel/preset-react", {
333
      "runtime": "classic" // Requires React import
334
    }]
335
  ]
336
}
337

338
// Requires this import in every file with JSX
339
import React from 'react';
340

341
// JSX transpiles to React.createElement calls
342
const element = <div>Hello</div>;
343
// Becomes: React.createElement('div', null, 'Hello');
344
```
345

346
## Runtime Import Patterns
347

348
```javascript
349
// Automatic imports (handled by transpiler)
350
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
351
import { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
352

353
// Manual imports (rarely needed)
354
import { jsx } from 'react/jsx-runtime';
355

356
const manualElement = jsx('div', {
357
  className: 'manual',
358
  children: 'Manually created element'
359
});
360
```
361

362
## Types
363

364
```javascript { .api }
365
// JSX runtime function types
366
function jsx(type: any, props: any, key?: any): ReactElement;
367
function jsxs(type: any, props: any, key?: any): ReactElement;
368
function jsxDEV(
369
  type: any,
370
  props: any,
371
  key?: any,
372
  isStaticChildren?: boolean,
373
  source?: any,
374
  self?: any
375
): ReactElement;
376

377
// Fragment type
378
const Fragment: ExoticComponent<{ children?: ReactNode }>;
379

380
// Source information type (development)
381
interface ReactSource {
382
  fileName: string;
383
  lineNumber: number;
384
  columnNumber: number;
385
}
386

387
// JSX element type
388
interface ReactElement<P = any> {
389
  type: any;
390
  props: P;
391
  key: string | number | null;
392
}
393
```