React Hero: Setup a new React application with Vite + TypeScript

Welcome back to my React series. Today I will start writing a new series called React Hero where I can share with you a step-by-step guide on how to be a master in React development. Let’s start with the very first step of any project — Setup a new React application.

The React Hero series will be covering the following topics:

1. Setup a new React application with Vite + TypeScript (we are here today)
2. Setup React application with a design system - Material UI
3. Setup Jest + React Testing Library
4. Setup ESlint + Prettier in React
5. React Router
6. React Form Handling + Validation
7. Setup Redux Tool Kits & RTK Query
8. Build + Deploy your React application to your own server
9. Setup CI/CD pipeline for React app using GitlabCI
10. And more…

Okay, let’s start the 1st part today.

What is Vite?

It’s a build tool that aims to provide a faster and leaner development experience for modern web projects including 2 parts:

• A dev server that provides fast Hot module replacement