1 00:00:01,140 --> 00:00:03,690 ‫Let's do something unconventional now 2 00:00:03,690 --> 00:00:07,200 ‫and start the section with a challenge. 3 00:00:07,200 --> 00:00:10,590 ‫However, this is a very different challenge 4 00:00:10,590 --> 00:00:13,770 ‫because all I want you to do in this one is 5 00:00:13,770 --> 00:00:18,420 ‫to study and understand both the code and the data flow 6 00:00:18,420 --> 00:00:21,843 ‫in a small, new application on your own. 7 00:00:23,250 --> 00:00:27,491 ‫And to get started, let's just open up our starter files 8 00:00:27,491 --> 00:00:31,590 ‫and then let's go to this project number 12, 9 00:00:31,590 --> 00:00:35,040 ‫called Atomic Blog, and then let's copy 10 00:00:35,040 --> 00:00:39,900 ‫the entire starter folder onto our desktop. 11 00:00:39,900 --> 00:00:44,900 ‫And then we can just rename it to Atomic Blog again. 12 00:00:47,160 --> 00:00:51,603 ‫And then all we're going to do is to open it up in VS code. 13 00:00:54,090 --> 00:00:57,030 ‫So this time, we are not creating a new project 14 00:00:57,030 --> 00:01:00,720 ‫from scratch using Create React App, or Vite, 15 00:01:00,720 --> 00:01:03,353 ‫but instead I already did that before 16 00:01:03,353 --> 00:01:06,840 ‫and so here are all the files now. 17 00:01:06,840 --> 00:01:09,832 ‫So, the idea of this challenge is that someone 18 00:01:09,832 --> 00:01:13,020 ‫on your team built this small project 19 00:01:13,020 --> 00:01:15,390 ‫before you had joined the team 20 00:01:15,390 --> 00:01:18,600 ‫and so now they handed that project over to you, 21 00:01:18,600 --> 00:01:21,621 ‫and so of course then you need to jump into the project 22 00:01:21,621 --> 00:01:25,260 ‫and understand how it works and what it does. 23 00:01:25,260 --> 00:01:29,640 ‫And so that is basically the goal of this challenge. 24 00:01:29,640 --> 00:01:32,856 ‫So, this is a super important skill to have 25 00:01:32,856 --> 00:01:35,839 ‫as a React developer, especially if you work 26 00:01:35,839 --> 00:01:38,880 ‫on a team with other developers. 27 00:01:38,880 --> 00:01:41,220 ‫So then, you really need to be able 28 00:01:41,220 --> 00:01:45,780 ‫to understand the React code that other developers wrote. 29 00:01:45,780 --> 00:01:48,303 ‫And so that's what we will do now. 30 00:01:49,230 --> 00:01:51,286 ‫So, first of all, notice how we don't have 31 00:01:51,286 --> 00:01:55,380 ‫any node modules folder, and so the first thing to do is 32 00:01:55,380 --> 00:02:00,040 ‫to install that by opening up our terminal 33 00:02:01,350 --> 00:02:04,470 ‫and run NPM install. 34 00:02:04,470 --> 00:02:07,950 ‫Now, we don't even know how this project was built, 35 00:02:07,950 --> 00:02:09,930 ‫so if it is a Vite project 36 00:02:09,930 --> 00:02:13,050 ‫or if it's a Create React App project. 37 00:02:13,050 --> 00:02:17,220 ‫And to check that out, we can open up our package.json. 38 00:02:17,220 --> 00:02:20,684 ‫And then here in the script, we see that all of them start 39 00:02:20,684 --> 00:02:24,000 ‫with React scripts and not Vite. 40 00:02:24,000 --> 00:02:27,773 ‫So therefore, this is a Create React App, okay? 41 00:02:29,580 --> 00:02:32,790 ‫Therefore, that means that we start this application 42 00:02:32,790 --> 00:02:34,833 ‫by running NPM start. 43 00:02:35,970 --> 00:02:37,950 ‫So, otherwise we wouldn't even know how 44 00:02:37,950 --> 00:02:39,693 ‫to start this application. 45 00:02:40,620 --> 00:02:43,080 ‫Now, here we have something running already, 46 00:02:43,080 --> 00:02:45,870 ‫so let's just try another one. 47 00:02:45,870 --> 00:02:47,193 ‫And there we go. 48 00:02:48,030 --> 00:02:51,574 ‫So, it takes some time to open here, as always, 49 00:02:51,574 --> 00:02:53,066 ‫but then here it is. 50 00:02:53,066 --> 00:02:56,220 ‫So this is The Atomic Blog. 51 00:02:56,220 --> 00:02:59,550 ‫Now, I will not explain what this application is 52 00:02:59,550 --> 00:03:02,061 ‫and what it does because that's the whole point 53 00:03:02,061 --> 00:03:03,990 ‫of this challenge. 54 00:03:03,990 --> 00:03:06,360 ‫So, for the rest of this video, I want you 55 00:03:06,360 --> 00:03:11,360 ‫to now explore the code right here in the source code folder 56 00:03:13,290 --> 00:03:15,599 ‫and then the application here as well. 57 00:03:15,599 --> 00:03:18,083 ‫So, probably for that, you should take a look 58 00:03:18,083 --> 00:03:21,634 ‫at a component tree first and then move to the code 59 00:03:21,634 --> 00:03:25,500 ‫and check where most of the state lives and then how 60 00:03:25,500 --> 00:03:27,922 ‫that state and the data in general flow 61 00:03:27,922 --> 00:03:31,230 ‫through the application tree. 62 00:03:31,230 --> 00:03:33,828 ‫Now, one of the main things that I want you to notice 63 00:03:33,828 --> 00:03:36,286 ‫as you do this is how there is 64 00:03:36,286 --> 00:03:39,450 ‫a lot of prop drilling going on. 65 00:03:39,450 --> 00:03:42,030 ‫Now, some of that prop drilling could actually 66 00:03:42,030 --> 00:03:45,270 ‫easily be solved, but this example has all 67 00:03:45,270 --> 00:03:48,090 ‫of that prop drilling actually on purpose. 68 00:03:48,090 --> 00:03:50,798 ‫So, it's a bit of an artificial example just 69 00:03:50,798 --> 00:03:53,310 ‫to showcase this problem. 70 00:03:53,310 --> 00:03:56,130 ‫But anyway, I will now leave you to it. 71 00:03:56,130 --> 00:03:58,860 ‫So, take at least 15 or 20 minutes 72 00:03:58,860 --> 00:04:00,964 ‫to understand this application now 73 00:04:00,964 --> 00:04:04,050 ‫because you will need to understand it actually 74 00:04:04,050 --> 00:04:06,240 ‫to keep going in this section. 75 00:04:06,240 --> 00:04:08,784 ‫So, I will suppose that after this lecture, 76 00:04:08,784 --> 00:04:12,210 ‫you really know the code base in and out. 77 00:04:12,210 --> 00:04:14,010 ‫And then, once you're done doing that, 78 00:04:14,010 --> 00:04:16,896 ‫I meet you in the next lecture where we will talk about 79 00:04:16,896 --> 00:04:19,593 ‫what the context API is.