Difference between React Component and Element

#javascript #react #webdev #es6

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.

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →