React createElement() - Complete Guide with Examples

React.createElement() is the fundamental function that JSX compiles to. Understanding it helps you work without JSX, create dynamic elements, and understand React’s internals.

This guide covers everything about createElement(), from basics to advanced usage.

Introduction to createElement()

React.createElement() is the core function React uses to create elements. JSX is syntactic sugar that compiles to createElement() calls.

Key Concepts:

• JSX compiles to createElement()
• Creates React elements (virtual DOM)
• Returns element objects
• Foundation of React rendering

Use Cases:

• Working without JSX
• Dynamic element creation
• Understanding React internals
• Advanced patterns
• Library development

Syntax and Parameters

Function Signature

React.createElement(type, props, ...children)

Parameters

type (required):

• String (HTML tag): 'div', 'span', 'button'
• React component: MyComponent, Button
• React fragment: React.Fragment

props (optional):

• Object with properties
• null if no props
• Can include key and ref

...children (optional):

• Child elements
• Can be strings, numbers, elements
• Multiple children as separate arguments

Return Value

Returns a React element object (not a DOM node).

Basic Usage Examples

Simple Element

const element = React.createElement('div', null, 'Hello World');

JSX equivalent:

const element = <div>Hello World</div>;

Element with Props

const element = React.createElement(
  'div',
  { className: 'container', id: 'main' },
  'Hello World'
);

JSX equivalent:

const element = <div className="container" id="main">Hello World</div>;

Nested Elements

const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Content')
);

JSX equivalent:

const element = (
  <div className="container">
    <h1>Title</h1>
    <p>Content</p>
  </div>
);

Component Usage

function Button({ children, onClick }) {
  return React.createElement('button', { onClick }, children);
}

const element = React.createElement(Button, { onClick: handleClick }, 'Click me');

JSX equivalent:

const element = <Button onClick={handleClick}>Click me</Button>;

JSX Compilation

How JSX Compiles

JSX:

<div className="container">
  <h1>Title</h1>
  <p>Content</p>
</div>

Compiles to:

React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Content')
)

Babel Transformation

Babel transforms JSX to createElement() calls during compilation.

React 17+ JSX Transform

New transform (no React import needed):

import { jsx } from 'react/jsx-runtime';

jsx('div', { className: 'container' }, 'Hello');

Dynamic Element Creation

Dynamic Tag Names

function DynamicTag({ tag, children, ...props }) {
  return React.createElement(tag, props, children);
}

// Usage
<DynamicTag tag="h1">Title</DynamicTag>
<DynamicTag tag="p">Content</DynamicTag>

Conditional Elements

function Conditional({ show, children }) {
  if (!show) return null;
  return React.createElement('div', null, children);
}

Array of Elements

const items = ['Apple', 'Banana', 'Orange'];

const list = React.createElement(
  'ul',
  null,
  items.map((item, index) =>
    React.createElement('li', { key: index }, item)
  )
);

Props and Children

Multiple Children

React.createElement(
  'div',
  null,
  'First',
  'Second',
  'Third'
);

Children as Array

React.createElement(
  'div',
  null,
  ['First', 'Second', 'Third']
);

Special Props

React.createElement(
  'div',
  {
    key: 'unique-key',
    ref: elementRef,
    className: 'container',
    onClick: handleClick
  },
  'Content'
);

Spread Props

const props = { className: 'container', id: 'main' };

React.createElement('div', props, 'Content');

Advanced Patterns

Higher-Order Components

function withWrapper(Component) {
  return function WrappedComponent(props) {
    return React.createElement(
      'div',
      { className: 'wrapper' },
      React.createElement(Component, props)
    );
  };
}

Render Props

function DataProvider({ render }) {
  const data = fetchData();
  return React.createElement(React.Fragment, null, render(data));
}

Fragments

React.createElement(
  React.Fragment,
  null,
  React.createElement('h1', null, 'Title'),
  React.createElement('p', null, 'Content')
);

When to Use createElement()

Use createElement() When:

1. No JSX available - Server-side rendering, some build setups
2. Dynamic components - Component type determined at runtime
3. Library development - Creating React utilities
4. Understanding React - Learning how React works
5. Performance - Rare cases where direct calls are faster

Prefer JSX When:

1. Readability - JSX is more readable
2. Standard development - Most React development
3. Team consistency - Standard React codebase
4. Tooling support - Better IDE support for JSX

Conclusion

React.createElement() is:

• Foundation of React elements
• JSX compilation target
• Useful for dynamic element creation
• Essential for understanding React

Key Points:

• JSX compiles to createElement()
• Three parameters: type, props, children
• Returns React element objects
• Use for dynamic or advanced patterns
• Prefer JSX for standard development

Understanding createElement() deepens your React knowledge and enables advanced patterns.