🧾 Naming Conventions in React

Consistent naming improves readability, maintainability, and scalability. Below are standard naming practices followed in professional React projects.

📁 Folder & File Naming

• Folder Names: lowercase and kebab-case → components/, blog-posts/
• Component Files: PascalCase → Navbar.jsx, BlogCard.jsx
• Hooks: camelCase with use prefix → useAuth.js
• Stylesheets: Match component → Button.module.css
• Tests: Match the component → Navbar.test.js

🔤 Component Naming

• Use PascalCase for all components → BlogCard, LoginForm
• Always start functional components with an uppercase letter

⚙️ Variable & Function Naming

• camelCase for variables and functions → isLoggedIn, fetchUserData()
• UPPER_CASE for constants → API_URL

🧠 State & Props Naming

• Name state clearly → isLoading, currentUser, postList
• Props should be descriptive → onSubmit, isOpen, userData
• Use handle prefix for event handlers → handleClick(), handleLogin()

📌 CSS Naming (if not using Tailwind)

• Use BEM or kebab-case → card-title, form-input--error
• For CSS Modules, match the component → Button.module.css

✅ Tips

• Be consistent across your app
• Use clear, meaningful names over short ones
• Avoid abbreviations unless common (e.g., API, URL)
• Prefix custom hooks with use and context files with use or ThemeContext