Setting up the React Project

[00:00 - 00:26] This section is all about fronting and we will be creating our client-side application using React of course. Let's start by opening the React website which is reactjs.org. Let's click on that and click on get started. Since we want to start a new project let's click on create a new React app.

[00:27 - 00:38] If we scroll down a bit we can see react gives us some recommendations. There are options for creating a new single page app which we want to create.

[00:39 - 01:39] React recommends nextjs for websites that require server-side rendering and gets by for static content related websites such as the blogging websites. Since we want to create a single page application let's click on create react app. It says it sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience and optimizes your app for production. You'll need to have node version equal or more than 10.16 and npm version is equal to or greater than 5.6. To create a new project let's follow these commands. By the way Npx is a package runner tool which comes with npm and since we want our project to be in TypeScript we will add some additional commands to this one. Let's open the terminal and go to our Learning Fire project.

[01:40 - 03:16] We have three folders API, entity and infrastructure and a solution file called learnify.sln. I would like to create the client application inside the same directory so that it's easier to navigate to our client application. Before we create the application make sure we are using the recommended node and npm version. Now let's check my node version which is 14.15.4 and my npm version is 6.14.10 which meets the requirement. Let's finally create the project using npx create react app and let's name our project client. I would like to add two more switches here one is use npm which will make sure that we are using npm and not yarn and the second switch is template TypeScript. This is because we are using TypeScript in our project. Now let's press enter. It just takes one single command to create the entire project and you don't have to worry about the webpack and Babel. It will take care of everything for us.

[03:17 - 04:40] This might take one or two minutes to complete making the project. I'll just pause the video and return when the project is completed. As we can see our project has been built successfully and it has created a tasconfig.json file because we are using TypeScript in our application. Let's look at our learnify project now and as you can see we have our client project listed here. Let's go inside the client project and check the contents. We will talk about all of them in the next lectures so don't worry. Let's check if our project works. Type npm start and press enter. This will automatically compile and run a project and also open it on the browser. We will see a screen like this and it 's okay if you're not seeing the same thing as me because this page keeps on changing. If we go back to our terminal it shows us the port where we are running the application and it also says the development build is not optimized. Use npm run build to create a production build which is exactly what we want.

[04:41 - 04:49] Now that we have successfully created our React project let's look at the contents of the React project in the next lecture.