As we've discussed many times throughout this course, a component is a function or a class that can
produce some H.T. Amelda showed to the user or handle user feedback.
At this point, we've really only been taking a look at function components moving forward.
We're gonna start to take a look at Class-Based components as well.
I want to first begin this entire section with a quick discussion on some of the differences between
class components and function components.
We're also gonna have a short discussion on something in the world of react called the Hooke's system.
So let's get to it.
All right, so first off, quick diagram here to help you understand how to react, Eco-System used
to be.
This diagram right here is react in the past, in many years ago.
It used to be that with react, we made use of functional components only for producing content to show
to the user.
And that's really what I've been telling you throughout this course so far.
And it used to be that we made use of class components.
Anytime that we wanted to make use of something called the Lifecycle Method System, which we'll discuss
in due time and any anytime we want to use the state system, which is how we somehow update content
displayed to the user.
Again, this is how everything used to be.
Most notable difference between class components and functional components is that functional components
were much more restricted in nature.
They did not have access to that lifecycle method system or the state system.
And that meant that we only used functional components to show content to our users.
That's it.
But now it's much later in the development cycle of react and functional components have gotten a little
bit more fancy over time.
And that is most notably through the introduction of something called the Hooke's system.
This diagram right here is how react is today in the present time.
With this system, the REACT team have given many more capabilities to function components and through
the use of this whole system, function components can now execute code at specific points in time,
which is roughly equivalent to the lifecycle method system tied to class components.
In addition, function components can make use of the state system.
So really today with react function components are largely now much more similar to class components
than they used to be.
That really starts to beg the question.
This is the first question that starts to come up if class components and function components today
are more or less the same thing or have the same capabilities.
Which one should we actually use and which one should we learn?
Well, there's a couple of different ways to approach this question.
The first thing I want you to understand is that for any companies that are maintaining or building
established projects or products.
So in other words, if there's some company out there that's been working the same react up for a number
of years, chances are they are making use of class based components because that used to be the way
and the only way that we could work with the state system and lifecycle methods and so on.
Any company that is working on a newer project might be making use of either Class-Based components
or function based components.
So the other day, the real thing you need to understand here is that you have to understand both class
components and function components with the hook system.
You have to know both.
You can't just learn one and say, oh, I understand react.
You really have to understand both different approaches.
Now, I can actually show this to you very easily.
The second tab right here, I've got a Web page open.
This is a dashboard at stripe, dot com stripe.
If you've never heard of it is a payment processor.
So they handle credit card payments and so on.
Stripe is a company currently worth thirty six billion dollars.
This is a company with a tremendous amount of money to throw around.
They have a tremendous amount of engineering resources.
So without a doubt, if they wanted to, they could rebuild this application they see on the screen,
which is made with react using only function components.
Let me show you something really interesting.
Over here on the right hand side, I've got a little menu open.
This is a little menu that's showing a list of all the different function components that are currently
being displayed on the page.
So every single item that you see here is a function component.
I can scroll through this and you'll see very quickly that there are hundreds of different components
in use.
Some of these don't really have any job.
But to show some content to a user.
So, for example, maybe this box component right here.
Well, it's probably meant to just contain some other element.
There's probably not any fancy functionality tied to this component.
I can also filter in this list by class components.
And when I do, you're going to see once again that there are several hundred class components in use
on this page as well.
So long story short, this is a application made by a 36 billion dollar company and they still use both
class components and function components.
This really should be proof to you that you really have to understand both approaches.
Now, why is this all so relevant?
Well, here's what it really comes down to in the context of this course.
If you just try to jump in and learn the hook system with function components, it ends up being really
hard and really challenging.
And I should know I've made a react course before where I just showed, hey, let's just learn function
components with the hook system and then go on to learn redux.
And I found that people had a really tough time understanding Hooke's when it is introduced right from
the get go.
What is much easier to learn and understand is to first understand the state stuff in lifecycle methods
tied to class components, and then to take that knowledge and learn more about hooks and then go into
the world of redux.
And that's what we're going to do in this course.
So in the coming sections, you're going to see a bunch of videos, all about class components.
We're going to learn a lot about the state system and react in lifecycle methods.
And then after that, we're going to take all that knowledge and apply it to learn the Hooke's system
in react.
And that's gonna make this entire process a lot easier on you.
And to be honest, it's actually can go a lot faster because it's gonna be so much easier to understand.
All right.
Now, we've got a good idea of what we're gonna do.
Let's get to it in the coming videos.