← React Beginner Questions - Set 6 Q54

What is the difference between React.createElement and JSX?

React Beginner Questions - Set 6

JSX is the authoring format; `createElement` is what it compiles to. Same result, different ergonomics.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// JSX
const card = (
  <article className="card">
    <h3>Title</h3>
  </article>
);

// Compiled, with the automatic runtime
import { jsx as _jsx } from 'react/jsx-runtime';
const card2 = _jsx('article', {
  className: 'card',
  children: _jsx('h3', { children: 'Title' }),
});

// The classic runtime calls React.createElement directly
const card3 = React.createElement('article', { className: 'card' },
  React.createElement('h3', null, 'Title'));

What to notice

• `createElement(type, props, ...children)` takes children as extra arguments; `jsx()` takes them as a prop.
• Neither creates DOM nodes — both return plain objects (`$$typeof: Symbol(react.element)`).
• Writing `createElement` by hand is only reasonable inside a factory or a compiler test.