Setting Up a React Project Using Vite – Step-by-Step Guide.pdf

This presentation provides a clear, step-by-step guide to setting up a React.js project using Vite, a modern build tool known for its lightning-fast development experience and hot module replacement (HMR).

It covers:

What Vite is and why it’s preferred over Create React App (CRA)

Prerequisites for starting a React project

Complete setup process — from creating a project to running the development server

Explanation of each command and its purpose

Key benefits of using Vite for modern React development

1. ReactBasics
Prepared By:-
Kale J. N.
Assistant Professor,
Computer Engineering Department,
Sanjivani COE Kopargaon.
Prepared By: Kale J. N.

2. React is a JavaScript libraryfor building
user interfaces, developed by Facebook
(now Meta).
1. Component-based architecture
2. Declarative syntax (UI updates
automatically with data changes)
3. Used for building Single Page
Applications (SPAs)
4. Open-source and widely supported
Introduction
Prepared By: Kale J. N.

3. Why UseReact?
Main Advantages:
Fast Rendering–Uses Virtual DOMfor efficient UI updates.
Reusable Components–Build modular, maintainable code.
One-Way Data Flow–Makes debugging easier and predictable.
Strong Community Support–Large ecosystem of tools and
libraries.
Cross-Platform Development–React Native for mobile apps.
Prepared By: Kale J. N.

4. •Companies Using React:
•Facebook
•Instagram
•Netflix
•Airbnb
•Uber Eats
•Use Cases:
•Dashboards
•Dynamic Websites
•Single Page Applications (SPAs)
•Progressive Web Apps
Real-WorldUsage
Prepared By: Kale J. N.

5. Using Vite (Faster)
1. npmcreate vite@latestmy-react-app
2. cd my-react-app
3. npminstall
4. npmrun dev
Why Vite?
Extremely fast dev server start and hot module replacement (HMR)
Lightweight, opinionated defaults for modern JS & frameworks
Minimal config to get production-ready builds
Works well with React, TypeScript, CSS modules, PostCSS, etc.
Setting Up a ReactProject
Prepared By: Kale J. N.

6. React Project Structure
my-react-app/
┣src/
┃┣components/
┃┣App.jsx
┃┣main.jsx
┣public/
┣package.json
┣vite.config.js
src/ –main React code
components/ –reusable UI components
App.jsx–root component
main.jsx–entry file connecting React to the DOM
Prepared By: Kale J. N.

7. What are Components?
Definition:
Components are independent, reusable piecesof UI.
Think of them as functions that return HTML.
Types:
Function Components(modern approach)
Class Components(older approach)
function Welcome() {
return <h1>Hello, React!</h1>;
}
Prepared By: Kale J. N.

8. Component Hierarchy
App
├── Header
├── MainContent
│ ├── Card
│ ├── Card
└── Footer
Components can contain other components (nested structure).
The App component is usually the root of the tree.
Prepared By: Kale J. N.

9. Using a Component
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
function App() {
return (
<div>
<Greeting name="Jaydeep" />
<Greeting name="Kale" />
</div>
);
}
Prepared By: Kale J. N.

10. Summary
React is a powerful libraryfor building dynamic UIs
Uses componentsfor modular design
Supports fast renderingwith Virtual DOM
You can start with Viteor Create React App
Prepared By: Kale J. N.