component_naming_best_practice.md

React Component Naming Conventions

Effective naming of components is important for the readability and maintainability of your code. Below are best practices for naming React components, with a focus on hierarchical relationships (parent and child components).

Best Practices

1. Use PascalCase: All component names should be in PascalCase. For example, UserProfile.

2. Descriptive Names: Names should clearly indicate the component's purpose without needing to look into its implementation.

3. Reflect the Hierarchy: Component names should reflect their position within the application hierarchy if applicable.

4. Consistency: Apply the same naming rules across all components to keep the codebase consistent.

5. Specific Over Generic: Prefer specific names over generic ones to avoid ambiguity.

Examples

Single Component

For a standalone component that lists products:

• Filename: ProductList.jsx
• Component Name: ProductList

Parent and Child Components

When components have a clear hierarchical relationship, name the child component to reflect its dependency on the parent.

• Parent Component

  • Filename: ProductList.jsx
  • Component Name: ProductList

• Child Component

  • Filename: ProductListItem.jsx
  • Component Name: ProductListItem

Explanation

In this structure:

• ProductList is the parent container that holds multiple ProductListItem components.
• Each ProductListItem represents a single product, making it clear that this component is a child of the ProductList.

Naming with Context

When components serve specific functions within a parent, their names should reflect their roles.

• Search Component within a Dashboard

  • Filename: DashboardSearch.jsx
  • Component Name: DashboardSearch

• Child Component of Dashboard for User Settings

  • Filename: DashboardUserSettings.jsx
  • Component Name: DashboardUserSettings

Usage

Use descriptive, contextual names to enhance readability and maintainability:

// In Dashboard.jsx
import DashboardSearch from './DashboardSearch';
import DashboardUserSettings from './DashboardUserSettings';

function Dashboard() {
  return (
    <div>
      <DashboardSearch />
      <DashboardUserSettings />
    </div>
  );
}

Basic Components

• Button: PrimaryButton, SecondaryButton
• Input: TextInput, NumberInput
• Modal: ConfirmationModal, UserProfileModal

List and Items

• Parent List Component: UserList
• Child Item Component: UserListItem
• Specific List: ProductList, OrderList

Form Components

• Forms: LoginForm, RegistrationForm
• Specific Input: EmailInput, PasswordInput
• Form Buttons: SubmitButton, CancelButton

Layout Components

• Navigation: TopNavBar, SideMenu
• Footer: FooterLinks, CopyrightFooter
• Layout Wrapper: PageLayout, SectionLayout

Dashboard Components

• Main Dashboard: AdminDashboard, UserDashboard
• Dashboard Widgets: TrafficWidget, SalesChart
• Control Panels: SettingsPanel, ProfilePanel

Application-Specific Components

• For a Blog: PostEditor, CommentSection
• For an E-commerce Site: ProductCard, CheckoutStep
• For a Social Media App: FriendList, NewsFeed, PostCreator