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:

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

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

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:

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