In this article, we will explain what components and elements are, and go over similarities and differences between them.

Components vs elements in React

Let’s start by explaining elements.

What are React elements?

React uses templating language JSX, which looks like HTML and allows you to build user interfaces the same way you do in HTML. Familiar development experience means that you spend less time and develop apps without much effort.

React provides JavaScript methods to do everything – from creating elements to cloning them. Problem is that as soon as you have a bit of complexity in your app, JavaScript code becomes difficult to follow.

JSX is nothing but friendly syntax that makes it easy to work with top-level React API. You can write in JSX, which then automatically translates to JavaScript code, without you having to write it.

Important feature of JSX is the ability to use all the familiar elements from HTML – <div>, <p>, <h1>, and all others, and they work as we might expect them to based on our experience with HTML.

React is entirely written in JavaScript, so HTML-like elements you see in React apps are actually JavaScript. React elements like <div> are JavaScript objects with properties to imitate <div> element from HTML.

So, what are React elements? JavaScript imitations of HTML elements we all know and love. They are also called JSX elements.

JSX elements vs React components

React apps are nothing but component trees. You can think of components as building blocks for the app. Elements in turn are building blocks for React components.

In short, apps are made up of components, which are made up of elements. Thus elements are smallest building blocks in React.

React components are made up of multiple elements, but some components can have just one element.

What are React components?

Components are reusable bits of UI. They are like functions for building user interfaces. We use functions to reuse bits of logic. We create components to define important bits of UI, and then combine these bits to create interactive apps.

Difference between components and elements

Main difference between components and elements is opportunity for customization. React components are created from scratch, and you are free to mold them in any shape you want. This includes their appearance, interactivity, logic, as well as custom attributes (props) you can pass to further customize components so instances have different contents, appearances, etc.