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.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video