‫Okay, so let's start working
‫on the Classy Weather application.
‫And let's start by duplicating this file here.
‫And then let's call this one here "the counter"
‫so that we can keep the code that we wrote previously.
‫And so now let's delete everything from here
‫and start from scratch.
‫So we start by importing React from React,
‫and then again we use a JavaScript class,
‫we call it "app" and it need to extend
‫"React dot component" so that we can inherit
‫all the things that we need from React
‫here inside this class.
‫For example, the render method to return some JSX.
‫So let's actually start writing that JSX
‫for our Classy Weather application.
‫So starting with a div of the app class name.
‫And as always, you can check out the
‫CSS file that is part of this section.
‫Let's start with an H1 with the name of the app.
‫So "Classy Weather".
‫Then let's create a div with an input field.
‫And so this field will basically
‫be for the location for which we want to search the weather.
‫So this will be of the type of text.
‫And let's also add a placeholder, "search for location."
‫Okay, and now all we need to do
‫is to export that component.
‫And there we go.
‫We just need to make this a lot smaller
‫so that it actually fits our screen.
‫And so now here we can search for any city.
‫So just like here in this demo application.
‫Now here in this app, we for now, also want a button.
‫So a button to search for the weather.
‫So "get weather" like this.
‫Okay, and next up, let's make this
‫input field here a controlled element.
‫So an element where React controls and owns the state.
‫And so this idea of controlled elements
‫is exactly the same as before in function components.
‫So many of the things that we learned previously
‫still apply to class components.
‫And so this means that we now need to
‫give this component state, and remember that we do that
‫by calling the constructor method,
‫which is a method that is available
‫on all JavaScript classes.
‫So this is not coming from React,
‫but this one is called with props
‫so that we can then call the parent component.
‫So that is React component by using here the super keywords.
‫And again, we do that with props.
‫Okay, so this is really like a recipe
‫that you need to follow and it's always the same.
‫And so that's why we say that these
‫class components have a lot more boiler plate code.
‫So it's all of this stuff that doesn't really do much
‫but which we still have to do in order to make this work.
‫But anyway, let's now define state again
‫by using "this dot state" and then setting it to an object.
‫And this one will have the location property.
‫And let's start with a default location.
‫So for example, Lisbon.
‫And so now just like always, we use this state as a value
‫but now that state lives in
‫"this dot state dot location."
‫So as we save this, we see that immediately
‫our state got added to our input field.
‫Nice. Now all we have to do is to then list
‫for the change event and update the state as the user types.
‫And so again, we get the current event
‫and then here we set the state.
‫So in class components we do this
‫by using "this dot set state"
‫and then we pass in the new object.
‫Or at least the properties that have changed.
‫So location will be equal to "e dot target dot value."
‫And so if we reload this now,
‫then that's working just fine.
‫Then we can see that also here in the dev tools.
‫So you see that just like before
‫we can see the entire state down here.
‫The only difference is that now it doesn't say hooks
‫and it doesn't have here the numbers
‫for the hooks of course as well.
‫But besides that, yeah, everything works the same.
‫Now notice that here in this event handler function
‫we didn't have to manually bind the disc keyword
‫like we did before.
‫We only have to do that when we define
‫the event handler as an outside method,
‫which is exactly what we will do next.
‫So basically as an event handler
‫for the event of clicking here on this button
‫so let's do that now, let's call it "fetch weather."
‫And for now we will only just log
‫something here to the console, like "loading data."
‫And then let's also again log the disc keyword here.
‫So just so we see again, the problem that we have.
‫So let's attach that here.
‫And so again, that is "this dot."
‫And then whatever name of the method.
‫So let's see.
‫And while here we have the wrong prop name.
‫Let's just reload that.
‫And now as we click here, we get loading data.
‫And we also get again that
‫our disk keyword is undefined.
‫And that's going to be a problem because we
‫will need the disk keyword here to later set some state.
‫And so just like we did in our counter
‫we need to now explicitly bind
‫the disk keyword to this method.
‫So we say "this dot weather" is equal
‫to this "dot fetch weather."
‫And then we explicitly bind the disc keyword to this method.
‫So basically giving it access
‫to the current component instance
‫so that then we can set the state on there.
‫So give it a save, try that again.
‫And now indeed we get our current component instance here
‫so it has our state and everything.
‫And if we change that here
‫then of course it won't change here.
‫But if we do that again, then yeah
‫now we have the new updated state right there.
‫Okay. And with this, we are now ready to actually
‫fetch the weather data in the next video.