Getting started with React.js with Typescript using vite.js⚡

In 2023, React is still one of the best ways to build user interfaces, despite all the frameworks that have pop up in the last few months promising performance improvements and good Developer experience, React still remains the OG, the King of UI because of its ginormous community, ease of use, the fact that it is "just JavaScript", unlimited supporting packages and integrations that still makes it the go to means for building user interfaces in 2023🔥. That was a lot to take in right? 😊
So let's get started by learning what these technologies are😊.

what is React?

React is a JavaScript library for building interactive user interfaces Developed by Facebook and maintained by it's awesome open-source community members. In React, there are two ways of writing React code, Using the infamous Class Components or the beloved Functional Components, the latter is the recommended way of using React by the docs React Docs.

what is TypeScript?

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. It helps you to catch silly bugs that can break your code in production, it adds a strongly typed system on top of JavaScript resulting in more lines of code but it helps a lot with code maintenance and readability.

what is Vite?

Vite (the French word for "quick", pronounced /vit/, like "veet") is a build tool that provides a faster and leaner development experience for modern web projects. It consists of two major parts:

• A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).

• A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Vite doesn't need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
In Conclusion, Vite is faster, lighter and more enjoyable than other build tools for React.

Getting Started

To get started with React and Typescript with Vite, you will have to pass some requirements.

1. Good knowledge of ES6+ syntax and logic.

2. you know your way around JavaScript i.e. you have built 2 or more projects such as Todo App, Movies App or any app that consumes an API and displays things on the page based on certain conditions.

3. You have Node.js installed on your computer. from v17.0.0 upwards. To download Node.js go to Nodejs Site and download the LTS (Long Term Support) version.

4. A node package manager either NPM, Yarn or Pnpm will work perfectly. The preferred version of NPM should be v8.1.0 and above.

Once you have checked these requirements, you can now follow these steps:

1. First, open your terminal. on windows, type 🪟 + R then type cmd on the popup and click enter, that will open up a terminal to your root directory.

2. Navigate to the folder you want to create your app in. once you are there, then type in the following command:

   with NPM:
   

   npm create vite@latest
   

   with yarn:
   

   yarn create vite
   

   with PNPM:
   

   pnpm create vite```
   
   

1. Click enter to proceed. you will be prompted to enter the name of the project. enter the name of your choice e.g. "my-project-name" .

   when you've done that, click enter.

   1. it will ask you to select a framework, use the arrow keys to move up and down and enter to select.
   2. Select React, then select Typescript

   3. it will scaffold your project.

      Now you can run the following commands:

4.

cd my-project-name

moves you into "my-project-name" folder where the app was created.

5.

npm install

installs all the files and dependencies of React and Typescript.

6.

npm run dev

starts the application in development mode

1. You can now edit the App.tsx file with the code editor of your choice and instantly see your changes in the browser without refreshing thanks to the Hot Module Replacement (HMR) built into Vite .

And that is how you setup React with Typescript using Vite⚡.

Thanks you.