Preqrequisites:

• Node.js installed (v18+)
• npm (comes with Node) or yarn/pnpm

node -v
npm -v

Create a React App

1. Create React App (CRA)

• Classic method, sets up everything for you.

  • Simple and beginner-friendly
  • Fully configured
  • ❌ Bundle can be larger
  • ❌ Less modern features by default (React 18 features require tweaking)

  npx create-react-app my-app
  cd my-app
  npm start
  # Default starts a dev server at <http://localhost:3000>
  

2. Vite

• Fast, modern, lightweight bundler

  • Much faster than CRA
  • Supports Hot Module Replacement (instant updates)
  • Easy to customize

  npm create vite@latest my-app
  # Project name → my-app
  # Framework → React
  # Variant → JavaScript or TypeScript
  cd my-app
  npm install
  npm run dev
  # Default runs dev server → <http://localhost:5173>
  

3. Next.js (for SSR / SSG / Fullstack)

• Use if you plan SSR / SSG.

  npx create-next-app@latest my-app
  cd my-app
  npm run dev
  

Folder Structure (Vite Example)

my-app/
├─ public/        # static files (index.html, images)
├─ src/
│  ├─ main.jsx    # app entry
│  ├─ App.jsx     # main component
│  ├─ assets/     # images, icons, etc
│  ├─ components/ # reusable components
│  ├─ pages/      # if using routing
│  ├─ lib/        # set the tools/middleware
│  ├─ config/     # set the constant/config
│  └─ styles/     # css/scss
├─ package.json
└─ vite.config.js