All language subtitles for 4. Components as Building Blocks

So as I have mentioned a few times already, React is all about components.

But now let's formally learn what React components are and why they are so important.

So components are the most fundamental concept in React simply because React applications are in fact

entirely made out of components.

So when you look at any React app, there's nothing that is not a component or at least not inside of

some component.

Therefore, I like to say that components are the building blocks of any user interface in React.

In fact, basically all React does is to take components and draw them onto a web page.

So on to a user interface or UI for short.

Now that sounds simple, but it's actually the main job of React in more technical terms.

React renders a view for each component and all these views together make up the user interface.

So we can also think of a component as being a piece of the user interface.

Right now, one key property of components is that each component has its own data, JavaScript, logic

and appearance.

So basically each component describes how it works and what it looks like, which makes them such a

great way of building user interfaces.

And speaking of building user interfaces, based on what we have just learned, it makes sense that

in React we build complex UIs like this one by building multiple components and then combining these

components like Lego pieces.

So here we can identify components like a video player, a menu, this questions list, and also this

part where we can refine the displayed questions.

So those are like the big components, but we can identify many other smaller components in this UI

as well, like for example, these filters right here.

And what you can see is that this filter is inside the refine questions component, right?

So actually, one thing that we do all the time is to place components inside of other components or

in other words, we nest components inside each other.

So nesting components is a key aspect of using components in React.

Along with component reusability.

Now notice how we have three similar questions in the questions list.

And so we can create one question component and then reuse it three times here.

Now, of course, the data for each of them is different, but we can easily pass different data into

different question components by using something called props, which we're going to talk about later.

So whenever we need some duplication in our UI, we create a new component and reuse it as many times

as necessary.

So as you can see, one crucial skill that you will learn throughout this course is how to break a design

like this into its components.

Now, one thing that helps with that and with analyzing the components that we create is a component

tree like this one.

So this shows the hierarchy that exists between the components that make up the user interface, and

it makes it really easy to understand how all of these components are nested inside each other and really

how they relate to one another.

We can also clearly see relationships between components like the refine questions being the parent

component of filters or the other way around that filters is a child component of refine questions and

we use these terms so parent and child component all the time in React.

And so it's important to understand what they mean.

And so a component tree like this is perfect to understand these kinds of relationships between components.

And I think that this is all you need to know about components.

For now, we will go really deep into some important concepts like reusability later.

But for now, let's start to put some of these concepts into practice.