1 00:00:01,140 --> 00:00:02,910 ‫So, let's now create 2 00:00:02,910 --> 00:00:06,322 ‫our very first class component. 3 00:00:06,322 --> 00:00:11,322 ‫And to do so we are finally going to create a brand new app. 4 00:00:12,300 --> 00:00:15,146 ‫So open up your terminal or command prompt 5 00:00:15,146 --> 00:00:20,146 ‫and then NPX, Create-React-App, version five. 6 00:00:25,170 --> 00:00:27,210 ‫And then the name of this app 7 00:00:27,210 --> 00:00:31,380 ‫is going to be "Classy Weather". 8 00:00:31,380 --> 00:00:32,733 ‫Like this. 9 00:00:34,110 --> 00:00:37,706 ‫So we are going to create a weather app basically 10 00:00:37,706 --> 00:00:40,243 ‫and since it's based on React classes 11 00:00:40,243 --> 00:00:43,290 ‫it is called "Classy Weather". 12 00:00:43,290 --> 00:00:46,830 ‫And in the time while this is installing, 13 00:00:46,830 --> 00:00:48,993 ‫let me just quickly show you the app. 14 00:00:50,760 --> 00:00:52,110 ‫So here it is. 15 00:00:52,110 --> 00:00:54,480 ‫And so we can very simply search 16 00:00:54,480 --> 00:00:57,930 ‫for a location here, let's say London. 17 00:00:57,930 --> 00:00:59,520 ‫And it will then load the weather 18 00:00:59,520 --> 00:01:02,520 ‫for today and for the next six days. 19 00:01:02,520 --> 00:01:06,330 ‫So basically for the current week, and that's it. 20 00:01:06,330 --> 00:01:08,039 ‫So it's a very simple application 21 00:01:08,039 --> 00:01:11,130 ‫but it's fetching this weather data here 22 00:01:11,130 --> 00:01:13,350 ‫from an api of course. 23 00:01:13,350 --> 00:01:15,390 ‫And here we can also, of course, 24 00:01:15,390 --> 00:01:18,960 ‫search for any location that we want. 25 00:01:18,960 --> 00:01:21,496 ‫So let's say I'm in Lisbon and so, 26 00:01:21,496 --> 00:01:24,750 ‫well, it is going to rain tomorrow apparently 27 00:01:24,750 --> 00:01:28,200 ‫and therefore also where I live, I assume. 28 00:01:28,200 --> 00:01:29,610 ‫But anyway, let's now wait 29 00:01:29,610 --> 00:01:31,860 ‫for this to install our application. 30 00:01:31,860 --> 00:01:35,193 ‫And then once that's finished, let's meet back here. 31 00:01:36,390 --> 00:01:38,962 ‫Okay, looks like that finished. 32 00:01:38,962 --> 00:01:40,980 ‫And so, as always, 33 00:01:40,980 --> 00:01:45,256 ‫let's grab our starter files from the classy weather. 34 00:01:45,256 --> 00:01:50,256 ‫So these two, and then where is my folder? 35 00:01:51,930 --> 00:01:56,190 ‫Oh, apparently I installed it in the wrong folder. 36 00:01:56,190 --> 00:01:58,233 ‫So let's come here to the root folder. 37 00:02:00,180 --> 00:02:02,160 ‫And there it is. 38 00:02:02,160 --> 00:02:06,633 ‫So let's put that right here and try again. 39 00:02:08,850 --> 00:02:11,070 ‫So I'll just rename it again. 40 00:02:11,070 --> 00:02:15,363 ‫And then inside our source, let's paste these two files. 41 00:02:17,670 --> 00:02:19,020 ‫And also, as always, 42 00:02:19,020 --> 00:02:22,173 ‫let's get rid of all the junk files here. 43 00:02:23,160 --> 00:02:25,988 ‫So yeah, I think those are the ones. 44 00:02:25,988 --> 00:02:30,988 ‫So all we need are the index.js, the app, our new CSS 45 00:02:32,670 --> 00:02:37,113 ‫and the starter.js, which is coming from our starter files. 46 00:02:38,100 --> 00:02:41,310 ‫All right, and with this, we are ready to open 47 00:02:41,310 --> 00:02:44,673 ‫up our project folder in VS Code once again. 48 00:02:45,510 --> 00:02:50,510 ‫Okay, and so let's just open up our app.js and index.js 49 00:02:52,770 --> 00:02:54,573 ‫to clean up that file. 50 00:02:57,719 --> 00:02:59,643 ‫And that should be it. 51 00:03:00,960 --> 00:03:03,570 ‫And also clean up this file. 52 00:03:03,570 --> 00:03:05,760 ‫So let's delete everything here 53 00:03:05,760 --> 00:03:09,990 ‫and get started with our very first class component. 54 00:03:09,990 --> 00:03:14,880 ‫So basically, back in the day before 2019, in React 55 00:03:14,880 --> 00:03:18,000 ‫we would write components, not using functions 56 00:03:18,000 --> 00:03:21,570 ‫but using JavaScript classes. 57 00:03:21,570 --> 00:03:25,406 ‫So the class keyword, then the name of the component 58 00:03:25,406 --> 00:03:29,003 ‫and then this class would actually be a child class 59 00:03:29,003 --> 00:03:32,910 ‫of React.Component. 60 00:03:32,910 --> 00:03:36,267 ‫So extends and then React.Component. 61 00:03:39,480 --> 00:03:43,560 ‫And so therefore we would have to also import React 62 00:03:43,560 --> 00:03:45,720 ‫in every component file. 63 00:03:45,720 --> 00:03:49,073 ‫So import React from React. 64 00:03:51,930 --> 00:03:56,253 ‫Okay, and then we should also export this component. 65 00:03:57,660 --> 00:03:58,980 ‫Let's do that down here. 66 00:03:58,980 --> 00:04:01,863 ‫Export default Counter. 67 00:04:03,449 --> 00:04:04,650 ‫Now okay. 68 00:04:04,650 --> 00:04:06,960 ‫And so this is how we would set up 69 00:04:06,960 --> 00:04:10,260 ‫a brand new component using classes. 70 00:04:10,260 --> 00:04:13,290 ‫So again, using ES six classes, 71 00:04:13,290 --> 00:04:14,956 ‫so modern JavaScript classes 72 00:04:14,956 --> 00:04:19,500 ‫which extend the parent class of React component. 73 00:04:19,500 --> 00:04:22,957 ‫And so this parent class gives us a couple of methods 74 00:04:22,957 --> 00:04:25,983 ‫and one of them is the render method. 75 00:04:27,690 --> 00:04:30,360 ‫So every single React component that is written 76 00:04:30,360 --> 00:04:34,080 ‫with classes needs to include the render method. 77 00:04:34,080 --> 00:04:36,476 ‫So this render method is basically equivalent 78 00:04:36,476 --> 00:04:41,476 ‫to the function body of a function component. 79 00:04:41,490 --> 00:04:44,237 ‫So every single class component needs to have 80 00:04:44,237 --> 00:04:48,273 ‫a render method which returns some JSX. 81 00:04:50,250 --> 00:04:52,623 ‫So let's just do that here. 82 00:04:53,595 --> 00:04:57,113 ‫And JSX of course, works in the exact same way 83 00:04:57,113 --> 00:04:59,553 ‫as in function components. 84 00:05:00,990 --> 00:05:02,370 ‫Now what we're going to do here 85 00:05:02,370 --> 00:05:04,920 ‫is a very simple date counter again. 86 00:05:04,920 --> 00:05:06,900 ‫So similar to what we did, 87 00:05:06,900 --> 00:05:10,053 ‫I think, in one of the challenges before. 88 00:05:11,100 --> 00:05:15,750 ‫So let's just write a minus and a plus button. 89 00:05:15,750 --> 00:05:19,852 ‫And in the middle we just are going to have some span 90 00:05:19,852 --> 00:05:22,110 ‫with the current number. 91 00:05:22,110 --> 00:05:23,463 ‫So let's start at zero. 92 00:05:24,630 --> 00:05:25,800 ‫All right. 93 00:05:25,800 --> 00:05:30,180 ‫And so, this is actually enough as a bare bones component. 94 00:05:30,180 --> 00:05:34,816 ‫And so let's try it out now by coming to our terminal. 95 00:05:34,816 --> 00:05:37,773 ‫And then as always, NPM start. 96 00:05:39,990 --> 00:05:41,163 ‫So let's wait for it. 97 00:05:45,210 --> 00:05:46,950 ‫And there it is. 98 00:05:46,950 --> 00:05:49,170 ‫Wow, that doesn't look really nice. 99 00:05:49,170 --> 00:05:51,720 ‫Let's make this like really big, 100 00:05:51,720 --> 00:05:53,583 ‫so we can actually see something. 101 00:05:54,660 --> 00:05:58,216 ‫Also, as always, let's bring up our developer tools 102 00:05:58,216 --> 00:06:00,750 ‫and okay. 103 00:06:02,580 --> 00:06:03,540 ‫So next up, 104 00:06:03,540 --> 00:06:06,660 ‫let's actually add some state to our component, 105 00:06:06,660 --> 00:06:08,700 ‫which works in a very different way 106 00:06:08,700 --> 00:06:10,860 ‫than in function components, 107 00:06:10,860 --> 00:06:14,370 ‫because here we cannot use the use date hook. 108 00:06:14,370 --> 00:06:17,550 ‫So hooks are only for class components 109 00:06:17,550 --> 00:06:20,610 ‫but not, of course, for class components. 110 00:06:20,610 --> 00:06:23,910 ‫That's the huge difference between the two actually. 111 00:06:23,910 --> 00:06:25,530 ‫And so in a class component, 112 00:06:25,530 --> 00:06:27,834 ‫if we want to add state to a component, 113 00:06:27,834 --> 00:06:32,433 ‫we first need to call the constructor method. 114 00:06:34,680 --> 00:06:39,566 ‫So this one is part of all ES six classes 115 00:06:39,566 --> 00:06:42,015 ‫and then this one receives props 116 00:06:42,015 --> 00:06:45,510 ‫and it calls the parent constructor as well 117 00:06:45,510 --> 00:06:50,510 ‫by using the super method or the super function. 118 00:06:51,090 --> 00:06:54,690 ‫And it does so by passing in the props again. 119 00:06:54,690 --> 00:06:56,820 ‫So this is a lot of boiler plate 120 00:06:56,820 --> 00:07:00,173 ‫that we have to write when we want to use class components. 121 00:07:00,173 --> 00:07:04,290 ‫And so this is why basically all React developers 122 00:07:04,290 --> 00:07:07,050 ‫now prefer functional components. 123 00:07:07,050 --> 00:07:09,132 ‫So again, this is a lot of work 124 00:07:09,132 --> 00:07:11,431 ‫and super annoying to having to write 125 00:07:11,431 --> 00:07:16,230 ‫all this boiler plate that really doesn't do anything. 126 00:07:16,230 --> 00:07:18,783 ‫I mean, at least not anything super useful. 127 00:07:20,550 --> 00:07:23,310 ‫Okay, and so now to initialize state, 128 00:07:23,310 --> 00:07:27,090 ‫we do that also right here in the construction method. 129 00:07:27,090 --> 00:07:29,940 ‫So that's because this method here is called 130 00:07:29,940 --> 00:07:33,903 ‫each time a new object is instantiated from this class. 131 00:07:35,790 --> 00:07:38,520 ‫And so that's just how ES six classes work, 132 00:07:38,520 --> 00:07:41,370 ‫which I hope you're familiar with, but if not, 133 00:07:41,370 --> 00:07:43,503 ‫that's also not a big deal at all. 134 00:07:44,940 --> 00:07:47,172 ‫But anyway, here we are now defining basically 135 00:07:47,172 --> 00:07:51,570 ‫a state property on the current object. 136 00:07:51,570 --> 00:07:54,570 ‫So the current component will get the state 137 00:07:54,570 --> 00:07:56,310 ‫that we define here. 138 00:07:56,310 --> 00:07:57,810 ‫So that has to be an object. 139 00:07:57,810 --> 00:08:00,330 ‫And then for each state variable that we want, 140 00:08:00,330 --> 00:08:04,590 ‫we need to create one property in this object. 141 00:08:04,590 --> 00:08:07,860 ‫So we want to count to start at one. 142 00:08:07,860 --> 00:08:10,740 ‫And so this is yet another huge difference 143 00:08:10,740 --> 00:08:14,010 ‫between functional and class components. 144 00:08:14,010 --> 00:08:16,170 ‫So in class components, again, 145 00:08:16,170 --> 00:08:19,094 ‫we only have one huge state object 146 00:08:19,094 --> 00:08:21,510 ‫and not multiple state variables 147 00:08:21,510 --> 00:08:24,270 ‫like we do with the use state hook. 148 00:08:24,270 --> 00:08:27,157 ‫But anyway, let's use actually a different value here 149 00:08:27,157 --> 00:08:32,157 ‫so that now we can access that here in our render method. 150 00:08:33,240 --> 00:08:36,540 ‫So instead of the zero, let's actually access now 151 00:08:36,540 --> 00:08:40,050 ‫this state and the way we have to do this is again 152 00:08:40,050 --> 00:08:41,430 ‫a little bit annoying. 153 00:08:41,430 --> 00:08:45,083 ‫So we have to write this.state.count. 154 00:08:47,910 --> 00:08:50,790 ‫So the this keyword here will, in this case, 155 00:08:50,790 --> 00:08:53,850 ‫simply point to the current component instance. 156 00:08:53,850 --> 00:08:56,370 ‫And so then from there we read the state 157 00:08:56,370 --> 00:08:58,050 ‫and from there the count. 158 00:08:58,050 --> 00:08:59,400 ‫And so in class components 159 00:08:59,400 --> 00:09:02,250 ‫you will see this kind of thing all the time. 160 00:09:02,250 --> 00:09:05,580 ‫It's always gonna be this.state.something 161 00:09:05,580 --> 00:09:08,112 ‫or this.props.something. 162 00:09:08,112 --> 00:09:10,711 ‫But anyway, let's now save this. 163 00:09:10,711 --> 00:09:15,510 ‫And we see that indeed our value here got updated to five, 164 00:09:15,510 --> 00:09:18,480 ‫so it's reading our value from the state now. 165 00:09:18,480 --> 00:09:21,570 ‫And so next what we need to do is to then of course 166 00:09:21,570 --> 00:09:24,690 ‫attach some event handlers to these buttons here 167 00:09:24,690 --> 00:09:26,672 ‫to then actually update the state. 168 00:09:26,672 --> 00:09:30,003 ‫So let's do that in the next lecture.