JS - React Naming Conventions

Final Project Structure

src/
│
├── components/
│   └── UserProfile/
│       ├── UserProfile.tsx
│       ├── userProfile.module.css
│       └── UserProfile.test.tsx
│
├── hooks/
│   └── useAuth.ts
│
├── utils/
│   └── formatDate.ts
│
├── constants/
│   └── api.ts
│
├── contexts/
│   └── AuthContext.tsx

File Structure

Type	Convention	Example
Component directory	PascalCase	UserProfile/
Component file	PascalCase.tsx/js	UserProfile.tsx
Style file per component	camelCase.module.css	userProfile.module.css
Utility files	camelCase.ts/js	formatDate.ts
Hook files	use + camelCase.ts	useAuth.ts
Context files	PascalCase.tsx	AuthContext.tsx
Constants	SCREAMING_SNAKE_CASE.ts	API_BASE_URL
Test files	Match component + .test.tsx	UserProfile.test.tsx

Component Names

Element	Convention	Example
Component Name	PascalCase	UserCard
Props Interface	PascalCaseProps	UserCardProps
Layout/Wrapper	PascalCase	MainLayout

Test Naming (Jest, RTL)

Type	Convention	Example
Describe Block	Component/Feature	describe('UserProfile', ...)
Test Case	Sentence-style	it('displays user info', ...)