‫Let's now remove some
‫of the boilerplate code that we have been writing
‫using the modern JavaScript class fields feature.
‫But before we do that, let's quickly duplicate
‫our file again and rename this one to version 1,
‫so then you can keep both versions of doing things.
‫So yeah, let's come back here to our app component
‫and now use the class fields feature.
‫So, in JavaScript with class fields,
‫we can basically declare properties directly
‫on a component instance, right in the class definition,
‫so outside of any method.
‫So, basically what we can do is taking this
‫and pasting it right here.
‫And so with this,
‫we can then completely remove this thing from here.
‫And notice that here we do not need any "this" keyword word
‫because this will basically simply be placed
‫on the component instance.
‫And since the "this" keyword is also the component instance,
‫well then, that's really not needed anymore.
‫So we just basically take
‫everything that we want to declare on a class instance
‫and place that here outside.
‫So again, that's a JavaScript feature, not a React feature.
‫And so if we now save this and then run our code again here,
‫then you see that it still works.
‫So, it's doing the exact same thing.
‫So, that's already a huge win, but we can do even better
‫because we can also define methods as class fields as well.
‫So, instead of writing a method in the traditional way,
‫we can instead do this.
‫So let's comment out this part.
‫And so now we can do fetch Weather like this
‫and then we can simply assign a function value
‫to this variable.
‫And the great thing about this
‫is that we can now use an arrow function here.
‫And the great advantage of that is that arrow functions
‫do not lose their binding to the "this" keyword.
‫So arrow functions don't have their own "this" keyword,
‫and instead they get access to the surrounding one,
‫and therefore we then no longer will have to do this.
‫So watch as I type async, and then again, an arrow function,
‫and I'm missing just the curly braces here
‫but that should be enough.
‫And so now I can delete this.
‫So let's try that.
‫And yeah, it still works exactly the same.
‫And so now we no longer need this.
‫So yes, Lint even tells us that this
‫is now a useless constructor.
‫So with this, we got rid
‫of all the boilerplate code that we had
‫and the biggest win by far is this one here,
‫so that we no longer need
‫to manually bind the "this" keyword
‫to our event handler methods.
‫So now these methods are basically defined
‫as a normal variable.
‫And so then using the async function,
‫that problem that we had
‫with the "this" keyword simply disappears.
‫Now, this function here is really huge,
‫but unfortunately for us, with class components,
‫there is no easy way of extracting it into,
‫well, somewhere else, basically.
‫So we cannot just remove this function from here
‫like we could do with custom hooks in function components.
‫So if we have a lot of long methods like this,
‫then our components can get really annoyingly long.
‫But again, there's not really a way around this
‫but I still wanted to mention this here
‫just so you could see another great advantage
‫of functional components.