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.
Open your terminal and navigate to the folder where you want to create your project. Then run:
npm create vite@latest hacker-stories -- --template reactYou can replace hacker-stories with any project name. If you're comfortable with TypeScript, you can use the react-ts template.
cd hacker-stories
npm install
npm run devAfter running npm run dev, your terminal will show a local URL. Open it in your browser to see your React app running.
To upgrade to the latest React version:
npm install react@latest react-dom@latestIf you're using TypeScript, also update the type definitions:
npm install --save-dev @types/react@latest @types/react-dom@latestOpen 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.jsVite 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.