CreateElement React Explained: A Simple How-to Guide

How does React create elements without JSX?

React’s createElement method builds the structure of every component. It works behind the scenes, turning code into elements that React can render. With createElement, developers can create HTML elements and custom components without using JSX.

This blog breaks down element creation, React’s virtual DOM, and how createElement helps build complex UI structures.

Let’s get started!

Understanding createElement in React

What is createElement?

In React applications, the createElement function is responsible for creating elements that define a UI structure, instead of JSX, which gets compiled into React.createElement calls, developers can use this method directly to construct React elements programmatically.

Syntax of React.createElement

The createElement function takes three primary arguments:

Copy
1React.createElement(
2  type, // The type of element (string for HTML tags, function/class for components)
3  props, // An object containing element attributes or properties
4  children // The child elements or text content inside the element
5);

These three arguments are crucial in defining any React element object.

Example: Creating a Simple React Element

Copy
1const heading = React.createElement(
2  "h1",
3  { className: "title" },
4  "Hello, React!"
5);

This function call generates an object representing a React element, which later gets rendered into the actual DOM.

How createElement Works Behind the Scenes

The Role of Virtual DOM

When creating elements, React does not immediately modify the actual DOM. Instead, it constructs a virtual DOM, which is a lightweight representation of the document object model. This approach allows React to perform efficient updates by comparing the previous and current states before applying changes to the DOM elements.

Understanding the Output of createElement

Calling React.createElement returns a plain JavaScript object that represents a React element object.

Example output:

Copy
1{
2  type: "h1",
3  props: { className: "title", children: "Hello, React!" },
4  key: null,
5  ref: null
6}

This object contains:

• type: Defines the HTML tag or custom component.

• props: Stores attributes, event handlers, and child elements.

• children: Represents any nested elements or text content.

Creating Multiple and Nested Elements

Creating a Parent-Child Structure

To generate nested elements, pass multiple child elements inside createElement.

Copy
1const container = React.createElement(
2  "div",
3  { className: "container" },
4  React.createElement("h1", null, "Welcome"),
5  React.createElement("p", null, "This is a paragraph.")
6);

Handling Many Nested Elements

When working with many nested elements, using React.createElement helps maintain a structured UI without JSX.

Copy
1const nestedStructure = React.createElement(
2  "div",
3  null,
4  React.createElement("header", null, React.createElement("h1", null, "Header")),
5  React.createElement("main", null, React.createElement("p", null, "Content")),
6  React.createElement("footer", null, React.createElement("small", null, "Footer"))
7);

Managing Props and Children

Passing Props

Props define an element's behavior and appearance. The props object contains various attributes assigned to an element.

Copy
1const button = React.createElement(
2  "button",
3  { onClick: () => alert("Clicked!") },
4  "Click Me"
5);

Using Null for Empty Props

You can pass null when no attributes are required.

Copy
1const simpleText = React.createElement("p", null, "This is a paragraph.");

Working with Multiple Children

To include multiple elements inside a parent, list them as additional third arguments.

Copy
1const list = React.createElement(
2  "ul",
3  null,
4  React.createElement("li", null, "Item 1"),
5  React.createElement("li", null, "Item 2"),
6  React.createElement("li", null, "Item 3")
7);

Using React Fragments for Grouping Elements

React provides React.Fragment to avoid unnecessary div elements when creating elements.

Copy
1const fragmentExample = React.createElement(
2  React.Fragment,
3  null,
4  React.createElement("h1", null, "Title"),
5  React.createElement("p", null, "Description")
6);

By using a React fragment, extra nodes in the actual DOM are avoided.

Creating Custom Components

Using Functional Components

A React component can be defined as a function and instantiated using createElement.

Copy
1const MyComponent = () => {
2  return React.createElement("h2", null, "This is a custom component");
3};
4
5const app = React.createElement(MyComponent, null);

Rendering Components Inside Other Components

Copy
1const ParentComponent = () => {
2  return React.createElement(
3    "div",
4    null,
5    React.createElement(MyComponent, null),
6    React.createElement("p", null, "This is inside the parent.")
7  );
8};

This example shows other elements wrapped within a React component.

Rendering React Elements in the DOM

Using ReactDOM.render

To render React elements into the React DOM, use the ReactDOM.createRoot().render() method.

Copy
1const root = ReactDOM.createRoot(document.getElementById("root"));
2root.render(
3  React.createElement("h1", null, "Rendered without JSX")
4);

This executes the initial render and updates the actual DOM accordingly.

Benefits of Using createElement

• Works without JSX, making it useful in environments that do not support JSX.

• Enables dynamic element creation in React applications.

• Helps in programmatically generating React elements.

• Provides better control over manipulating elements.

The Bottom Line!

Mastering createElement React enhances understanding of how React elements are constructed and how they interact with the virtual DOM. By leveraging three primary arguments—type, props, and children—developers can structure complex UI structures efficiently.

Using createElement directly allows better performance control, dynamic element creation, and structured UI building within the React ecosystem. Whether working with HTML elements, custom components, or many nested elements, understanding this core function improves the overall development process.