Setting Up a React Project with Vite Simplified ⚛︎

Introduction

Vite is a Frontend Tool. It gives you a Pre ready Structured Folder and Files with all Dependencies Installed. Why Most of The Developers Prefers it Over CRA(Create React App) Cause It Gives Structured Folder Within a Seconds You Don’t Need to Manually Create Folders and Files and Install all The Dependencies and Also Don’t Have to Integrate The Packages of React And Babel .

Benefits of Using Vite

• Lighting Fast Dev Server

• Minimal Configuration

• Moder Build System

• Smaller & cleaner project structure

Prerequisites

• Node.js Installed

• Basic Understanding of React

• Code Editor

Now Setting Up Project

First Open Terminal In your VS Code and Then Type These Command

npm create vite@latest my-vite-app

Now It Show You Bunch of Frameworks Choose React With JavaScript or TypeScript

cd my-vite-app
npm install

It Will Navigate to your Project Folder and Install all Dependencies Which Is Required For your Project

npm run dev

It Will Start The Dev server you Can Press CTRL and Click on The LocalHost It Will Open In Browser

👉 Boom! Your React app is live at http://localhost:5173/

Understanding The Structure Of Folder

• index.html at root.

• src/ - main React code.

• main.jsx (entry point).

• App.jsx (root component).

Thats All You Can Now Make Your Project As Per yours. I Recommend Always Use These Kind Of Tool To Accelarate Your Productivity. Vite is One Of Them The New Era Of Frontend Developement

Thanks For Reading My Article ❤️ and Also Share Your Thoughts in The Comments ☺️