Naming rules

Learn that component names start with a capital letter and why it matters.

Naming rules

In React, component names use PascalCase: UserCard, ShoppingCart, LoginForm. This separates them from HTML tags.

HTML tags start lowercase: div, span, button. If a component name starts lowercase, React treats it as an HTML tag and it won't work.

Component names should also describe what they do: UserList is clear, Comp1 is vague. Good names make maintenance easier.

Naming meaning

A component name should describe what it does. Header is a clear top bar; Thing says nothing. Teams often follow the what + for what rule: UserAvatar, CartItem, SearchInput.

The file name should match the component name: a UserAvatar.jsx file holds the UserAvatar component. This makes searching easy.

Consistent naming speeds up team talk: when someone hears a name, everyone pictures the same thing.

Exercise UserAvatar component

Complete the skeleton. Write a component called UserAvatar that returns <figure> with <img alt="Avatar" /> inside. Don't forget to export.

Show example solution

function UserAvatar() {
  return <figure><img alt="Avatar" /></figure>;
}

export default UserAvatar;

Test yourself

Which is a valid component name?
- userCard
- user_card
- UserCard
- user-card
Show answer

UserCard — UserCard is PascalCase, so it's a valid component name.

PascalCase example

Valid component name: ____ (PascalCase).

Show answer

Valid component name: ProductCard (PascalCase).

Match the naming tips

UserCard

Meaningful name
userCard

Wrong
UserCard.jsx

File name
User-Card

Invalid

Next lesson: Summary - Components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies