Welcome to the React with Vite section! This module bridges you from CDN-based React (opening HTML files in a browser) to professional React development with Vite — the way real projects are built.
Real React projects do not use CDN script tags. They use build tools like Vite that provide instant hot reload, proper file organization with imports/exports, third-party package management, and optimized production builds. In this module, you'll set up your first Vite project, organize code across multiple files, install npm packages, and build a complete multi-page application with routing.
| Topic | Description |
|---|---|
| Vite Project Setup | Creating, running, and building a React project with Vite |
| Components & Imports | Splitting code into files, default/named exports, CSS per component |
| npm Packages | Installing libraries, package.json, environment variables, config |
| Multi-Page Apps | react-router-dom, navigation, dynamic routes, API fetching |
| MUI Component Library | Material UI components, theming, sx prop, zero-CSS styling |
react-vite/
├── react-vite-1/ ⭐ Project Setup & Structure
│ └── README.md
│
├── react-vite-2/ ⭐⭐ Components, Imports & Styling
│ └── README.md
│
├── react-vite-3/ ⭐⭐⭐ npm Packages & Configuration
│ └── README.md
│
├── react-vite-4/ ⭐⭐⭐⭐ Vite React Mini Project
│ └── README.md
│
├── react-vite-5/ ⭐⭐⭐⭐⭐ MUI Material Design (Bonus)
│ └── README.md
│
└── README.md 📖 This file
- Completed the React Basics and React Advanced sections (or equivalent knowledge)
- Node.js version 18 or higher installed (download here)
- A modern web browser (Chrome, Firefox, Edge)
- A code editor (VS Code recommended)
- A terminal (Command Prompt, PowerShell, or VS Code integrated terminal)
- Start with React Vite 1 — open the
react-vite-1folder - Read
README.mdfor detailed theory and code examples - Follow the Activity Instructions — create your own Vite project and code along
- Progress sequentially — each module builds on the previous one
- Finish with React Vite 4 — a mini project combining everything
- Try the bonus — React Vite 5 rebuilds Part 4 with MUI (optional)
Each folder (react-vite-1 through react-vite-5) contains a complete, working Vite project. You can run any of them directly:
- Open a terminal and navigate into a project folder:
cd react-vite-1 - Install dependencies:
npm install - Start the dev server:
npm run dev - Open the URL shown in the terminal (usually
http://localhost:5173) - Edit files in
src/— the browser updates automatically via Hot Module Replacement - When ready, build for production:
npm run build - Preview the production build:
npm run preview
You can also create your own Vite project from scratch to practice: npm create vite@latest my-react-app -- --template react
Node.js is required for all modules in this section. Make sure
node -vreturns version 18 or higher before starting.
Difficulty: Intermediate
Set up your first professional React project:
- Installing Node.js and using npm
- Creating a Vite + React project from scratch
- Understanding the project file structure
- Hot Module Replacement (HMR) and the dev server
- Building for production
Difficulty: Intermediate
Organize your project with proper file structure:
- One component per
.jsxfile - Default exports vs named exports
- The
src/components/folder convention - CSS per component with
import './Component.css' - Importing images and static assets
Difficulty: Intermediate+
Install packages and configure your project:
- Installing third-party libraries (react-icons, clsx)
- Understanding
package.jsonandnode_modules/ - Environment variables with
VITE_prefix - Customizing
vite.config.js(port, aliases)
Difficulty: Advanced
Build a complete multi-page application:
- Professional folder structure (pages, components, styles)
- Client-side routing with
react-router-dom - Dynamic routes and URL parameters
- API data fetching with loading and error states
- Production build and deployment considerations
Difficulty: Advanced
Rebuild Part 4 with a professional component library:
- Why teams use MUI instead of custom CSS
- Installing and configuring MUI with Emotion
ThemeProvider,createTheme, andCssBaseline- The
sxprop for inline, theme-aware styling - MUI components: Typography, Card, Grid, AppBar, Alert, CircularProgress
- MUI + React Router integration
- Material Design icons
| Component | Technology |
|---|---|
| Build Tool | Vite 5 |
| Frontend | React 18 |
| Package Manager | npm |
| Routing (Vite 4, 5) | react-router-dom |
| Icons (Vite 3) | react-icons |
| UI Library (Vite 5) | MUI (Material UI) 5 |
| API (Vite 4, 5) | JSONPlaceholder |
- Complete the advance section first — this module assumes you know components, state, effects, and fetching
- Type the code yourself — do not copy-paste. Typing builds muscle memory for imports, exports, and JSX
- Keep the terminal visible — Vite shows errors and warnings in real time
- One step at a time — get each activity step working before moving to the next
- Use git — commit after each module so you can go back if something breaks
| Problem | Solution |
|---|---|
node -v not recognized |
Install Node.js from nodejs.org |
npm create vite fails |
Update npm: npm install -g npm@latest |
| Dev server won't start | Run npm install first to create node_modules/ |
| Module not found error | Check that import paths match file locations exactly |
.jsx file not working |
Ensure the file extension is .jsx, not .js, for files with JSX |
| Env variables undefined | Restart dev server; variable names must start with VITE_ |
| Routes show blank page | Verify BrowserRouter wraps the app in main.jsx |
| Build works but routes 404 on refresh | Use npm run preview for testing; deploy to an SPA-aware host |
- React Vite 1: Project Setup & Structure
- React Vite 2: Components, Imports & Styling
- React Vite 3: npm Packages & Configuration
- React Vite 4: Vite React Mini Project
- React Vite 5: MUI Material Design (Bonus)
- Vite Official Docs
- React Official Docs
- react-router-dom Docs
- npm Documentation
- react-icons Browser
- MUI Official Docs
Happy Coding!
You've gone from CDN script tags to professional React development. Every React job uses tools like these — you're building real-world skills!