Setting up a React project (Vite / Create React App)

Acadestine

Setting up a React Project (Vite / Create React App)

To start building a React application, you need a development environment. React projects are typically set up using build tools that handle bundling, transpiling, and hot reloading. The two most popular approaches are Create React App (CRA) and Vite. While CRA has been the go‑to for years, Vite has emerged as a faster, more modern alternative.

Create React App is an officially supported tool that sets up a modern React project with zero configuration. It uses webpack under the hood and provides a development server, build scripts, and testing tools.

Installation

To create a new project:

npx create-react-app my-app
cd my-app
npm start

Folder Structure

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── package.json
├── README.md
└── ...

Features

  • Development server with hot reloading.
  • Build scripts for production.
  • Testing with Jest.
  • Eject option (but not recommended).

Note: Create React App is still widely used, but the React team now recommends using a framework like Next.js or Vite for new projects.

CRA has become slower over time, especially for larger projects, because of its webpack configuration. Many developers are migrating to Vite for faster startup times.

Vite (French for "fast") is a build tool that leverages ES modules and native browser features to provide a lightning‑fast development experience. It uses Rollup for production builds and supports React out of the box.

Installation

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Alternatively, you can use the react-ts template for TypeScript:

npm create vite@latest my-app -- --template react-ts

Folder Structure (similar to CRA)

my-app/
├── node_modules/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── App.css
│   └── ...
├── index.html          // Entry point (directly in root)
├── vite.config.js      // Vite configuration
├── package.json
└── ...

Why Vite?

  • Fast startup – uses native ES modules, no bundling during development.
  • Instant hot module replacement – updates are near‑instant.
  • Optimized build – uses Rollup for production.
  • Plugin ecosystem – supports many frameworks and tools.
  • Simplicity – minimal configuration needed.

Recommendation: For new projects, Vite is the preferred choice due to its speed and modern architecture. It's especially beneficial for large codebases.

Feature Create React App Vite
Development Server Speed Slower (bundles entire app) Extremely fast (ES modules)
Build Tool Webpack Rollup (for production)
Configuration Minimal (no config) Minimal, but customizable via vite.config.js
Startup Time Several seconds Sub‑second
Hot Module Replacement Good, but slower Instant
Eject Available (not recommended) Not needed – config is exposed
Popularity Still widely used Growing rapidly
TypeScript Support Built‑in Built‑in (choose template)
Production Build Size Good Similar or better
Future‑Proof Slow evolution Actively developed
Which One to Choose?
  • Use Vite for new projects – it's faster, more modern, and easier to customize.
  • Use CRA if you're working on an existing project that already uses it, or if you need a completely zero‑config setup.
  • Consider Next.js if you need server‑side rendering or static site generation.

Let's walk through creating a React project with Vite.

Step 1: Create the Project

npm create vite@latest my-react-app -- --template react
# Or for TypeScript:
npm create vite@latest my-react-app -- --template react-ts

Step 2: Install Dependencies

cd my-react-app
npm install

Step 3: Run the Development Server

npm run dev
# Open http://localhost:5173

Step 4: Build for Production

npm run build
# Output is in the `dist` folder

Step 5: Preview the Production Build

npm run preview
# Serve the dist folder locally

Vite uses port 5173 by default. You can change it in vite.config.js or via CLI options.

If you prefer CRA:

Step 1: Create the Project

npx create-react-app my-app

Step 2: Enter the Project and Start

cd my-app
npm start
# Open http://localhost:3000

Step 3: Build for Production

npm run build
# Output is in the `build` folder
  • ESLint and Prettier – Install for code quality.
  • Environment Variables – Use .env files in both tools (prefixed with VITE_ for Vite, REACT_APP_ for CRA).
  • Aliases – Configure path aliases in vite.config.js or using craco for CRA.
  • CSS Preprocessors – Both support Sass, Less, etc.
// vite.config.js example with alias
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});
  • Create React App (CRA) – the original zero‑config tool, uses webpack. Good for beginners but slower.
  • Vite – modern, fast, uses ES modules and Rollup. Recommended for new projects.
  • Both allow you to quickly start a React project with minimal configuration.
  • Vite offers faster startup, instant HMR, and a simpler development experience.
  • Choose based on project requirements, team familiarity, and performance needs.
Key Takeaway

"Vite is the future of React development – it's fast, modern, and easy to use. If you're starting a new project, give it a try!"

Happy coding!

Previous Next Lesson