1 00:00:00,210 --> 00:00:06,960 As far as the thorough, a lot of things should look very familiar, since I use the same create react 2 00:00:07,320 --> 00:00:10,340 boilerplate we used in the previous section. 3 00:00:10,860 --> 00:00:17,310 So remember previously, when we are on create react up and then we create our first project, well, 4 00:00:17,310 --> 00:00:23,150 essentially I did the same thing, but of course I removed and added some files in this case. 5 00:00:23,580 --> 00:00:28,630 Now when it comes to upcoming lectures in order not to waste your time. 6 00:00:28,920 --> 00:00:31,860 I already prepared all the necessary boilerplate. 7 00:00:32,100 --> 00:00:34,950 So we just need to focus on the functionality. 8 00:00:35,250 --> 00:00:40,410 And the same goes for styles, even though we are not going to use that much sense. 9 00:00:40,410 --> 00:00:42,440 At the end of the day, it is still tutorial. 10 00:00:42,630 --> 00:00:47,460 I did prepare our own systems for, you know, we just need to include classes and you'll be good to 11 00:00:47,460 --> 00:00:47,670 go. 12 00:00:48,060 --> 00:00:54,120 I also provided the complete source code so that where you can write away, compare it with your results 13 00:00:54,270 --> 00:00:57,900 so you don't have to run around and see where there are. 14 00:00:57,930 --> 00:01:02,400 You right away can look on the final folder and you'll be in good shape. 15 00:01:02,850 --> 00:01:10,020 Now, as far as the files and folders where I said a lot of things should be very familiar, where we 16 00:01:10,020 --> 00:01:17,030 have the public and of course we have the source now, we'll do all our work in the source folder. 17 00:01:17,370 --> 00:01:22,820 Now, the difference I remember in the previous section, we worked in the index. 18 00:01:23,280 --> 00:01:26,430 Now in this case, what happens with a boilerplate? 19 00:01:26,610 --> 00:01:36,360 They right away set up Index JS as a place where they import app component and then remember that document 20 00:01:36,360 --> 00:01:46,260 get Aliment Bayada, where essentially we are placing all our functionality into that root dev while 21 00:01:46,290 --> 00:01:50,370 they're doing that by just placing that app component. 22 00:01:50,790 --> 00:01:57,410 And I just left it the way it is, because that way once you start a brand new application, we create 23 00:01:57,600 --> 00:01:58,140 an app. 24 00:01:58,440 --> 00:02:00,540 You're not going to be confused. 25 00:02:00,840 --> 00:02:03,900 Just remember, it is the same thing. 26 00:02:04,290 --> 00:02:07,740 Previously we just set up our components in the index. 27 00:02:07,740 --> 00:02:09,180 Just in this case. 28 00:02:09,180 --> 00:02:16,380 What they're doing is they create everything in the app address, meaning all the components meet in 29 00:02:16,380 --> 00:02:20,220 the objects file, then they export as default. 30 00:02:20,460 --> 00:02:26,670 Remember, by the end of the Taurel we talked about exporting and importing and then in the in the U.S. 31 00:02:27,030 --> 00:02:31,550 they import app as app and then just place it over here. 32 00:02:31,830 --> 00:02:33,270 Now, as far as this reacts, right. 33 00:02:33,450 --> 00:02:34,260 Don't worry about it. 34 00:02:34,590 --> 00:02:38,130 This is just for create react app purposes. 35 00:02:38,490 --> 00:02:45,540 Now in the app, just if you just want to simply test it out, we can change our turn and we can say 36 00:02:45,540 --> 00:02:52,260 here having to, let's say, advanced, advanced react tutorial. 37 00:02:52,530 --> 00:02:57,750 And like I said, the idea is exactly the same as we had in the previous section. 38 00:02:58,020 --> 00:03:03,030 The difference, of course, previously we placed all our components right here next to the render method. 39 00:03:03,330 --> 00:03:05,700 In this case, they have this app. 40 00:03:06,000 --> 00:03:11,640 So the root component where all of our components will meet and then they just render it. 41 00:03:11,970 --> 00:03:17,370 Now, when it comes to Casesa, like I said, I already prepared, even though there's not that much, 42 00:03:17,370 --> 00:03:22,710 this has already prepared a little bit of global styling, some fonts and all that good stuff. 43 00:03:22,950 --> 00:03:25,380 So if you're interested, of course, be my guest. 44 00:03:25,590 --> 00:03:27,780 You can come here and check it out. 45 00:03:27,790 --> 00:03:30,900 What kind of styling are added now? 46 00:03:30,900 --> 00:03:34,770 The more important thing is the tutorial folder. 47 00:03:35,190 --> 00:03:42,560 So into the real folder you'll see a bunch of folders starting with one and then hyphen use that. 48 00:03:42,930 --> 00:03:46,680 So what that means is that it's going to be our first topic. 49 00:03:47,040 --> 00:03:52,860 And then for each topic we all have to folders, we'll have the setup folder. 50 00:03:53,100 --> 00:03:55,530 So this is where we'll do all of our work. 51 00:03:55,830 --> 00:03:59,880 And like I said, I also provided it right away, a complete source code. 52 00:04:00,090 --> 00:04:07,980 So that way, if you don't get the result that you're looking for, then just write or navigate to find 53 00:04:07,980 --> 00:04:13,470 a folder, look for the same exact file we're working and you'll get your answer. 54 00:04:13,860 --> 00:04:18,930 Now in the next video, I'll show you how we'll be doing important and how you can write away. 55 00:04:18,930 --> 00:04:19,950 Check out the final. 56 00:04:20,280 --> 00:04:26,310 The one thing that I would want to mention, though, is that I saved up on the boilerplate where you'll 57 00:04:26,310 --> 00:04:31,440 notice that in all the setup files with the writer, we have the component. 58 00:04:31,740 --> 00:04:37,200 Now, I'm also right away exporting default and I'll talk about it in more detail in the next video. 59 00:04:37,440 --> 00:04:45,260 But the idea is that we don't need to create each and every time the file and on the component and then 60 00:04:45,270 --> 00:04:47,760 all that annoying stuff instead. 61 00:04:48,000 --> 00:04:50,520 Everything is already right away prepared for you. 62 00:04:50,790 --> 00:04:58,620 Then you'll just have to import that particular file in the objets and then just follow along and do 63 00:04:58,620 --> 00:04:59,550 all of. 64 00:04:59,670 --> 00:05:07,020 Your work in this file, so that way we can focus on functionality instead of unnecessary boilerplate, 65 00:05:07,350 --> 00:05:13,770 and that is the brief overview of our application and I think we're ready to kick things into gear and 66 00:05:13,770 --> 00:05:16,350 finally learn some advanced react.