DEV Community

David Chibueze Ndubuisi
David Chibueze Ndubuisi

Posted on

2

Difference between React Component and Element

React Elements

In terms of the DOM nodes or other components, a React element is a simple object that describes what you wish to see on the screen. They are the building units of React applications. Elements can contain other elements in their props.

Creating a React element is simple, once it is created, it’s immutable. Below is the object representation of a React element:

Object representation of a React element

The above createElement() returns as an object as below:

Object representation of a React element

Finally, ReactDOM.render is used to render it to the DOM as shown below:

A React element

React Components

React components are short, reusable chunks of code that return a React element that may be rendered on the website. In other words, a component is a factory for creating elements.
The simplest form of React component is a plain JavaScript function that returns a React element:

Simple form of a React component

That's it, pretty simple 😌...until next time.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay