39) React Folder Structure

Basic React Folder Structure
When you create an app using tools like Create React App or Vite

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

Key Folders -
public/ → Static files (HTML, favicon, images)
src/ → Main application code

Intermediate Structure
As your app grows, you organize by type of file

src/
├── components/
├── pages/
├── hooks/
├── services/
├── context/
├── utils/
├── assets/
├── styles/
├── App.js
├── index.js

Advanced Structure
For large-scale apps, structure by feature (domain-based architecture)

src/
├── features/
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── services/
│   │   ├── authSlice.js
│   │   └── AuthPage.jsx
│   │
│   ├── dashboard/
│   │   ├── components/
│   │   ├── DashboardPage.jsx
│
├── shared/
│   ├── components/
│   ├── hooks/
│   ├── utils/
│
├── layouts/
├── routes/
├── store/
├── App.js
├── main.jsx

In React, folder structure evolves from simple (components, pages, services) to feature-based architecture for scalability. Large apps group files by feature rather than file type, improving maintainability and team collaboration.