React.js Application Setup

To setup our React.js application with Typescript we will follow the official tutorial which can be found here https://create-react-app.dev/docs/getting-started.

First step we need to is create the directory where our React.js and Node.js applications will be stored.

Info

You can use any place on your on your machine, but for tutorial purposes we will create our folder on the root of C disk ("C:/").

Lets name our new folder todo_project.

Now we want to intialize our default React project inside this directory. Also, we want it to support Typescript.

How we do it?

First, we need to open our console, and naviagte to new folder we created called "todo_project" by entering command cd C:/todo_project

Inside that directory, in the future, we want to have 2 different projects, one for our client application (React) and one for our server application (Node).

Lets start by initializing our React project. If we follow their tutorial from https://create-react-app.dev/docs/getting-started we can do it by executing the following command

npx create-react-app my-app --template typescript

As you can notice, this will create a new directory "my-app" with React project inside, that supports Typescript. Since we do not want our project to be named "my-app" but "client-app", we will you change the command to

npx create-react-app client-app --template typescript

And hit enter.

This may take a while, so be patient. After a while our setup should go through and you should see it when it is done.

Congratulations, you successfully created your React project inside "client-app" directory.