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

Related Articles

Forms in React – Submitting Data with onSubmit and Action in Search Forms

react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action

Continue

Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching

This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.

Continue

Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button

In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.

Continue

Impossible States in React – Predictable State Management with useReducer

Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.

Continue

Advanced State Management in React – Using useReducer for Complex Transitions

While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.

Continue

Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data

Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.

Continue
Next Article