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).
-
Use PascalCase: All component names should be in PascalCase. For example,
UserProfile. -
Descriptive Names: Names should clearly indicate the component's purpose without needing to look into its implementation.
-
Reflect the Hierarchy: Component names should reflect their position within the application hierarchy if applicable.
-
Consistency: Apply the same naming rules across all components to keep the codebase consistent.
-
Specific Over Generic: Prefer specific names over generic ones to avoid ambiguity.
For a standalone component that lists products:
- Filename:
ProductList.jsx - Component Name:
ProductList
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
- Filename:
-
Child Component
- Filename:
ProductListItem.jsx - Component Name:
ProductListItem
- Filename:
In this structure:
ProductListis the parent container that holds multipleProductListItemcomponents.- Each
ProductListItemrepresents a single product, making it clear that this component is a child of theProductList.
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
- Filename:
-
Child Component of Dashboard for User Settings
- Filename:
DashboardUserSettings.jsx - Component Name:
DashboardUserSettings
- Filename:
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