1 00:00:01,110 --> 00:00:03,840 ‫Okay, so let's start working 2 00:00:03,840 --> 00:00:06,333 ‫on the Classy Weather application. 3 00:00:07,860 --> 00:00:12,540 ‫And let's start by duplicating this file here. 4 00:00:12,540 --> 00:00:16,830 ‫And then let's call this one here "the counter" 5 00:00:16,830 --> 00:00:20,730 ‫so that we can keep the code that we wrote previously. 6 00:00:20,730 --> 00:00:23,700 ‫And so now let's delete everything from here 7 00:00:23,700 --> 00:00:25,293 ‫and start from scratch. 8 00:00:26,460 --> 00:00:31,460 ‫So we start by importing React from React, 9 00:00:32,940 --> 00:00:37,832 ‫and then again we use a JavaScript class, 10 00:00:37,832 --> 00:00:42,067 ‫we call it "app" and it need to extend 11 00:00:42,067 --> 00:00:47,067 ‫"React dot component" so that we can inherit 12 00:00:47,280 --> 00:00:49,890 ‫all the things that we need from React 13 00:00:49,890 --> 00:00:51,510 ‫here inside this class. 14 00:00:51,510 --> 00:00:56,467 ‫For example, the render method to return some JSX. 15 00:00:57,570 --> 00:01:01,110 ‫So let's actually start writing that JSX 16 00:01:01,110 --> 00:01:03,813 ‫for our Classy Weather application. 17 00:01:04,770 --> 00:01:09,750 ‫So starting with a div of the app class name. 18 00:01:09,750 --> 00:01:11,610 ‫And as always, you can check out the 19 00:01:11,610 --> 00:01:15,633 ‫CSS file that is part of this section. 20 00:01:16,680 --> 00:01:20,553 ‫Let's start with an H1 with the name of the app. 21 00:01:22,050 --> 00:01:24,330 ‫So "Classy Weather". 22 00:01:24,330 --> 00:01:28,199 ‫Then let's create a div with an input field. 23 00:01:28,199 --> 00:01:31,650 ‫And so this field will basically 24 00:01:31,650 --> 00:01:36,330 ‫be for the location for which we want to search the weather. 25 00:01:36,330 --> 00:01:39,093 ‫So this will be of the type of text. 26 00:01:40,050 --> 00:01:45,050 ‫And let's also add a placeholder, "search for location." 27 00:01:49,376 --> 00:01:51,480 ‫Okay, and now all we need to do 28 00:01:51,480 --> 00:01:54,543 ‫is to export that component. 29 00:01:57,061 --> 00:01:59,070 ‫And there we go. 30 00:01:59,070 --> 00:02:02,340 ‫We just need to make this a lot smaller 31 00:02:02,340 --> 00:02:05,070 ‫so that it actually fits our screen. 32 00:02:05,070 --> 00:02:08,070 ‫And so now here we can search for any city. 33 00:02:08,070 --> 00:02:11,433 ‫So just like here in this demo application. 34 00:02:12,630 --> 00:02:16,743 ‫Now here in this app, we for now, also want a button. 35 00:02:18,030 --> 00:02:20,283 ‫So a button to search for the weather. 36 00:02:21,270 --> 00:02:24,273 ‫So "get weather" like this. 37 00:02:25,986 --> 00:02:27,540 ‫Okay, and next up, let's make this 38 00:02:27,540 --> 00:02:30,243 ‫input field here a controlled element. 39 00:02:31,314 --> 00:02:35,820 ‫So an element where React controls and owns the state. 40 00:02:35,820 --> 00:02:38,340 ‫And so this idea of controlled elements 41 00:02:38,340 --> 00:02:42,720 ‫is exactly the same as before in function components. 42 00:02:42,720 --> 00:02:45,240 ‫So many of the things that we learned previously 43 00:02:45,240 --> 00:02:48,300 ‫still apply to class components. 44 00:02:48,300 --> 00:02:50,430 ‫And so this means that we now need to 45 00:02:50,430 --> 00:02:54,900 ‫give this component state, and remember that we do that 46 00:02:54,900 --> 00:02:57,930 ‫by calling the constructor method, 47 00:02:57,930 --> 00:03:00,090 ‫which is a method that is available 48 00:03:00,090 --> 00:03:02,340 ‫on all JavaScript classes. 49 00:03:02,340 --> 00:03:04,860 ‫So this is not coming from React, 50 00:03:04,860 --> 00:03:08,070 ‫but this one is called with props 51 00:03:08,070 --> 00:03:11,490 ‫so that we can then call the parent component. 52 00:03:11,490 --> 00:03:16,413 ‫So that is React component by using here the super keywords. 53 00:03:17,310 --> 00:03:19,713 ‫And again, we do that with props. 54 00:03:21,180 --> 00:03:23,790 ‫Okay, so this is really like a recipe 55 00:03:23,790 --> 00:03:26,580 ‫that you need to follow and it's always the same. 56 00:03:26,580 --> 00:03:28,410 ‫And so that's why we say that these 57 00:03:28,410 --> 00:03:32,190 ‫class components have a lot more boiler plate code. 58 00:03:32,190 --> 00:03:35,100 ‫So it's all of this stuff that doesn't really do much 59 00:03:35,100 --> 00:03:38,583 ‫but which we still have to do in order to make this work. 60 00:03:39,900 --> 00:03:42,780 ‫But anyway, let's now define state again 61 00:03:42,780 --> 00:03:47,780 ‫by using "this dot state" and then setting it to an object. 62 00:03:49,200 --> 00:03:52,260 ‫And this one will have the location property. 63 00:03:52,260 --> 00:03:56,081 ‫And let's start with a default location. 64 00:03:56,081 --> 00:03:58,260 ‫So for example, Lisbon. 65 00:03:58,260 --> 00:04:03,260 ‫And so now just like always, we use this state as a value 66 00:04:04,800 --> 00:04:06,727 ‫but now that state lives in 67 00:04:06,727 --> 00:04:11,640 ‫"this dot state dot location." 68 00:04:11,640 --> 00:04:14,790 ‫So as we save this, we see that immediately 69 00:04:14,790 --> 00:04:18,422 ‫our state got added to our input field. 70 00:04:18,422 --> 00:04:23,160 ‫Nice. Now all we have to do is to then list 71 00:04:23,160 --> 00:04:28,160 ‫for the change event and update the state as the user types. 72 00:04:28,380 --> 00:04:32,400 ‫And so again, we get the current event 73 00:04:32,400 --> 00:04:34,830 ‫and then here we set the state. 74 00:04:34,830 --> 00:04:37,500 ‫So in class components we do this 75 00:04:37,500 --> 00:04:41,100 ‫by using "this dot set state" 76 00:04:41,100 --> 00:04:43,293 ‫and then we pass in the new object. 77 00:04:44,460 --> 00:04:47,043 ‫Or at least the properties that have changed. 78 00:04:48,900 --> 00:04:53,900 ‫So location will be equal to "e dot target dot value." 79 00:04:55,950 --> 00:04:58,173 ‫And so if we reload this now, 80 00:04:59,850 --> 00:05:01,740 ‫then that's working just fine. 81 00:05:01,740 --> 00:05:05,280 ‫Then we can see that also here in the dev tools. 82 00:05:05,280 --> 00:05:07,200 ‫So you see that just like before 83 00:05:07,200 --> 00:05:10,140 ‫we can see the entire state down here. 84 00:05:10,140 --> 00:05:13,440 ‫The only difference is that now it doesn't say hooks 85 00:05:13,440 --> 00:05:15,930 ‫and it doesn't have here the numbers 86 00:05:15,930 --> 00:05:17,913 ‫for the hooks of course as well. 87 00:05:18,780 --> 00:05:22,950 ‫But besides that, yeah, everything works the same. 88 00:05:22,950 --> 00:05:26,430 ‫Now notice that here in this event handler function 89 00:05:26,430 --> 00:05:29,910 ‫we didn't have to manually bind the disc keyword 90 00:05:29,910 --> 00:05:31,380 ‫like we did before. 91 00:05:31,380 --> 00:05:33,720 ‫We only have to do that when we define 92 00:05:33,720 --> 00:05:36,600 ‫the event handler as an outside method, 93 00:05:36,600 --> 00:05:39,573 ‫which is exactly what we will do next. 94 00:05:40,500 --> 00:05:42,780 ‫So basically as an event handler 95 00:05:42,780 --> 00:05:45,490 ‫for the event of clicking here on this button 96 00:05:46,650 --> 00:05:50,703 ‫so let's do that now, let's call it "fetch weather." 97 00:05:53,070 --> 00:05:55,650 ‫And for now we will only just log 98 00:05:55,650 --> 00:06:00,650 ‫something here to the console, like "loading data." 99 00:06:01,053 --> 00:06:05,280 ‫And then let's also again log the disc keyword here. 100 00:06:05,280 --> 00:06:09,123 ‫So just so we see again, the problem that we have. 101 00:06:12,630 --> 00:06:16,800 ‫So let's attach that here. 102 00:06:16,800 --> 00:06:19,620 ‫And so again, that is "this dot." 103 00:06:19,620 --> 00:06:21,933 ‫And then whatever name of the method. 104 00:06:23,490 --> 00:06:24,843 ‫So let's see. 105 00:06:26,100 --> 00:06:30,273 ‫And while here we have the wrong prop name. 106 00:06:31,560 --> 00:06:32,793 ‫Let's just reload that. 107 00:06:33,629 --> 00:06:36,240 ‫And now as we click here, we get loading data. 108 00:06:36,240 --> 00:06:38,649 ‫And we also get again that 109 00:06:38,649 --> 00:06:40,323 ‫our disk keyword is undefined. 110 00:06:41,220 --> 00:06:43,290 ‫And that's going to be a problem because we 111 00:06:43,290 --> 00:06:47,340 ‫will need the disk keyword here to later set some state. 112 00:06:47,340 --> 00:06:50,730 ‫And so just like we did in our counter 113 00:06:50,730 --> 00:06:52,710 ‫we need to now explicitly bind 114 00:06:52,710 --> 00:06:55,443 ‫the disk keyword to this method. 115 00:06:56,700 --> 00:06:59,040 ‫So we say "this dot weather" is equal 116 00:06:59,040 --> 00:07:02,280 ‫to this "dot fetch weather." 117 00:07:02,280 --> 00:07:07,280 ‫And then we explicitly bind the disc keyword to this method. 118 00:07:07,920 --> 00:07:10,020 ‫So basically giving it access 119 00:07:10,020 --> 00:07:12,270 ‫to the current component instance 120 00:07:12,270 --> 00:07:15,540 ‫so that then we can set the state on there. 121 00:07:15,540 --> 00:07:18,390 ‫So give it a save, try that again. 122 00:07:18,390 --> 00:07:23,040 ‫And now indeed we get our current component instance here 123 00:07:23,040 --> 00:07:25,350 ‫so it has our state and everything. 124 00:07:25,350 --> 00:07:27,060 ‫And if we change that here 125 00:07:27,060 --> 00:07:29,760 ‫then of course it won't change here. 126 00:07:29,760 --> 00:07:32,970 ‫But if we do that again, then yeah 127 00:07:32,970 --> 00:07:36,960 ‫now we have the new updated state right there. 128 00:07:36,960 --> 00:07:40,200 ‫Okay. And with this, we are now ready to actually 129 00:07:40,200 --> 00:07:42,933 ‫fetch the weather data in the next video.