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.