Back to: ReactJS Tutorials
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.
ReactJS Components:
Let us now dive into all these important basics and fundamentals. And for that keep in mind what you learned in the first section.
React is a JavaScript library for building user interfaces. And we also learned that, in general, HTML, CSS, and JavaScript are about building user interfaces as well. But we also mentioned in the first section that we use libraries like ReactJS because that simplifies building those user interfaces.
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.
In the end, components are just a combination of HTML code, CSS code for styling, and possibly JavaScript code for some logic. And you do not have to reuse a component to make it a component. It is just one of its traits that it is reusable. But on this user interface which you see above, there would be more components than just these expense items and these chart bars.
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.
Having reusable building blocks helps us avoid repetition, and in programming it is good. Having a separation of concerns helps us with keeping our code base small and manageable instead of having one large file which holds all the HTML code and all the JavaScript logic.
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:
React is all about components and we hope that it is clarified to you why it is all about components and what exactly a component is. So, the next question is, how exactly is a component built? In general, it is just important to keep in mind what we mentioned earlier, in the end, user interfaces are about HTML, CSS, and JavaScript.
And therefore, all these components are about combining HTML, CSS, and JavaScript. When we work with React and we build components, in the end, we just combine HTML, CSS, and JavaScript in all these components together to build the entire user interface. Though CSS of course matters and we are going to add CSS in this course, it is the least important part here.
Mostly React components are about combining HTML and JavaScript and then you also can add CSS but that is not the focus of React. How you can make sure that your components look beautiful? So long story short, react is all about components and about building these components which we combined.
React allows you to create these reusable and reactive components consisting of HTML and JavaScript and a bit of CSS, and you are going to see what reactive means in detail later.
Now here is the important part though, as you will learn throughout this course, react uses something which is called a declarative approach for building these components. And you will see what exactly that is, but it basically means that with React, you will not tell React that a certain HTML element should be created and inserted in a specific place on the user interface as you would be doing it with Vanilla JavaScript.
Instead with React and that is really important, you will always define the desired end state, the target state, or possibly also different target states depending on different conditions and it’s then ReactJS’s job to figure out which elements on the actual webpage might need to be added or removed or updated. And you do not write these concrete DOM updating instructions on your own as you would be doing it with just JavaScript, instead with React and React components, you just define these end states and under which conditions, which state should be used, and then React will do all of the rest under the hood.
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.
