Welcome back.
I know I know we want to get coding one last set up before we start building our first component.
I want you to change this function app and do something that I'll explain as we go through the course.
You see, this is called a functional component.
I want to change this into a class in the way we do this is, we say class app extends.
React dot component.
We're going to remove.
This since it's not a component.
And then we're going to return this in a render method.
So this what you see here.
You make sure I had.
The proper brackets.
Like this, I'm going to save this.
I get react is not defined because I have to import react.
From React.
And why did I get that, because I'm using React Dot component here.
So if I save that?
I get OK app is defined, but never use.
That's because of the index.
Dot js file.
Let's just for now use app again.
Everything is good, so I've created a class component, let's just make sure this works before I explain
it to you.
Look at that.
Everything works as expected, so I didn't change anything, but I did convert this into a class.
Now, I want us to start off like this, because back in the day when Create React app got started.
This is how the default app dodges file was like.
And as you'll see, we'll have to convert this into a class to create what we call a class component
versus a functional component.
Again, don't worry about the naming, but essentially what I'm doing is I'm using the React package
that we installed using Dart component.
This extends or gives us the power that comes inside of the React package.
So I make an app and I say, Hey, I want the power of React component that I've installed in this React
component automatically detects this render method.
Usually, you want to add a render method because automatically part of the functionality is that it's
going to run the render and return.
Something returns some sort of view.
In here, so if you're wondering how all this magic is happening, it's all in the React dot component.
Again, something we'll going to dive deeper and deeper into.
But as a starting point, I want us to start off with the class extends React component, and then from
there we're going to dive deeper and deeper now.
The final thing is that when we go into the next lesson, you might see some things different.
You might not see this react US trick mode create React app is constantly updating, so they add new
nice features that doesn't really affect us immediately, but just makes things simpler.
So react off strict mode just gives us extra protection that again, we don't need to worry about.
So you won't see that in the next video and you won't see things like report web vitals.
In the next video, you might see something like Register Service Worker, which used to be part of
Cory React app, but once again, we're going to ignore that we're going to focus on what I said the
source folder and building out our components.
So let's get started.