How to create a React application with Vite and TypeScript from scratch

 What is vite?

Vite is a high-performance asynchronous and event-driven framework for building web applications in the Node.js runtime. It provides a fast development experience by leveraging modern JavaScript features such as ES modules and native browser support for dynamic imports. Vite is known for its quick startup time and efficient hot module replacement (HMR) capability, making it an attractive choice for developers looking to build modern web applications.

What I need? 

For use React you will need have installed node JS.

Proccess

1.- Create a new folder

If you use Linux

Create a new folder with write permision example:

   

     sudo mkdir /home/benjamin/react-demo/

Give write permission to folder

   

     sudo chmod -R 777 /home/benjamin/react-demo/

2.- Create vite and Type script project

Run this command inside the newly created folder.

   

     npm create vite@latest

You will have to select Framework: React

You will have to select variant: TypeScript

If everything goes well, you will see this screen.

2.- Install dependencies

In this case a folder called vite-project was created

Enter to folder name and run command:

   

     npm install

After installation it will show the following:

2.- Run application

For run application type command: 

   

     npm run dev

It will show the following.

You will have to enter the url where it says local. It will show the follow screen.

You will see this folder an files structure