Home > Web Front-end > JS Tutorial > Setup React With Vite Step-by-Step

Setup React With Vite Step-by-Step

Patricia Arquette
Release: 2024-10-09 14:33:02
Original
919 people have browsed it

Vite is a modern Build Tools designed to provide a fast and efficient development experience, especially for JavaScript-based applications such as React, Vue and others.

Vite itself focuses more on development speed with minimal configuration and faster loading times during the development process. Production build times are also usually faster due to optimizations from rollup

In this tutorial, you will learn how to install Reactjs with Vite step by step

Step 1
Open the terminal application that you have, here I use cmder, and go to the folder where you want to install the application

Setup React With Vite Step-by-Step

Step 2
To carry out the installation process you can use "yarn" or "npm",
type the following command in your terminal,

##NPM
npm create vite@latest

##YARN
yarn create vite
Copy after login

I use yarn.

After you execute the command above, you will be asked to enter the name of the application you want to create, as shown in the following image

Setup React With Vite Step-by-Step

Step 3
You will see a list; use the arrow keys to move up and down the list, click enter to select your preferred option.
In this step, we will choose React

Setup React With Vite Step-by-Step

Step 3
You will see five options to choose from, Navigate to and select
here I will choose Typescript SWC

Setup React With Vite Step-by-Step

And that's all; You now have your Vite project
Setup React With Vite Step-by-Step

Step 4
As instructed in the final results in step 3, you are asked to enter the application folder that you have created, after that run the command as instructed

### masuk ke folder aplikasi anda
cd react-vite

### install dependencies
yarn install
Copy after login

Setup React With Vite Step-by-Step

Step 5
After all the processes in step 4 are successful, to run the application you need to run the following command

### npm 
npm run dev

### yarn
yarn dev
Copy after login

Setup React With Vite Step-by-Step

After the application has been successfully run, you can access the application according to the link displayed in the terminal

Setup React With Vite Step-by-Step


Conclusion:
See, it's not difficult at all, and the whole process doesn't take long to complete.

Now you have successfully learned to install the ReactJS application using Vitejs

Thank you

The above is the detailed content of Setup React With Vite Step-by-Step. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template