1 00:00:01,080 --> 00:00:03,660 ‫Now, before learning anything about React 2 00:00:03,660 --> 00:00:07,230 ‫and even before setting up our development environment, 3 00:00:07,230 --> 00:00:11,190 ‫let's build our very first small React app. 4 00:00:11,190 --> 00:00:14,370 ‫It's a tiny app, but you will already meet many 5 00:00:14,370 --> 00:00:16,230 ‫of the fundamental ingredients 6 00:00:16,230 --> 00:00:19,680 ‫that all React applications are built upon. 7 00:00:19,680 --> 00:00:22,350 ‫So this is gonna be a lot of fun already. 8 00:00:22,350 --> 00:00:24,183 ‫And so let's get started. 9 00:00:25,620 --> 00:00:28,080 ‫And remember how I said that we don't even need 10 00:00:28,080 --> 00:00:30,780 ‫to set up our development environment? 11 00:00:30,780 --> 00:00:31,740 ‫And that's right. 12 00:00:31,740 --> 00:00:35,760 ‫We can actually write our very first React app right here 13 00:00:35,760 --> 00:00:40,373 ‫in basically this online code editor called codesandbox.io. 14 00:00:42,030 --> 00:00:45,990 ‫So right now you can go to codesandbox.io. 15 00:00:45,990 --> 00:00:50,730 ‫And there, they will ask you to try this app for free, 16 00:00:50,730 --> 00:00:53,910 ‫but you can do it even more easily, 17 00:00:53,910 --> 00:00:56,400 ‫which is to open up a new tab 18 00:00:56,400 --> 00:01:00,540 ‫and simply write react.new. 19 00:01:00,540 --> 00:01:03,600 ‫So that's it, react.new. Hit Enter. 20 00:01:03,600 --> 00:01:05,880 ‫And this will then automatically create 21 00:01:05,880 --> 00:01:09,780 ‫a brand-new CodeSandbox for you already 22 00:01:09,780 --> 00:01:12,510 ‫with the React starter template. 23 00:01:12,510 --> 00:01:14,340 ‫Now, by the time you're watching this, 24 00:01:14,340 --> 00:01:17,610 ‫the CodeSandbox app might look a little bit different, 25 00:01:17,610 --> 00:01:20,670 ‫but the idea is probably going to be the same. 26 00:01:20,670 --> 00:01:24,600 ‫So here, on the left side, you'll have some files. 27 00:01:24,600 --> 00:01:26,910 ‫Here's some info about the template 28 00:01:26,910 --> 00:01:28,380 ‫that doesn't really matter. 29 00:01:28,380 --> 00:01:31,080 ‫Then in the middle, you will have a code editor, 30 00:01:31,080 --> 00:01:32,610 ‫where you can open these files. 31 00:01:32,610 --> 00:01:34,200 ‫So just like VS Code. 32 00:01:34,200 --> 00:01:37,170 ‫And on the right, you will have your output 33 00:01:37,170 --> 00:01:39,213 ‫and even your console down here. 34 00:01:41,850 --> 00:01:44,790 ‫So this is, again, just like VS Code. 35 00:01:44,790 --> 00:01:45,623 ‫And in fact, 36 00:01:45,623 --> 00:01:49,830 ‫this whole app is actually really built on VS Code. 37 00:01:49,830 --> 00:01:51,540 ‫And this is actually so helpful 38 00:01:51,540 --> 00:01:55,410 ‫and useful that we will use CodeSandbox a lot of times 39 00:01:55,410 --> 00:01:56,550 ‫throughout this course. 40 00:01:56,550 --> 00:01:59,010 ‫For example, for the coding challenges 41 00:01:59,010 --> 00:02:00,933 ‫that are included in this course. 42 00:02:01,890 --> 00:02:05,850 ‫But anyway, you see here that it has already created a bunch 43 00:02:05,850 --> 00:02:09,060 ‫of folders and files for us. 44 00:02:09,060 --> 00:02:12,750 ‫And let's start by deleting the styles.css. 45 00:02:12,750 --> 00:02:14,193 ‫We're not going to use this. 46 00:02:15,420 --> 00:02:19,680 ‫And we have this index.js and app.js. 47 00:02:19,680 --> 00:02:20,730 ‫And of course, later, 48 00:02:20,730 --> 00:02:24,030 ‫we will learn what all of this code here is and does. 49 00:02:24,030 --> 00:02:27,420 ‫But for now, let's open up simply app.js 50 00:02:27,420 --> 00:02:29,970 ‫and delete everything. 51 00:02:29,970 --> 00:02:33,210 ‫And so with this, we can then start from scratch. 52 00:02:33,210 --> 00:02:37,410 ‫So let's start by building our very first React component, 53 00:02:37,410 --> 00:02:41,070 ‫which is essentially a piece of the user interface. 54 00:02:41,070 --> 00:02:44,430 ‫Again, more about all that later. 55 00:02:44,430 --> 00:02:46,560 ‫So just write function. 56 00:02:46,560 --> 00:02:47,610 ‫And by default, 57 00:02:47,610 --> 00:02:51,270 ‫we call our main component the App component. 58 00:02:51,270 --> 00:02:52,170 ‫And as you see, 59 00:02:52,170 --> 00:02:55,950 ‫a component in React is really just a function. 60 00:02:55,950 --> 00:02:58,470 ‫Now, these functions in React, 61 00:02:58,470 --> 00:03:02,220 ‫so these components, can return something called JSX, 62 00:03:02,220 --> 00:03:04,740 ‫which is a syntax that looks like HTML 63 00:03:04,740 --> 00:03:07,560 ‫and which will basically describe what we can see 64 00:03:07,560 --> 00:03:08,393 ‫on the screen. 65 00:03:08,393 --> 00:03:10,053 ‫So just like HTML. 66 00:03:10,980 --> 00:03:15,963 ‫So let's return a div. Let's close it here. 67 00:03:18,604 --> 00:03:21,220 ‫Then let's, for example, write an h1 here. 68 00:03:23,250 --> 00:03:24,300 ‫Hello World! 69 00:03:24,300 --> 00:03:27,480 ‫So that's the traditional first line of code 70 00:03:27,480 --> 00:03:29,250 ‫that we always write. 71 00:03:29,250 --> 00:03:33,570 ‫And then we also will want a button a bit later. 72 00:03:33,570 --> 00:03:36,870 ‫And here, let's say, "Get advice," 73 00:03:36,870 --> 00:03:40,110 ‫because we are going to build a very small app, 74 00:03:40,110 --> 00:03:43,050 ‫which will fetch some advice from an API 75 00:03:43,050 --> 00:03:45,363 ‫and will display it over here on the screen. 76 00:03:46,440 --> 00:03:48,060 ‫So let's give this a save. 77 00:03:48,060 --> 00:03:50,640 ‫And you see that it all nicely formats here, 78 00:03:50,640 --> 00:03:52,800 ‫which is because behind the scenes here, 79 00:03:52,800 --> 00:03:56,040 ‫we have the Prettier extension already included 80 00:03:56,040 --> 00:03:57,693 ‫into the starter template here. 81 00:03:58,676 --> 00:03:59,880 ‫And now all we need to do 82 00:03:59,880 --> 00:04:04,320 ‫is to export this function from here because you see 83 00:04:04,320 --> 00:04:08,343 ‫that this index.js file actually imports it here. 84 00:04:09,750 --> 00:04:14,100 ‫So export default, give it a save, 85 00:04:14,100 --> 00:04:17,760 ‫and then let's just manually reload here on the right side. 86 00:04:17,760 --> 00:04:21,240 ‫And after some time, you should then, 87 00:04:21,240 --> 00:04:25,560 ‫yeah, so you should see your "Hello World!" and the button. 88 00:04:25,560 --> 00:04:26,430 ‫Beautiful. 89 00:04:26,430 --> 00:04:29,280 ‫So that's our very first React component. 90 00:04:29,280 --> 00:04:32,190 ‫But of course, nothing happens, for example, 91 00:04:32,190 --> 00:04:33,660 ‫when I click here on this button. 92 00:04:33,660 --> 00:04:35,220 ‫And so let's change that. 93 00:04:35,220 --> 00:04:36,810 ‫And again, what I want to do 94 00:04:36,810 --> 00:04:39,210 ‫is whenever I click on this button, 95 00:04:39,210 --> 00:04:42,630 ‫we want to get a new advice from an API. 96 00:04:42,630 --> 00:04:46,020 ‫So basically, we want to fetch some data from an API 97 00:04:46,020 --> 00:04:49,380 ‫and display it on our user interface. 98 00:04:49,380 --> 00:04:53,460 ‫So let's actually write a new function right in here. 99 00:04:53,460 --> 00:04:54,603 ‫So inside App, 100 00:04:56,070 --> 00:04:57,803 ‫we will write an async function 101 00:04:57,803 --> 00:04:59,973 ‫so that we can use async/await. 102 00:05:02,070 --> 00:05:06,030 ‫And so you should be familiar with this basic JavaScript. 103 00:05:06,030 --> 00:05:07,290 ‫And if not, don't worry. 104 00:05:07,290 --> 00:05:08,910 ‫There is actually a section 105 00:05:08,910 --> 00:05:11,313 ‫that reviews the most essential JavaScript 106 00:05:11,313 --> 00:05:14,010 ‫that you need to know for React. 107 00:05:14,010 --> 00:05:17,190 ‫Now here, I'm missing, of course, the function name. 108 00:05:17,190 --> 00:05:18,687 ‫So let's say getAdvice. 109 00:05:22,500 --> 00:05:26,400 ‫And then here, let's fire off a fetch request. 110 00:05:26,400 --> 00:05:30,217 ‫And here, I'm just going to type out the URL of this API. 111 00:05:31,950 --> 00:05:34,263 ‫So https, 112 00:05:35,760 --> 00:05:40,760 ‫then api.adviceslip.com/advice. 113 00:05:45,540 --> 00:05:46,530 ‫Okay? 114 00:05:46,530 --> 00:05:49,020 ‫Then we can await this promise 115 00:05:49,020 --> 00:05:53,460 ‫and store it inside of some variable. 116 00:05:53,460 --> 00:05:55,590 ‫And again, all of this should be nothing new 117 00:05:55,590 --> 00:05:56,793 ‫for you at this point. 118 00:05:58,560 --> 00:06:02,040 ‫Let's just give ourselves a little bit more space. 119 00:06:02,040 --> 00:06:05,193 ‫But also, as I said, if this is new stuff, 120 00:06:06,060 --> 00:06:09,120 ‫just type out the JavaScript that I'm writing here, 121 00:06:09,120 --> 00:06:11,460 ‫and it all will make sense in that review 122 00:06:11,460 --> 00:06:12,873 ‫of essential JavaScript. 123 00:06:15,120 --> 00:06:17,010 ‫But anyway, let's now basically convert 124 00:06:17,010 --> 00:06:19,980 ‫that response to JSON, 125 00:06:19,980 --> 00:06:24,363 ‫and then let's log it to the console. 126 00:06:26,190 --> 00:06:27,120 ‫All right. 127 00:06:27,120 --> 00:06:29,190 ‫So inside our component, 128 00:06:29,190 --> 00:06:32,460 ‫which again is this App function here. 129 00:06:32,460 --> 00:06:34,080 ‫So inside that component, 130 00:06:34,080 --> 00:06:36,840 ‫we now have this getAdvice function. 131 00:06:36,840 --> 00:06:40,080 ‫But we're not calling it anywhere, right? 132 00:06:40,080 --> 00:06:41,790 ‫So how do we call this function 133 00:06:41,790 --> 00:06:44,160 ‫when we click on this button? 134 00:06:44,160 --> 00:06:48,123 ‫Well, we can specify the onClick attribute here. 135 00:06:50,010 --> 00:06:54,180 ‫So onClick equals 136 00:06:54,180 --> 00:06:57,390 ‫and then just open these curly braces. 137 00:06:57,390 --> 00:07:00,447 ‫And here, we simply write getAdvice. 138 00:07:01,981 --> 00:07:02,910 ‫All right. 139 00:07:02,910 --> 00:07:05,370 ‫Let's maybe reload, just to make sure. 140 00:07:05,370 --> 00:07:07,470 ‫And then let's click. 141 00:07:07,470 --> 00:07:11,253 ‫And, well, we got something. Nice. 142 00:07:12,690 --> 00:07:15,960 ‫So here we have this slip, then slip again, 143 00:07:15,960 --> 00:07:18,150 ‫and then in there we have the advice. 144 00:07:18,150 --> 00:07:20,400 ‫And so here we have some piece of advice: 145 00:07:20,400 --> 00:07:22,923 ‫A problem shared is a problem halved. 146 00:07:24,690 --> 00:07:25,950 ‫So what we're looking for 147 00:07:25,950 --> 00:07:30,950 ‫is actually data.slip.advice, right? 148 00:07:31,830 --> 00:07:33,273 ‫So let's try that again. 149 00:07:34,200 --> 00:07:39,000 ‫Yeah. So now you get this advice directly here. 150 00:07:39,000 --> 00:07:43,290 ‫And all we have to do now is to basically get this string. 151 00:07:43,290 --> 00:07:46,680 ‫So this text here into our user interface. 152 00:07:46,680 --> 00:07:49,590 ‫So we want it to be displayed right here. 153 00:07:49,590 --> 00:07:52,620 ‫So here in this place. 154 00:07:52,620 --> 00:07:54,390 ‫Now, how do we do that? 155 00:07:54,390 --> 00:07:57,480 ‫Well, for that we need a concept called state. 156 00:07:57,480 --> 00:08:02,100 ‫And state is the most fundamental concept of React. 157 00:08:02,100 --> 00:08:04,350 ‫So whenever we need something to change 158 00:08:04,350 --> 00:08:07,410 ‫in the user interface, we change the state. 159 00:08:07,410 --> 00:08:09,933 ‫So we update something that we call state. 160 00:08:11,610 --> 00:08:13,530 ‫So to create a new state, 161 00:08:13,530 --> 00:08:16,323 ‫we need to do it here at the top level in the function, 162 00:08:17,370 --> 00:08:18,693 ‫and we write it like this. 163 00:08:19,860 --> 00:08:22,323 ‫So advice and setAdvice 164 00:08:24,233 --> 00:08:25,733 ‫and then useState. 165 00:08:29,310 --> 00:08:31,740 ‫And we start off with an empty string. 166 00:08:31,740 --> 00:08:33,630 ‫So you see that, automatically, 167 00:08:33,630 --> 00:08:36,900 ‫useState got imported from the React library. 168 00:08:36,900 --> 00:08:40,110 ‫And if, for you, this didn't happen automatically, 169 00:08:40,110 --> 00:08:43,380 ‫then please go ahead and write this line of code here. 170 00:08:43,380 --> 00:08:44,610 ‫All right. 171 00:08:44,610 --> 00:08:47,520 ‫So this useState here is a function in React, 172 00:08:47,520 --> 00:08:48,900 ‫which returns an array. 173 00:08:48,900 --> 00:08:51,330 ‫And so here, we are destructuring that array. 174 00:08:51,330 --> 00:08:53,430 ‫So in the first position of the array, 175 00:08:53,430 --> 00:08:57,690 ‫we have the value of the state that we call advice here. 176 00:08:57,690 --> 00:09:01,020 ‫And the second value is a setter function. 177 00:09:01,020 --> 00:09:02,610 ‫So a function that we can use 178 00:09:02,610 --> 00:09:05,013 ‫to update the piece of state. 179 00:09:07,560 --> 00:09:08,393 ‫Okay? 180 00:09:08,393 --> 00:09:11,310 ‫And so right here, in this getAdvice function, 181 00:09:11,310 --> 00:09:15,900 ‫we can now use this setAdvice function to update the state. 182 00:09:15,900 --> 00:09:18,660 ‫And then whenever this piece of state is updated, 183 00:09:18,660 --> 00:09:21,690 ‫the user interface will also be updated. 184 00:09:21,690 --> 00:09:23,493 ‫So let's call setAdvice right here. 185 00:09:26,447 --> 00:09:29,495 ‫So after we receive the data. 186 00:09:29,495 --> 00:09:31,323 ‫And now all we have to do is 187 00:09:31,323 --> 00:09:35,910 ‫to then use this advice right here in this JSX. 188 00:09:35,910 --> 00:09:39,060 ‫So remember that I said that this is called JSX, 189 00:09:39,060 --> 00:09:41,850 ‫which is basically just like HTML, 190 00:09:41,850 --> 00:09:45,360 ‫but we can add some JavaScript to it as well. 191 00:09:45,360 --> 00:09:47,370 ‫So each time we want some JavaScript, 192 00:09:47,370 --> 00:09:49,770 ‫we can basically enter JavaScript mode 193 00:09:49,770 --> 00:09:51,990 ‫by using these curly braces. 194 00:09:51,990 --> 00:09:54,330 ‫And we already did that down here. 195 00:09:54,330 --> 00:09:56,640 ‫So we have this onClick attribute here. 196 00:09:56,640 --> 00:09:58,860 ‫And then here, we opened JavaScript 197 00:09:58,860 --> 00:10:01,130 ‫and passed in the function. 198 00:10:01,130 --> 00:10:02,730 ‫So this function will then get called 199 00:10:02,730 --> 00:10:04,383 ‫whenever we click this button. 200 00:10:06,960 --> 00:10:10,773 ‫So here, now we can simply place this advice variable. 201 00:10:11,670 --> 00:10:14,463 ‫And then let's see the magic happening. 202 00:10:16,110 --> 00:10:19,020 ‫And it works. Beautiful. 203 00:10:19,020 --> 00:10:22,170 ‫Let's click again. And then we get another one. 204 00:10:22,170 --> 00:10:24,360 ‫Beautiful. So it's already working. 205 00:10:24,360 --> 00:10:27,810 ‫So this is already your first working React application, 206 00:10:27,810 --> 00:10:30,270 ‫already with a piece of state, 207 00:10:30,270 --> 00:10:34,650 ‫which, again, is one of the fundamental aspects of React. 208 00:10:34,650 --> 00:10:37,980 ‫And of course, right now all of this seems really confusing, 209 00:10:37,980 --> 00:10:40,320 ‫but of course, you will understand it 210 00:10:40,320 --> 00:10:42,600 ‫as we go through the course. 211 00:10:42,600 --> 00:10:45,420 ‫So basically, what happens is we click this button here, 212 00:10:45,420 --> 00:10:48,060 ‫and we said here that whenever we click the button, 213 00:10:48,060 --> 00:10:50,700 ‫the getAdvice function should be called. 214 00:10:50,700 --> 00:10:55,020 ‫And so then, indeed, it gets called, it fetches our data, 215 00:10:55,020 --> 00:10:57,330 ‫and then we update the state. 216 00:10:57,330 --> 00:11:00,570 ‫So we update the state by calling setAdvice. 217 00:11:00,570 --> 00:11:04,020 ‫And then whenever we do that, so when we update state, 218 00:11:04,020 --> 00:11:06,540 ‫then this function here, so this whole component, 219 00:11:06,540 --> 00:11:08,310 ‫is executed again, 220 00:11:08,310 --> 00:11:11,340 ‫and then the advice here has been changed. 221 00:11:11,340 --> 00:11:14,883 ‫And therefore, it then changes here on the user interface. 222 00:11:16,230 --> 00:11:17,160 ‫Nice. 223 00:11:17,160 --> 00:11:21,510 ‫So what I want to do next is to display down here some text, 224 00:11:21,510 --> 00:11:24,780 ‫which tells us how many times, basically, 225 00:11:24,780 --> 00:11:26,550 ‫we have clicked this button. 226 00:11:26,550 --> 00:11:28,080 ‫So which tells us how many pieces 227 00:11:28,080 --> 00:11:30,960 ‫of advice we have already read. 228 00:11:30,960 --> 00:11:33,663 ‫So basically, we want a paragraph here, 229 00:11:34,500 --> 00:11:38,460 ‫which says something like, "You have read." 230 00:11:38,460 --> 00:11:40,590 ‫Then here, we can write any HTML. 231 00:11:40,590 --> 00:11:42,393 ‫Like, we can make it strong. 232 00:11:43,320 --> 00:11:46,233 ‫Let's, for now, just use some placeholder value here. 233 00:11:47,640 --> 00:11:50,823 ‫Pieces of advice. 234 00:11:53,220 --> 00:11:55,260 ‫And let's close that here. 235 00:11:55,260 --> 00:11:56,093 ‫But now, of course, 236 00:11:56,093 --> 00:11:59,010 ‫we want to make this number dynamic, right? 237 00:11:59,010 --> 00:12:02,400 ‫And so this is another place where we need some state 238 00:12:02,400 --> 00:12:06,183 ‫because we want this value here to be updated over time. 239 00:12:07,290 --> 00:12:09,090 ‫So we create more state. 240 00:12:09,090 --> 00:12:10,680 ‫So useState again. 241 00:12:10,680 --> 00:12:13,863 ‫And now the initial value should be zero. 242 00:12:14,760 --> 00:12:17,460 ‫And then, again, this returns an array, 243 00:12:17,460 --> 00:12:21,420 ‫which we can immediately destructure into, 244 00:12:21,420 --> 00:12:24,630 ‫for example, count and setCount. 245 00:12:24,630 --> 00:12:27,393 ‫And of course, we can use any names that we want here. 246 00:12:29,790 --> 00:12:34,590 ‫So what we do then here is to also update the count. 247 00:12:34,590 --> 00:12:37,320 ‫So we can use our setCount function. 248 00:12:37,320 --> 00:12:39,813 ‫And then here, I will do something a bit strange. 249 00:12:40,860 --> 00:12:42,900 ‫So we will update now in a different way, 250 00:12:42,900 --> 00:12:44,130 ‫but this doesn't really matter. 251 00:12:44,130 --> 00:12:47,880 ‫So it simply takes the current count and then adds one, 252 00:12:47,880 --> 00:12:50,283 ‫and that will become the new count. 253 00:12:51,390 --> 00:12:52,223 ‫Okay? 254 00:12:52,223 --> 00:12:54,360 ‫And now here, let's replace that placeholder 255 00:12:54,360 --> 00:12:56,553 ‫with the actual count value. 256 00:12:57,720 --> 00:12:59,313 ‫And if we reload now, 257 00:13:01,200 --> 00:13:04,593 ‫then, yeah, it increased. 258 00:13:05,430 --> 00:13:08,883 ‫And it keeps increasing. So that works just fine. 259 00:13:09,750 --> 00:13:10,620 ‫Nice. 260 00:13:10,620 --> 00:13:12,630 ‫Now, maybe you noticed that when we load this 261 00:13:12,630 --> 00:13:16,050 ‫for the first time, we have no advice here at all, 262 00:13:16,050 --> 00:13:18,030 ‫and of course, we start at zero. 263 00:13:18,030 --> 00:13:21,510 ‫So let's change that so that whenever we open up the app 264 00:13:21,510 --> 00:13:22,770 ‫for the first time, 265 00:13:22,770 --> 00:13:25,200 ‫we already are greeted here 266 00:13:25,200 --> 00:13:27,573 ‫with our very first piece of advice. 267 00:13:28,770 --> 00:13:31,683 ‫And we can do that with something called an effect. 268 00:13:32,880 --> 00:13:35,640 ‫So we can use useEffect. 269 00:13:35,640 --> 00:13:38,190 ‫And again, it needs to be imported here. 270 00:13:38,190 --> 00:13:40,773 ‫So make sure that useEffect is up here. 271 00:13:41,850 --> 00:13:45,243 ‫And then into useEffect, we pass a function. 272 00:13:46,890 --> 00:13:49,170 ‫So what do we want to happen here? 273 00:13:49,170 --> 00:13:52,533 ‫Well, basically, exactly the same thing as here. 274 00:13:53,430 --> 00:13:56,007 ‫So we can simply call getAdvice. 275 00:13:59,220 --> 00:14:00,053 ‫Right? 276 00:14:01,650 --> 00:14:02,700 ‫Now, you're seeing 277 00:14:02,700 --> 00:14:04,770 ‫that it's getting completely out of control, 278 00:14:04,770 --> 00:14:07,263 ‫and that's because we have a bug in our code. 279 00:14:08,100 --> 00:14:11,070 ‫So here, we need this empty array. 280 00:14:11,070 --> 00:14:13,953 ‫And as soon as I save this, you see that it stopped. 281 00:14:14,970 --> 00:14:17,400 ‫So useEffect takes two arguments. 282 00:14:17,400 --> 00:14:20,310 ‫First, a function that we want to get executed 283 00:14:20,310 --> 00:14:21,330 ‫at the beginning. 284 00:14:21,330 --> 00:14:24,810 ‫So when this component first gets loaded, basically. 285 00:14:24,810 --> 00:14:26,130 ‫And then a second argument, 286 00:14:26,130 --> 00:14:28,200 ‫which is called the dependency array. 287 00:14:28,200 --> 00:14:30,030 ‫But that doesn't matter for now. 288 00:14:30,030 --> 00:14:32,910 ‫So we will learn all about this later, but for now, 289 00:14:32,910 --> 00:14:35,703 ‫just make sure that you have this empty array here now. 290 00:14:36,840 --> 00:14:37,673 ‫All right? 291 00:14:37,673 --> 00:14:40,620 ‫And if we reload now, you see that very soon 292 00:14:40,620 --> 00:14:43,830 ‫you get this very first advice automatically. 293 00:14:43,830 --> 00:14:47,010 ‫Now, down here, we also get two pieces of advice, 294 00:14:47,010 --> 00:14:48,840 ‫even though it should be only one. 295 00:14:48,840 --> 00:14:51,180 ‫But again, we will worry about that later. 296 00:14:51,180 --> 00:14:52,470 ‫This is just because 297 00:14:52,470 --> 00:14:55,563 ‫of something called strict mode in development. 298 00:14:56,850 --> 00:14:57,870 ‫Now, if we keep clicking, 299 00:14:57,870 --> 00:15:00,450 ‫then, of course, it keeps increasing normally. 300 00:15:00,450 --> 00:15:03,180 ‫But when we load for the first time, 301 00:15:03,180 --> 00:15:05,580 ‫basically, this effect will be executed twice. 302 00:15:05,580 --> 00:15:09,150 ‫And so then this increases two times. Nice. 303 00:15:09,150 --> 00:15:11,460 ‫And this is actually all the functionality 304 00:15:11,460 --> 00:15:15,780 ‫that I wanted already for this little application. 305 00:15:15,780 --> 00:15:19,080 ‫To make it just a little bit more real world, 306 00:15:19,080 --> 00:15:22,680 ‫so to say, let's create a new component 307 00:15:22,680 --> 00:15:25,410 ‫for this message down here. 308 00:15:25,410 --> 00:15:26,460 ‫So in React, 309 00:15:26,460 --> 00:15:30,270 ‫we try to divide user interfaces into components. 310 00:15:30,270 --> 00:15:34,143 ‫And so let's kind of do this already here. 311 00:15:35,880 --> 00:15:38,490 ‫So let's call this component Message. 312 00:15:38,490 --> 00:15:40,950 ‫And notice how it is uppercase here. 313 00:15:40,950 --> 00:15:44,700 ‫So just like App, this one also needs to be uppercase. 314 00:15:44,700 --> 00:15:47,973 ‫That's a convention in React for all components. 315 00:15:49,170 --> 00:15:54,170 ‫So here, all we want to return is basically just this. 316 00:15:54,570 --> 00:15:56,520 ‫So we cut it from here, 317 00:15:56,520 --> 00:15:59,970 ‫and then here, we simply include Message. 318 00:15:59,970 --> 00:16:02,490 ‫Now, you see that we have this error there, 319 00:16:02,490 --> 00:16:04,683 ‫but we will take care of that in a minute. 320 00:16:06,150 --> 00:16:09,930 ‫And so now, we can basically include this component, 321 00:16:09,930 --> 00:16:11,880 ‫so actually, message, 322 00:16:11,880 --> 00:16:15,090 ‫just as if it was another HTML element. 323 00:16:15,090 --> 00:16:19,830 ‫So Message, and then we can close it immediately like this. 324 00:16:19,830 --> 00:16:21,630 ‫But now we have a problem 325 00:16:21,630 --> 00:16:24,870 ‫because here, we are using this count value. 326 00:16:24,870 --> 00:16:28,650 ‫And, well, right now this component has no way of knowing 327 00:16:28,650 --> 00:16:31,380 ‫about the value of this variable. 328 00:16:31,380 --> 00:16:32,970 ‫And so what we need to do is 329 00:16:32,970 --> 00:16:35,583 ‫to pass it right into the component. 330 00:16:36,840 --> 00:16:40,050 ‫So we do that using something called props. 331 00:16:40,050 --> 00:16:42,540 ‫And the prop is basically just like parameters 332 00:16:42,540 --> 00:16:43,890 ‫to a function. 333 00:16:43,890 --> 00:16:47,373 ‫So let's say we wanted to call this prop count, 334 00:16:48,210 --> 00:16:51,120 ‫and then we pass in the count value. 335 00:16:51,120 --> 00:16:54,030 ‫And again, here we are entering this JavaScript mode 336 00:16:54,030 --> 00:16:56,790 ‫by using the curly braces. 337 00:16:56,790 --> 00:17:00,750 ‫And so now here, we can accept that, but not like this. 338 00:17:00,750 --> 00:17:02,910 ‫So it's not like a normal function 339 00:17:02,910 --> 00:17:04,680 ‫where we simply accept count. 340 00:17:04,680 --> 00:17:09,300 ‫Instead, what we accept is an object called props. 341 00:17:09,300 --> 00:17:11,340 ‫And it's on this props object 342 00:17:11,340 --> 00:17:13,053 ‫that count is now a property. 343 00:17:15,960 --> 00:17:18,120 ‫And again, if this sounds too confusing, 344 00:17:18,120 --> 00:17:20,220 ‫well, it is actually pretty simple, 345 00:17:20,220 --> 00:17:23,700 ‫as you will see when we learn this all step by step 346 00:17:23,700 --> 00:17:25,260 ‫and not all at once. 347 00:17:25,260 --> 00:17:27,900 ‫So here, I just want us to have a little bit of fun 348 00:17:27,900 --> 00:17:29,610 ‫and very briefly get 349 00:17:29,610 --> 00:17:32,580 ‫to know all these different ingredients of React. 350 00:17:32,580 --> 00:17:34,860 ‫But you don't need to worry about learning any 351 00:17:34,860 --> 00:17:36,090 ‫of this right now. 352 00:17:36,090 --> 00:17:38,880 ‫Just type the code and have some fun 353 00:17:38,880 --> 00:17:42,153 ‫and, yeah, see the application here coming together. 354 00:17:43,950 --> 00:17:45,750 ‫So now it actually works. 355 00:17:45,750 --> 00:17:49,650 ‫So if we reload, then all these errors will be gone, 356 00:17:49,650 --> 00:17:53,313 ‫and the application is back to working. 357 00:17:54,360 --> 00:17:56,190 ‫So beautiful. 358 00:17:56,190 --> 00:17:58,470 ‫And actually, this is all that I wanted to do 359 00:17:58,470 --> 00:18:00,210 ‫for this small application, 360 00:18:00,210 --> 00:18:04,380 ‫which still already has a lot of the React ingredients 361 00:18:04,380 --> 00:18:07,440 ‫that real-world React applications will have. 362 00:18:07,440 --> 00:18:12,210 ‫So we have state, we have effects, we have props, 363 00:18:12,210 --> 00:18:14,610 ‫we have, of course, JSX here. 364 00:18:14,610 --> 00:18:16,770 ‫We created two components. 365 00:18:16,770 --> 00:18:19,320 ‫And so that's already pretty nice. 366 00:18:19,320 --> 00:18:21,870 ‫So I hope that this was fun 367 00:18:21,870 --> 00:18:24,630 ‫and that you also got this application to work. 368 00:18:24,630 --> 00:18:29,070 ‫And if not, so if for some reason you run into some trouble, 369 00:18:29,070 --> 00:18:30,840 ‫I will attach a link 370 00:18:30,840 --> 00:18:34,650 ‫to this CodeSandbox right onto this Udemy lecture. 371 00:18:34,650 --> 00:18:37,920 ‫And with that being said, after this small introduction, 372 00:18:37,920 --> 00:18:41,490 ‫it's now time to actually set up our system a little bit 373 00:18:41,490 --> 00:18:45,270 ‫and really start learning about what React actually is, 374 00:18:45,270 --> 00:18:50,270 ‫why it exists, and yeah, start learning really React.