This video is available to students only

Setting up the React Project

In this lesson, we're going to create our client-side application using React

Setting up React project#

This section is all about our frontend. We will be creating our client side application using React of course, so let's start by opening the React website. Click on Get Started. Since we want to start a new project, let's click on Create a New React App. 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. React also recommends Next.Js for websites that require server-side rendering and Gatsby for static content related websites such as Blogging websites. Since we want a single page application, let's click on Create React App. it says that it has set up your development environment so that you can use the latest JavaScript features, provide a nice developer experience, and optimize your app for production. Make sure your node version is greater than or equal to 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 the npm, and since we want our project to be in typescript, we will add some additional commands.

Let's open the terminal and go to our learnify project; let's see what we have inside our project. We have 3 folders: API, Entity, Infrastructure, and a solution file; 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. My node version 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. Second switch is --template typescript, since 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 babble; it will take care of everything for us. It might take 1 or 2 minutes to complete making the project. Let's go.

Start a new discussion. All notification go to the author.