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.
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.
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.