Setting Up React

Creating a React Project

The fastest way to start a new React project is with Vite, a modern build tool that provides instant server start and lightning-fast hot module replacement (HMR).

You can also use Create React App (CRA), but Vite is now the recommended approach due to its speed and smaller bundle sizes.

# Create a new React project with Vite
npm create vite@latest my-app -- --template react

# Navigate into the project
cd my-app

# Install dependencies
npm install

# Start the development server
npm run dev

• Vite — Fast, modern build tool (recommended)
• Create React App — Official tool, but slower (legacy)
• Next.js — Full framework with SSR and routing built-in
• Node.js and npm must be installed first

Project Structure

A Vite React project has a clean structure. The src/ folder contains your components and styles. The main entry point is main.jsx which renders your App component into the DOM.

my-app/
├── public/           # Static assets
├── src/
│   ├── App.jsx       # Main component
│   ├── App.css       # App styles
│   ├── main.jsx      # Entry point
│   └── index.css     # Global styles
├── index.html        # HTML template
├── package.json      # Dependencies
└── vite.config.js    # Vite configuration

• src/ — Your React components and styles
• public/ — Static files served as-is
• main.jsx — Entry point that renders into the DOM
• package.json — Project dependencies and scripts