Back to: ReactJS Tutorials

Summary of React Component:

In this article, I am going to discuss the Summary of React Component. In our previous articles, we have understood the most important concept of React which is components.

You build user interfaces by building and combining components. And for that, we had a look at the React Core Syntax and JSX. We also had a very detailed look at the building and worked with components and props. And that already leads to the last part, data. We learned how to share data across components through the props concept. Now, maybe you already noticed one important thing with all these components which we are building, in the end, we’re just splitting up our code across multiple files and building blocks so that if we want to have more than one expense item, we can just use our custom ExpenseItem component multiple times instead of repeating all that code multiple times, that’s the idea behind components.

In the end, what ends up on the screen are just the default HTML elements. If you inspect your page with the developer tools with the Elements tab,

In the elements tab, you will notice that you will not see your custom components here. There is no card or ExpenseItem component, you just see divs and H2 elements, and so on. And that is how the web works and how React works. These custom components are not really HTML elements. You just use them in your React code or in your JSX code. What ends up on the screen are just the HTML elements. Because, ultimately, every custom component you build either uses these built-in HTML elements or uses another component which, at some point, if you drill into your components deeply enough, will end up with built HTML elements.

This is an important takeaway and something important to keep in mind. Now, the application we built thus far is great because we had learned about components and props with it. And these are two of the most important concepts you got to know when working with React.

This application as we built it thus far also has a downside. In the end, it’s still static. Yes, we have reusable components, which can be configured with props but, ultimately, we have the expenses array in the App.js file and this array never changes. It’s still a static application. Nothing is changing here. As a user, we have no chance of interacting with this application. And therefore, we’re going to change it in the next section.

In our upcoming articles, we will learn a new concept called state. Now, before we go there, we’ve got just three more things that we want to cover here. The first concept is JSX. We mentioned that we’ll take a closer look at that and we’re going to do that in the next article. We will see how it works. So we strongly recommend you read our next article so that you will have a clear understanding of how the JSX code works.

Now, the other two things we want to have a look at are how we organize our files, and how we write our functions. And, therefore, let’s dive into these concepts before we finish this section.