1 00:00:00,560 --> 00:00:01,160 Welcome back. 2 00:00:01,609 --> 00:00:03,320 Does your head hurt yet? 3 00:00:03,860 --> 00:00:08,500 I remember when I first saw REAC code, I was really confused. 4 00:00:08,540 --> 00:00:10,550 It looked impossible to learn. 5 00:00:10,670 --> 00:00:13,730 It seemed so different from what I've known before. 6 00:00:14,090 --> 00:00:18,560 But as with anything, it's just a matter of time and getting used to it. 7 00:00:19,070 --> 00:00:22,280 And trust me, by the end of the course, you'll get used to it. 8 00:00:23,360 --> 00:00:29,180 But I do want to mention a few more things before we start building our Robot Friends app. 9 00:00:30,380 --> 00:00:39,140 First is that in this source folder, we have a few more things like set up tests or report web vitals, 10 00:00:39,470 --> 00:00:41,390 which we're not really going to worry about. 11 00:00:41,480 --> 00:00:46,280 These are just configuration files that are nice things to have. 12 00:00:46,490 --> 00:00:52,130 Again, create React app provides a lot of nice extra things, but they don't really help us build the 13 00:00:52,130 --> 00:00:54,780 app, so we're not going to worry too much about it. 14 00:00:54,800 --> 00:00:58,940 If you want, you can always go to the React app documentation. 15 00:00:59,390 --> 00:01:03,620 You can click on, get started and read some of their documentation. 16 00:01:04,739 --> 00:01:11,250 The key for us and the things that we want to focus on is index stages and app dogs. 17 00:01:11,430 --> 00:01:17,460 These are the main things that allow us to build components and build this reactor. 18 00:01:18,210 --> 00:01:19,890 Now I want to test our assumption. 19 00:01:20,010 --> 00:01:25,860 Remember how I said that the reactor gets rendered right in here inside of this? 20 00:01:26,490 --> 00:01:30,210 So as a developer, always test your understanding. 21 00:01:30,270 --> 00:01:34,350 How can I test my understanding to verify that what I said is correct? 22 00:01:35,370 --> 00:01:40,800 Well, we can simply go to app dogs and update this like I did. 23 00:01:41,490 --> 00:01:43,260 But we can go even a level higher. 24 00:01:43,770 --> 00:01:47,040 Remember how I said we're rendering the app right here? 25 00:01:48,180 --> 00:01:51,720 Well, could I do this each one? 26 00:01:54,180 --> 00:02:01,140 Hello, world and render each one header like this. 27 00:02:02,650 --> 00:02:02,900 Hmm. 28 00:02:04,020 --> 00:02:06,000 Pause and think, is this going to work? 29 00:02:06,900 --> 00:02:07,740 Well, let me find out. 30 00:02:09,250 --> 00:02:10,240 I'm going to save this. 31 00:02:11,110 --> 00:02:15,730 It's compiled with warnings line for app is defined, but never used again. 32 00:02:15,730 --> 00:02:17,230 Another nice thing about react. 33 00:02:17,590 --> 00:02:18,790 And that makes sense, right? 34 00:02:19,090 --> 00:02:23,230 I'm importing app from App Dogs, but. 35 00:02:24,550 --> 00:02:30,400 I'm not using it, so it's just a warning it's still fine, because instead of app, I now have Hello 36 00:02:30,400 --> 00:02:30,730 world. 37 00:02:31,120 --> 00:02:32,440 Let's see if this is still working. 38 00:02:33,040 --> 00:02:34,390 Fight, go to my app. 39 00:02:36,480 --> 00:02:37,290 And I refresh. 40 00:02:38,620 --> 00:02:39,130 I get. 41 00:02:39,340 --> 00:02:40,210 Hello, world. 42 00:02:42,240 --> 00:02:42,930 That's working. 43 00:02:44,250 --> 00:02:53,760 And why is that as we're going to discover with React, we're essentially using HMO like syntax like 44 00:02:53,790 --> 00:03:02,250 H one plus creating our own custom H HTML like syntax using something called GSX. 45 00:03:02,460 --> 00:03:05,760 Again, we're going to learn more about that in the not coming videos. 46 00:03:06,420 --> 00:03:09,990 So I could have something like this here where, say, app. 47 00:03:11,850 --> 00:03:12,360 Safe. 48 00:03:16,220 --> 00:03:19,820 Go back and refresh, and I have hello world and. 49 00:03:20,930 --> 00:03:22,610 Our default app. 50 00:03:23,240 --> 00:03:29,690 So again, I'm testing my assumption that I can add things in here and react. 51 00:03:29,690 --> 00:03:33,020 Dom renders it on the Asimo page for us. 52 00:03:33,650 --> 00:03:35,210 Very, very cool. 53 00:03:36,020 --> 00:03:41,750 Now, in some of the upcoming videos, you might not see things like report web vitals. 54 00:03:42,170 --> 00:03:45,440 Instead, you might see something like register service workers. 55 00:03:45,650 --> 00:03:51,530 That's an old version of Cory racked up and something we won't really get into in this course because 56 00:03:51,530 --> 00:03:54,950 again, it's outside of the scope of what we need to know. 57 00:03:55,730 --> 00:04:01,850 The key and the focus that I want you to have for the next couple of videos is what we do inside of 58 00:04:01,850 --> 00:04:02,840 the source folder. 59 00:04:03,380 --> 00:04:09,890 To be a good react developer is learning how to work within this source folder and building the React 60 00:04:09,890 --> 00:04:10,460 components. 61 00:04:10,760 --> 00:04:13,730 And that's what we're going to teach you throughout the next couple of videos. 62 00:04:14,690 --> 00:04:21,170 The final thing I want to show you is this if you're on sublime text, you might have. 63 00:04:22,790 --> 00:04:26,270 The syntax highlighting a little bit messed up like this. 64 00:04:27,080 --> 00:04:32,300 So if that's the case, why you need to do is instead of JavaScript, because these are DOGE's files 65 00:04:32,690 --> 00:04:34,010 you can actually select. 66 00:04:35,020 --> 00:04:38,940 OpenGL with current extension and use GSX. 67 00:04:39,010 --> 00:04:43,210 So go to JavaScript and select GSX and this. 68 00:04:44,620 --> 00:04:52,090 We'll give you proper syntax highlighting for what we call these GSX files that the React package allows 69 00:04:52,090 --> 00:04:54,760 us to write more on that later. 70 00:04:55,300 --> 00:04:57,820 For now, let's take a break and I'll see you in the next one. 71 00:04:58,090 --> 00:04:58,480 Bye bye.