All language subtitles for 004 Component Architecture_en

So we learned that React had this revolutionary idea of let me handle the DOM updates because I know

the best way to do them, the most efficient way, you don't have to do that.

Just tell me what the page should look like next.

Big game changer was this idea of building websites like Lego blocks as designed around the concept

of reusable components.

Just like you see in this app, how each square or rectangle has different color.

Well, these are all components.

Each of these individual pieces create this whole app react had this idea of small components that you

put them together to form bigger components.

So you had the profile picture component, you had the add component, and then you had the navigation

bar component.

And within here, you had components containing components, so you had a component in here that was

surrounded by another component that was surrounded by an ever bigger component, just like Lego blocks.

And all these small components, whether they're large or big, can be used in different places.

For example, I can have this component just copied over to multiple locations because while they're

the same thing and I can even move these over to different projects and reuse them.

So people can build these components like material UI components that I could just copy and paste this

code and added to my projects like so.

You had different component libraries like React Bootstrap again or something like Blueprint.

So people can now share these components across different websites, across different projects, and

they will all work.

Now, this idea of components and react.

In a simple term is just plain JavaScript functions that you write.

So we have the state of Europe or that is any data that describes our app, for example, the user is

logged in, whether it's true or false and maybe friends.

Then components are created based on that data.

Well, simply as functions and don't worry, don't get intimidated by this.

This is something that we'll cover throughout the course.

But components are simply just JavaScript functions that receive some sort of input or attributes which

we call props, and in return it returns this thing that kind of looks like HTML, but inside of JavaScript.

And these components can be built like this as a function or even as a class, but the key here is that

based on the state and these components that we built, we have an entire component that we can add

to our page and reuse maybe over here as well if we wanted to just like Lego blocks.

Now, here is a simple react to do application, and I'm going to be using something called the React

Developer Tools, which I recommend you install as well in the Chrome Webster.

You can add it to Google as an extension.

And what it allows you is when you click view developer developer tools.

You'll now have the element STAP, which shows you the don.

Of your app, which you can see over here.

But also a new tab called React.

And this react plugin actually allows you to see the components that we build into an application.

Now, you can see over here that this isn't exactly HTML.

We're creating custom tags like heter or filtered lists or footer that isn't valid html, but you'll

see that inside here, all of these are actually well built by ASML elements like Heter, H1 or input.

So, again, this idea of a component's architecture means that we can have some sort of data about

our application and we build these components ourselves and these components are what we call riak components

that we built out of XML tags that signify a component.

And each of these components worked together to eventually have our app.

And this component architecture is really, really key in rehab because it allows us to reuse and share

components between projects so that if you wanted a date picker on your app, well, instead of maybe

building it yourself, you can just Google for it and say react date picker component and just use somebody

else's code.

But there's two more key concepts to get through, so let's do that in the next video.