LogoفارسیFA

Setting Up a React Project with Vite – Fast Start, Modern Structure, and Focused Learning

Vite is a modern build tool that makes starting a React project fast and intuitive. With sensible defaults and high extensibility, it allows developers to focus on learning React without being distracted by complex tooling. This article walks through setting up a React project with Vite, understanding the project structure, and upgrading React if needed.

ReactVitenpm

~2 min read • Updated Oct 21, 2025

Introduction


Vite is a fast and modern tool for bootstrapping React projects. With built-in configuration and plugin support, it helps developers start quickly and stay focused on learning React.


Why Vite?


  • Development server for running the app locally
  • Bundler for optimized production builds
  • Plugin support for SVGs, TypeScript, SSR, and more

Creating a React Project with Vite


Open your terminal and navigate to the folder where you want to create your project. Then run:


npm create vite@latest hacker-stories -- --template react

You can replace hacker-stories with any project name. If you're comfortable with TypeScript, you can use the react-ts template.


Installing and Running the Project


cd hacker-stories
npm install
npm run dev

After running npm run dev, your terminal will show a local URL. Open it in your browser to see your React app running.


Upgrading React


To upgrade to the latest React version:


npm install react@latest react-dom@latest

If you're using TypeScript, also update the type definitions:


npm install --save-dev @types/react@latest @types/react-dom@latest

Project Structure


Open the project in VSCode using code .. You’ll see a structure like this:


hacker-stories/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js

Key Files Explained


  • package.json: Lists dependencies and project settings
  • node_modules: Contains installed packages (do not edit)
  • .gitignore: Specifies files to exclude from git
  • vite.config.js: Vite configuration and plugins
  • public: Static assets like favicon
  • index.html: Entry HTML file with script linking to React
  • src/App.jsx: Main React component file
  • src/main.jsx: Entry point to React rendering

Conclusion


Vite offers a fast and simple way to start React projects. With a clean structure, built-in configuration, and easy upgrade paths, it helps developers focus on building apps without getting bogged down by tooling complexity.


Written & researched by Dr. Shahin Siami

Next Article