React File Naming Conventions

README.md

📁 File Naming Conventions

Components → PascalCase

components/
├── Button.jsx
├── UserProfile.jsx
├── DataTable.jsx
└── ProcurementStatusDetail/
    ├── index.js
    ├── InfoSection.jsx
    ├── TindakLanjutSection.jsx
    └── DocumentHistory.jsx

Why? Matches the component name exactly, makes it obvious it's a component.

Pages/Routes → PascalCase (same as components)

pages/
├── Home.jsx
├── Login.jsx
├── Dashboard.jsx
└── procurement/
    ├── ProcurementList.jsx
    └── ProcurementDetail.jsx

Why? Pages are just components, so follow the same convention.

Hooks → camelCase

hooks/
├── useAuth.js
├── useProcurementDetail.js
├── useDebounce.js
└── useLocalStorage.js

Why? Hooks are functions, and JS functions use camelCase.

Utilities/Helpers → camelCase

utils/
├── formatDate.js
├── validation.js
├── apiHelpers.js
└── stringHelpers.js

Why? These export functions, which use camelCase.

Constants → camelCase or SCREAMING_SNAKE_CASE for file

constants/
├── apiEndpoints.js
├── routes.js
├── appConfig.js
└── errorMessages.js

// Inside the file:
export const API_BASE_URL = 'https://api.example.com';
export const MAX_RETRY_ATTEMPTS = 3;

Why? File is camelCase, exported constants are SCREAMING_SNAKE_CASE.

Context → PascalCase

context/
├── AuthContext.jsx
├── ThemeContext.jsx
└── UserContext.jsx

Types/Interfaces (TypeScript) → camelCase or PascalCase

types/
├── user.ts          // exports User, UserProfile types
├── procurement.ts   // exports Procurement, ProcurementItem
└── api.ts

Styles → Match component name or camelCase

styles/
├── Button.module.css        // CSS Modules → PascalCase
├── UserProfile.module.scss
├── global.css               // Global styles → camelCase
└── variables.scss

API/Services → camelCase

api/
├── authApi.js
├── procurementApi.js
└── userService.js

services/
├── analyticsService.js
└── notificationService.js

Config Files → camelCase or kebab-case

config/
├── webpack.config.js
├── jest.config.js
├── apiConfig.js
└── app-config.js

---

🎯 Quick Reference Table

Type	Convention	Example
Components	PascalCase	UserProfile.jsx
Pages	PascalCase	Dashboard.jsx
Hooks	camelCase	useAuth.js
Utils	camelCase	formatDate.js
Constants	camelCase	apiEndpoints.js
Context	PascalCase	AuthContext.jsx
Services/API	camelCase	userService.js
Styles	Match component	Button.module.css
Types	camelCase	user.ts

---

🚫 Avoid These

❌ user-profile.jsx       (kebab-case components)
❌ User_Profile.jsx       (snake_case components)
❌ UseAuth.js             (PascalCase hooks)
❌ format-date.js         (kebab-case utils)
❌ API_ENDPOINTS.js       (SCREAMING_SNAKE_CASE files)

---

📝 Special Cases

Index Files

components/
└── Button/
    ├── index.js          ✅ Always lowercase
    ├── Button.jsx
    └── Button.test.js

Test Files

✅ Button.test.jsx
✅ Button.spec.jsx
✅ useAuth.test.js

Stories (Storybook)

✅ Button.stories.jsx
✅ UserProfile.stories.jsx

---

🏆 Industry Standards

Most popular React projects follow these conventions:

• Create React App → PascalCase components
• Next.js → PascalCase pages/components
• Airbnb Style Guide → PascalCase components
• React Official Docs → PascalCase components

---

💡 Pro Tips

1. Be consistent - Pick one convention per category and stick to it
2. Match exports - UserProfile.jsx should export UserProfile
3. Folder names - Usually kebab-case or camelCase: user-profile/ or userProfile/
4. One component per file - Makes naming straightforward
5. Use ESLint - Enforce conventions automatically

The key is consistency across your team/project! 🎯