‫So, let's now create
‫our very first class component.
‫And to do so we are finally going to create a brand new app.
‫So open up your terminal or command prompt
‫and then NPX, Create-React-App, version five.
‫And then the name of this app
‫is going to be "Classy Weather".
‫Like this.
‫So we are going to create a weather app basically
‫and since it's based on React classes
‫it is called "Classy Weather".
‫And in the time while this is installing,
‫let me just quickly show you the app.
‫So here it is.
‫And so we can very simply search
‫for a location here, let's say London.
‫And it will then load the weather
‫for today and for the next six days.
‫So basically for the current week, and that's it.
‫So it's a very simple application
‫but it's fetching this weather data here
‫from an api of course.
‫And here we can also, of course,
‫search for any location that we want.
‫So let's say I'm in Lisbon and so,
‫well, it is going to rain tomorrow apparently
‫and therefore also where I live, I assume.
‫But anyway, let's now wait
‫for this to install our application.
‫And then once that's finished, let's meet back here.
‫Okay, looks like that finished.
‫And so, as always,
‫let's grab our starter files from the classy weather.
‫So these two, and then where is my folder?
‫Oh, apparently I installed it in the wrong folder.
‫So let's come here to the root folder.
‫And there it is.
‫So let's put that right here and try again.
‫So I'll just rename it again.
‫And then inside our source, let's paste these two files.
‫And also, as always,
‫let's get rid of all the junk files here.
‫So yeah, I think those are the ones.
‫So all we need are the index.js, the app, our new CSS
‫and the starter.js, which is coming from our starter files.
‫All right, and with this, we are ready to open
‫up our project folder in VS Code once again.
‫Okay, and so let's just open up our app.js and index.js
‫to clean up that file.
‫And that should be it.
‫And also clean up this file.
‫So let's delete everything here
‫and get started with our very first class component.
‫So basically, back in the day before 2019, in React
‫we would write components, not using functions
‫but using JavaScript classes.
‫So the class keyword, then the name of the component
‫and then this class would actually be a child class
‫of React.Component.
‫So extends and then React.Component.
‫And so therefore we would have to also import React
‫in every component file.
‫So import React from React.
‫Okay, and then we should also export this component.
‫Let's do that down here.
‫Export default Counter.
‫Now okay.
‫And so this is how we would set up
‫a brand new component using classes.
‫So again, using ES six classes,
‫so modern JavaScript classes
‫which extend the parent class of React component.
‫And so this parent class gives us a couple of methods
‫and one of them is the render method.
‫So every single React component that is written
‫with classes needs to include the render method.
‫So this render method is basically equivalent
‫to the function body of a function component.
‫So every single class component needs to have
‫a render method which returns some JSX.
‫So let's just do that here.
‫And JSX of course, works in the exact same way
‫as in function components.
‫Now what we're going to do here
‫is a very simple date counter again.
‫So similar to what we did,
‫I think, in one of the challenges before.
‫So let's just write a minus and a plus button.
‫And in the middle we just are going to have some span
‫with the current number.
‫So let's start at zero.
‫All right.
‫And so, this is actually enough as a bare bones component.
‫And so let's try it out now by coming to our terminal.
‫And then as always, NPM start.
‫So let's wait for it.
‫And there it is.
‫Wow, that doesn't look really nice.
‫Let's make this like really big,
‫so we can actually see something.
‫Also, as always, let's bring up our developer tools
‫and okay.
‫So next up,
‫let's actually add some state to our component,
‫which works in a very different way
‫than in function components,
‫because here we cannot use the use date hook.
‫So hooks are only for class components
‫but not, of course, for class components.
‫That's the huge difference between the two actually.
‫And so in a class component,
‫if we want to add state to a component,
‫we first need to call the constructor method.
‫So this one is part of all ES six classes
‫and then this one receives props
‫and it calls the parent constructor as well
‫by using the super method or the super function.
‫And it does so by passing in the props again.
‫So this is a lot of boiler plate
‫that we have to write when we want to use class components.
‫And so this is why basically all React developers
‫now prefer functional components.
‫So again, this is a lot of work
‫and super annoying to having to write
‫all this boiler plate that really doesn't do anything.
‫I mean, at least not anything super useful.
‫Okay, and so now to initialize state,
‫we do that also right here in the construction method.
‫So that's because this method here is called
‫each time a new object is instantiated from this class.
‫And so that's just how ES six classes work,
‫which I hope you're familiar with, but if not,
‫that's also not a big deal at all.
‫But anyway, here we are now defining basically
‫a state property on the current object.
‫So the current component will get the state
‫that we define here.
‫So that has to be an object.
‫And then for each state variable that we want,
‫we need to create one property in this object.
‫So we want to count to start at one.
‫And so this is yet another huge difference
‫between functional and class components.
‫So in class components, again,
‫we only have one huge state object
‫and not multiple state variables
‫like we do with the use state hook.
‫But anyway, let's use actually a different value here
‫so that now we can access that here in our render method.
‫So instead of the zero, let's actually access now
‫this state and the way we have to do this is again
‫a little bit annoying.
‫So we have to write this.state.count.
‫So the this keyword here will, in this case,
‫simply point to the current component instance.
‫And so then from there we read the state
‫and from there the count.
‫And so in class components
‫you will see this kind of thing all the time.
‫It's always gonna be this.state.something
‫or this.props.something.
‫But anyway, let's now save this.
‫And we see that indeed our value here got updated to five,
‫so it's reading our value from the state now.
‫And so next what we need to do is to then of course
‫attach some event handlers to these buttons here
‫to then actually update the state.
‫So let's do that in the next lecture.