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

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.