React TypeScript Naming Conventions

Files & Folders

Category	Convention	Example
Components	PascalCase.tsx	UserProfile.tsx
Hooks	camelCase.ts with use prefix	useAuth.ts
Utilities/Helpers	camelCase.ts	formatDate.ts
Types/Interfaces	camelCase.types.ts	user.types.ts
Constants	camelCase.ts	apiEndpoints.ts
Services/API	camelCase.ts with suffix	authService.ts
Styles	ComponentName.module.css	Button.module.css
Tests	fileName.test.ts(x)	Button.test.tsx

Folder Structure

src/
├── components/
│   └── Button/
│       ├── Button.tsx
│       ├── Button.module.css
│       └── Button.test.tsx
├── hooks/
│   └── useAuth.ts
├── utils/
│   └── formatDate.ts
├── types/
│   └── user.types.ts
├── services/
│   └── authService.ts
├── constants/
│   └── apiEndpoints.ts
├── pages/
│   └── Home.tsx
└── App.tsx

Code Naming Conventions

Element	Convention	Example
Variables	camelCase	const userName = "John"
Functions	camelCase	function fetchData() {}
Components	PascalCase	function Button() {}
Types	PascalCase	type ButtonProps = {}
Interfaces	PascalCase	interface User {}
Constants	UPPER_SNAKE_CASE	const API_BASE_URL = "..."
Enums	PascalCase + UPPER_CASE values	enum UserRole { ADMIN = 'ADMIN' }

Quick Summary

✅ The Rule:

• Components: PascalCase.tsx
• Everything else: camelCase.ts
• Constants inside code: UPPER_SNAKE_CASE
• Component code: PascalCase