React app directory structure

Created: 7/31/2025 17:24
Updated: 7/31/2025 17:27
Exported: 8/14/2025 11:15
Link: https://chatgpt.com/c/688b98b8-7b14-8001-b86d-be52a4109c77

Prompt:

What is the standard directory structure for a react app

Response:

A standard directory structure for a React app typically follows conventions that promote scalability, maintainability, and organization. Here's a commonly used layout, especially for medium to large projects:

📁 Basic Structure

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   │   └── images/, fonts/, etc.
│   ├── components/
│   │   └── reusable UI components (e.g., Button, Modal)
│   ├── features/ or pages/
│   │   └── domain-specific logic (e.g., Auth/, Dashboard/)
│   ├── hooks/
│   │   └── custom React hooks (e.g., useAuth, useForm)
│   ├── context/ or store/
│   │   └── React Context or Redux setup
│   ├── services/ or api/
│   │   └── API request logic (e.g., axios instances, endpoints)
│   ├── utils/
│   │   └── utility functions (e.g., formatDate, debounce)
│   ├── App.jsx or App.tsx
│   ├── index.jsx or index.tsx
│   └── styles/
│       └── global styles (CSS, SCSS, Tailwind config, etc.)
├── .env
├── package.json
└── README.md

---

📁 Description of Key Folders

Folder	Purpose
public/	Static files served as-is. Contains index.html.
src/	Main source code of your app.
components/	Shared/reusable UI components (not tied to a specific feature).
features/ or pages/	Feature-based structure, ideal for route-level code separation.
hooks/	Reusable logic using React hooks.
context/ or store/	App-wide state management using Context API or Redux/MobX.
services/ or api/	API abstraction layer.
utils/	Utility functions and helpers.
styles/	Global or shared styling.

---

🧠 Optional Enhancements

• tests/ – Separate test directory or colocated __tests__ folders.
• types/ – Central place for TypeScript type definitions.
• config/ – For app-wide configuration (e.g., constants, env management).
• i18n/ – For internationalization files (translations, etc.).

---

Would you like a template starter project using this structure?

Prompt:

what is the syntax for an absolute path reference

Response:

In a React app, the syntax for an absolute path reference depends on how your project is configured. By default, React uses relative imports, but you can configure absolute imports for cleaner and more maintainable code.

---

✅ Default (Relative Import Example)

import Button from '../../components/Button';

This works out-of-the-box but can get messy with deep folder structures.

---

✅ Absolute Import (Recommended Setup)

To enable absolute imports (e.g., import Button from 'components/Button'), follow these steps:

---

🔧 Option 1: For Vite or Webpack (with jsconfig/tsconfig)

1. Add a jsconfig.json (for JavaScript) or tsconfig.json (for TypeScript) at the root:

// jsconfig.json or tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

This tells your IDE and build tools that src/ is the root for imports.

2. Now you can do:

import Button from 'components/Button';
import { useAuth } from 'hooks/useAuth';
import logo from 'assets/images/logo.png';

---

✅ Absolute Path Syntax Summary

Once configured:

import Something from 'folder/Subfolder/File'; // path relative to src/

Without configuration (default):

import Something from '../../folder/Subfolder/File'; // relative path

---

Would you like me to generate a working jsconfig.json or tsconfig.json file for your project?

---

Powered by ChatGPT Exporter