Skip to main content

React Project Setup & Structure

A comprehensive guide to setting up a modern React project with proper organization and best practices.

Project Structure​

mkdir -p src/{components,hooks,services,utils,pages,assets,styles}
touch src/{components,hooks,services,utils}/index.js

Environment Configuration​

#ENV
# Example .env content
VITE_API_URL=https://api.example.com

import.meta.env.VITE_API_URL
my-app/
├── public/
├── src/
│   ├── assets/         # Images, fonts, etc.
│   ├── components/     # Reusable components
│   │   ├── common/     # Shared components like Button, Input, etc.
│   │   ├── layout/     # Layout components like Header, Footer, etc.
│   │   └── features/   # Feature-specific components
│   ├── hooks/          # Custom React hooks
│   ├── pages/          # Page components
│   ├── services/       # API calls and other services
│   ├── styles/         # Global styles and theme
│   ├── utils/          # Helper functions and constants
│   ├── App.jsx
│   └── index.jsx
├── .eslintrc.json
├── .prettierrc
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md