What Are React Elements? A Beginner-Friendly Guide

If you’re just starting with React, one of the first concepts you’ll encounter is React Elements. These are the building blocks of any React application. In this article, we’ll break down what React Elements are, how they work, how they differ from components, and how to create them—with simple examples.

What is a React Element?

A React Element is an object representation of a DOM node or a component. It’s the smallest unit in a React app that describes what you want to see on the screen.

React elements are plain JavaScript objects. They are immutable and describe what you want to appear in the UI.

Syntax Example:

const element = <h1>Hello, world!</h1>;

Behind the scenes, React compiles this to:

const element = React.createElement('h1', null, 'Hello, world!');

Difference Between React Elements and Components

Feature	React Element	React Component
Definition	A plain object representing UI	A function or class that returns elements
Reusability	No	Yes
Example	`<h1>Hello</h1>`	`function Greeting() { return <h1>Hello</h1>; }`
Rendered To DOM	Directly	After being returned by a component

How React Elements Work

React uses a Virtual DOM to keep track of changes. When an element is updated, React compares the new element with the previous one and updates only the changed parts of the actual DOM (a process called Reconciliation).

How to Create React Elements (Without JSX)

Although JSX is popular, you can also create elements manually using React.createElement.

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, React!'
);

This will render the same output as:

JSX vs React.createElement()

JSX is just a syntactic sugar that gets compiled into React.createElement calls by Babel.

Example:

<div>
  <p>This is JSX</p>
</div>

Gets compiled to:

React.createElement('div', null,
  React.createElement('p', null, 'This is JSX')
);

Key Takeaways

React Elements are immutable objects representing UI.
They are created either using JSX or React.createElement.
Elements differ from components: elements describe what you see; components define how you see it.
They are cheap to create and are used in Virtual DOM diffing for efficient updates.

Frequently Asked Questions

1. Are React Elements the same as DOM elements?

No. React Elements are JavaScript objects that describe DOM elements, but they are not the actual DOM nodes.

2. Can I modify a React Element once it’s created?

No. React Elements are immutable. To update the UI, you must create a new element.

3. Why should I care about React Elements?

Understanding elements helps you grasp how React renders and updates the UI efficiently.