# 39) React Folder Structure

1.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Basic React Folder Structure</mark>**  
    When you create an app using tools like Create React App or Vite
    
    ```html
    my-app/
    ├── public/
    ├── src/
    │   ├── App.js
    │   ├── index.js
    │   └── App.css
    ├── package.json
    ```
    
    Key Folders -  
    public/ → Static files (HTML, favicon, images)  
    src/ → Main application code
    
2.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Intermediate Structure</mark>**  
    As your app grows, you organize by **type of file**
    
    ```html
    src/
    ├── components/
    ├── pages/
    ├── hooks/
    ├── services/
    ├── context/
    ├── utils/
    ├── assets/
    ├── styles/
    ├── App.js
    ├── index.js
    ```
    
3.  **<mark class="bg-yellow-200 dark:bg-yellow-500/30">Advanced Structure</mark>**  
    For large-scale apps, structure by **feature (domain-based architecture)**
    
    ```html
    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.