What are ReactJS Components?
In this article, I am going to discuss What are ReactJS Components with Examples. Please read our previous article where we discussed the Introduction to React JS Basic Concepts.
Let us now dive into all these important basics and fundamentals. And for that keep in mind what you learned in the first section.
We do not need it. You can build any website without React but if you are having more complex user interfaces like the one, we have in our expense tracker project. If you use something like React, it becomes much easier to build something like this. You will not have to focus on all the nitty-gritty details and it will be less error-prone if you use something like React. Because you will be able to focus on the core business logic that makes up your application instead of having to focus on the actual steps of updating the page when something happens somewhere. That is why we use libraries like React.
And to make that job simpler for us, react embraces a concept called components. React is all about components. That brings up one important question, what exactly is a component? Well, let us come back to this question in a while. Instead, let us come back to this first sentence here. Even though we do not fully know yet what components are. Why could React be about one concept at its core? Because all user interfaces in the end are made up of components. So, what could be a component then if it is something that is crucial in all user interfaces you see?
Well, let us have a look at this finished application which we are going to build throughout this and the next sections. If you have a look at the user interface of this web application, you might be able to identify a couple of building blocks that make up this interface. For example, have a look at the expense items down there. This is the same item being repeated twice here. It is the same item, just with different data.
The same would be true here for this chart, the individual bars, and that chart. That is the same item just repeated with a different label and a different amount of filling. And that is exactly what components are. Reusable building blocks in your user interface.
The item here at the top is a component, that filter is a component, the overall chart is a component, and the overall list of items is a component. But inside the items, we could say this,
The date item here would be a separate component; the amount here would be a component. We can really split it up in a very granular way if we want to. We got all these individual building blocks which we combine together to build a user interface.
And in the end, all user interfaces can be split up into components like containers and buttons and input elements, and product items. All user interfaces on all kinds of web applications can be split up into components like this. And ReactJS is all about these components. You build these individual components and then you tell React how to compose them together into a final user interface.
And ReactJS embraces this concept of components because of that reusability aspect and because it allows us to separate our concerns. Both concepts are important concepts in programming in general.
For the entire user interface, we have small separated units, where every component has one clear concern, one focus, and one specific task it focuses on. And if we split that code across multiple files then we will have small pieces of code which are easy to manage and maintain.
And these are not concepts or ideas React invented. Instead, if we take a step back from React and we think about programming in general, then of course in any programming language and no matter what you are building you tend to work with functions and you split your code into multiple small functions which then may call each other to outsource logic into a function, to separate concerns and to be able to execute the same code multiple times if you need to.
And ReactJS just picks up that concept of functions and of separating code across functions and translates it to the front-end web application world where we built an entire user interface by splitting our code into multiple components which we then can mix and match as we need to.
ReactJS Code is written in a Declarative Way:
It is a bit like magic. It will make your life as a developer much easier. So, you could say that in the end we just built our own custom HTML Elements and we combined them together for building a user interface. But that is enough of the theory for now. Let us now finally dive into some code and start building these components.
Here, in this article, I try to explain What are ReactJS Components with Examples. I hope you enjoy this What are ReactJS Components article.