‫Let's do something unconventional now
‫and start the section with a challenge.
‫However, this is a very different challenge
‫because all I want you to do in this one is
‫to study and understand both the code and the data flow
‫in a small, new application on your own.
‫And to get started, let's just open up our starter files
‫and then let's go to this project number 12,
‫called Atomic Blog, and then let's copy
‫the entire starter folder onto our desktop.
‫And then we can just rename it to Atomic Blog again.
‫And then all we're going to do is to open it up in VS code.
‫So this time, we are not creating a new project
‫from scratch using Create React App, or Vite,
‫but instead I already did that before
‫and so here are all the files now.
‫So, the idea of this challenge is that someone
‫on your team built this small project
‫before you had joined the team
‫and so now they handed that project over to you,
‫and so of course then you need to jump into the project
‫and understand how it works and what it does.
‫And so that is basically the goal of this challenge.
‫So, this is a super important skill to have
‫as a React developer, especially if you work
‫on a team with other developers.
‫So then, you really need to be able
‫to understand the React code that other developers wrote.
‫And so that's what we will do now.
‫So, first of all, notice how we don't have
‫any node modules folder, and so the first thing to do is
‫to install that by opening up our terminal
‫and run NPM install.
‫Now, we don't even know how this project was built,
‫so if it is a Vite project
‫or if it's a Create React App project.
‫And to check that out, we can open up our package.json.
‫And then here in the script, we see that all of them start
‫with React scripts and not Vite.
‫So therefore, this is a Create React App, okay?
‫Therefore, that means that we start this application
‫by running NPM start.
‫So, otherwise we wouldn't even know how
‫to start this application.
‫Now, here we have something running already,
‫so let's just try another one.
‫And there we go.
‫So, it takes some time to open here, as always,
‫but then here it is.
‫So this is The Atomic Blog.
‫Now, I will not explain what this application is
‫and what it does because that's the whole point
‫of this challenge.
‫So, for the rest of this video, I want you
‫to now explore the code right here in the source code folder
‫and then the application here as well.
‫So, probably for that, you should take a look
‫at a component tree first and then move to the code
‫and check where most of the state lives and then how
‫that state and the data in general flow
‫through the application tree.
‫Now, one of the main things that I want you to notice
‫as you do this is how there is
‫a lot of prop drilling going on.
‫Now, some of that prop drilling could actually
‫easily be solved, but this example has all
‫of that prop drilling actually on purpose.
‫So, it's a bit of an artificial example just
‫to showcase this problem.
‫But anyway, I will now leave you to it.
‫So, take at least 15 or 20 minutes
‫to understand this application now
‫because you will need to understand it actually
‫to keep going in this section.
‫So, I will suppose that after this lecture,
‫you really know the code base in and out.
‫And then, once you're done doing that,
‫I meet you in the next lecture where we will talk about
‫what the context API is.