‫Welcome back.
‫So now that we know that we want to use Create-React-App
‫for small course projects,
‫let's actually set up our very first project now
‫with the Create-React-App tool.
‫Now, Create-React-App is a command-line interface tool.
‫And so now we need actually a terminal
‫or a command prompt as it's called on Windows.
‫So if you're on Windows,
‫go ahead and open up your command prompt,
‫and if you're on a Mac, then open up your terminal.
‫Okay, let's make this a bit bigger.
‫And there's not a lot of things
‫that you need to know about the terminal.
‫So all you need to know is that in the terminal,
‫or also in the command prompt,
‫which I'm just going to use interchangeably,
‫you're always in a folder.
‫And that folder is usually displayed here
‫in the command prompt.
‫Now, this command prompt here, so this thing,
‫probably looks very different for you
‫than it looks for me, but that's just
‫because I have this kind of extension here installed.
‫So for you, it's probably just all black.
‫And most likely, you will see the folder
‫that you're currently in here.
‫So I'm currently in this folder,
‫which is basically just the home folder.
‫And you can see the contents of the folder
‫by writing ls on the Mac.
‫And on Windows, the same thing is dir,
‫which stands for directory.
‫So again, with this you can see the contents
‫of the current directory.
‫So what I want to do now is
‫to navigate to another directory,
‫which is where I ultimately want
‫to run the Create-React-App tool.
‫So for me, that's the Desktop again.
‫And so I can write cd
‫and then the name of the folder and hit Enter.
‫And this command is actually the exact same on Windows.
‫So that's also cd.
‫And so make sure that you navigate to the folder
‫in which you want to create the new project.
‫So again, for me, that's on the Desktop.
‫And just to make sure, yeah,
‫these are the two folders that are on my desktop,
‫which are exactly these two, right?
‫Now, later on, we will actually use the terminal
‫that is integrated into VS Code,
‫for example, to start and stop the application.
‫But to create an application,
‫we will always keep using this terminal here
‫because the terminal that's in VS Code
‫is usually tied to the project folder itself.
‫But here, we don't have a project folder yet.
‫Instead, we will now create it using Create-React-App.
‫Once you're in the folder
‫where you want to create the new project,
‫type npx and then create-react-app
‫and then the name of the app that you want to build.
‫Now, in our case,
‫that's going to be pizza-menu
‫because this is our very first project
‫that we're going to build in this course
‫in the next section.
‫However, we're not really ready to run this yet
‫because I want you to actually use the version five
‫of Create-React-App.
‫So please write this @ and then 5
‫to lock in version five of Create-React-App.
‫And that's important
‫because this tool will most likely change in the future,
‫and then it might work in a slightly different way
‫than the one that I'm showing you here.
‫But in order not to run into any problems,
‫let's just fix this on version five
‫for the rest of the course.
‫And then later, if you want to build your own projects
‫outside of the course, you, of course,
‫no longer need this.
‫Then you will just run Create-React-App like this
‫without the version number.
‫But here, let's do it like this.
‫So once you have it written like this, just hit Enter,
‫and this will then take a long time to download.
‫Well, actually, first,
‫it asks me if I want to proceed.
‫So just type y and then Enter or return.
‫And so yeah, now it is starting to download like,
‫thousands of packages,
‫which will take a lot of time.
‫But you see it already created the folder
‫with the name of the app that we specified here,
‫pizza-menu.
‫So go ahead and pause the video right now,
‫and I will be back here once downloading all
‫of these packages has finished.
‫Okay. And it's done installing all the packages.
‫And so now we can actually close up this terminal
‫or the command prompt.
‫Now, before I open up this folder here,
‫I will quickly rename this folder just
‫so they stay in the order that I want them to be.
‫But this is totally optional.
‫So number two will be for the next section.
‫That's why this one is number three.
‫Okay.
‫And now we're ready to open up this project
‫as project folder in VS Code.
‫And so once again,
‫I will drag and drop it onto the VS Code icon down here,
‫or optionally, you can also just open a new VS Code window
‫and then open up the project folder right here.
‫But anyway, let's now explore the file structure
‫that has been created for us by Create-React-App.
‫And we can already see
‫that this is actually just a regular npm project
‫that we could also have manually created using
‫the npm init command.
‫So we have a package.json file here,
‫which contains the name of the app, the version,
‫the dependencies, and also the npm scripts.
‫All right.
‫And we also have the node_modules folder,
‫which is where all the npm packages have been installed.
‫And you see that there are hundreds,
‫maybe thousands of them,
‫but I'm just looking for the React ones here.
‫And yeah, here they are.
‫So here is the react package,
‫and here, the react-dom package.
‫And remember that these two are exactly the ones
‫that we also included into our file
‫in the pure React lecture, right?
‫But we did it back then using the script tag,
‫and of course, not using npm install, right?
‫Now, if this whole concept here of the npm project,
‫so this node_modules and the package.json,
‫is a bit strange for you, then don't worry,
‫you don't really need to understand all that.
‫But if you want, you can just try
‫to read something on it or watch a video,
‫or I also explain it all in my complete JavaScript course.
‫But again, it's not really necessary.
‫Just know that this is very, very standard
‫in basically all modern JavaScript projects
‫that have a build tool associated.
‫Okay?
‫But anyway, let's now check out these other folders
‫that have been created for us.
‫Now, most of our development work,
‫or basically all development,
‫will happen here inside the source folder.
‫So here, we have a bunch of files,
‫where most of them we actually don't need.
‫And so we will get rid of them soon.
‫But for now, let's just leave everything here as it is
‫and checking out the other folder,
‫which is the public folder.
‫And this is where basically all the assets
‫that will end up in the final application go.
‫So all the images, like the favicon,
‫and also the index.html file.
‫And if we open that up,
‫we have a bunch of stuff here
‫and, well, all of these comments here,
‫which you can read if you want.
‫But I just wanted to draw your attention
‫to this div with the id of root.
‫So is that familiar to you?
‫Yeah, we wrote exactly the same thing
‫in the pure React lecture
‫and used this as the root of our app.
‫And so exactly the same convention has been used here
‫by Create-React-App.
‫So Create-React-App created
‫this index.html file already for us.
‫And then if we open index.js,
‫you see that here it also selects that root element,
‫so the element with the id of root,
‫and then it creates the root
‫using ReactDOM.createRoot
‫and then renders the app into it.
‫So exactly like we did in the pure React lecture.
‫But more about all this
‫at the beginning of the next section,
‫when we actually start building this project.
‫For now, I just want to explore
‫the file structure here a little bit.
‫Now, what I do want to say in this video
‫is that all of these files
‫and this entire file structure here has been created
‫by Create-React-App in a way
‫that its developers thought was best.
‫But it could be all completely different.
‫Like, this index.html could be out here,
‫or it could be inside here,
‫or we could maybe have no folders at all,
‫because React really doesn't care about any of that.
‫And the proof for that is that in the pure React lecture,
‫we didn't need any of this, right?
‫All we had was one index.html with some JavaScript
‫in which we basically had this.
‫So this part here is actual React,
‫and it's this part which takes care
‫of rendering this App component into the DOM.
‫So this App component is here inside this App file.
‫But we will open up all of these files
‫and clean them up, also,
‫once we start actually building the app.
‫For now, I just wanted to explore this a little bit,
‫and also, I actually wanted to now start this app.
‫So to start a Create-React-App,
‫we can use this npm script right here.
‫So this npm run start.
‫So let's open up the terminal again.
‫But as I said in the beginning,
‫now we will actually use the integrated terminal
‫that comes with VS Code.
‫So for that, open up terminal right here.
‫And now the big advantage here is
‫that we are already automatically inside our project folder.
‫So if we run ls here, or dir on Windows,
‫then you will see exactly the same files and folders
‫that we have here in the sidebar.
‫But anyway, now, to start the project,
‫all we need to do is to run npm run start
‫because this is how you run these commands right here.
‫So you write npm run
‫and then the name of one of these four, in this case.
‫And we could also create our own,
‫but we don't need to.
‫Now, in the case of the start command,
‫we actually don't even need to write run.
‫Can just type npm start, hit Enter,
‫and that will then start up our application
‫and even open up a new browser tab.
‫And there it is.
‫So Create-React-App created a web server for us
‫and made our application run here
‫on localhost port 3000.
‫Okay?
‫Now, let's just one more time come back here
‫and open up this App component.
‫So this App component here is inside the App file.
‫Well, let's just take everything here
‫and just very quickly type h1,
‫Hello React!
‫Give it a save.
‫And then once we go back,
‫it should automatically have updated.
‫And indeed, it did.
‫So this was one of the things that we were missing
‫in the pure React lecture,
‫but now, here we are actually using a web server.
‫And so we get hot module replacement with that.
‫Great.
‫So congratulations, you just created
‫your very first Create-React-App application.
‫And with this, we actually reached the end
‫of the First Look at React section.
‫Now, the next section is a quick review
‫of the essential JavaScript that you need for React.
‫And so you can see if you need any of those lectures.
‫But if not, then just move on right to the next section,
‫where we will then start building this pizza menu
‫that we started here to learn all the fundamentals of React.
‫So hopefully I see you there very soon.