Install React with Vite (with Typescript)

Summary

The website provides a guide on how to install React with Vite using TypeScript, emphasizing its simplicity and suitability for testing or learning without the need for a full framework like Next.js.

Abstract

The article explains the benefits of using React without a complex framework for small-scale projects or learning purposes. It suggests using Vite as an alternative to the now-deprecated create-react-app for setting up a React project with TypeScript. The author outlines the installation process, which involves running a single command to create a new Vite project, selecting React and TypeScript as the template, and then executing subsequent commands to install dependencies and start the development server. The article assures that the setup is straightforward, resulting in a ready-to-use React application with a simple counter example running at a specified localhost URL. The author concludes by highlighting the ease of the setup process and invites readers to join a community for further knowledge sharing.

Opinions

The author believes that using frameworks like Next.js or Remix can be unnecessary and cumbersome for simple React setups.
create-react-app is considered outdated and not recommended by the author.
Vite is presented as a superior alternative for its ease of use and quick setup.
The author expresses that the installation process should be straightforward and not time-consuming, aligning with the goal of starting projects quickly.
Engagement with the audience is encouraged, with the author inviting readers to follow and participate in a community for shared learning experiences.
The author values reader feedback and welcomes comments, indicating a desire for interactive communication with the audience.

Install React with Vite (with Typescript)

Why should we care about running React without a framework like Next.js, Remix, and so on? When you want to test something or you are learning something, Next.js can be overhead, so you may choose only React.

Since create-react-app is not recommended, we need to do it another way. We can do it with Vite. Is it hard? Nope, it’s easy. I will show you.

Be sure you have Node.js ≥v18 installed on your machine, and then run this command:

npm create vite@latest

After that, it will ask you some questions, such as which library you want to choose or if you want to choose React. I chose React and TypeScript.

After that, you need to run command below (as the installation process suggests).

npm i
npm run dev

After that, it will show you on which URL your app is running. Mine is on http://localhost:5173/.

As a result, you should see the introduction page with a simple counter.

Let’s check how our folders look.

Wasn’t it easy? And it should be. We aim to start as quickly as possible without spending hours setting up a project

If you enjoyed the read and want to be part of our growing community, hit the follow button, and let’s embark on a knowledge journey together.

Your feedback and comments are always welcome, so don’t hold back!