"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Front page > Programming > Setup React With Vite Step-by-Step

Setup React With Vite Step-by-Step

Published on 2024-11-08
Browse:625

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 am using 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

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 you were told to do

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

### install dependencies
yarn install

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

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 ReactJS applications using Vitejs

Thank You

Release Statement This article is reproduced at: https://dev.to/ramadhan002/setup-react-with-vite-step-by-step-48mi?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3