Which naming style is recommended for class names in React components?

Which naming style is recommended for class names in React components?

• A. UpperCamelCase
• B. kebab-case
• C. lowercase
• D. snake_case

Answer: (A)

Component names in React are written in UpperCamelCase (PascalCase) because JSX uses the first letter to decide how to treat a tag. When a name starts with a capital letter, React knows you’re referring to a custom component and will render it accordingly; if it starts with a lowercase letter, JSX treats it as a built-in HTML element. Using UpperCamelCase makes the intent clear, improves readability, and aligns with common tooling and project conventions. It also helps with imports, error messages, and consistency across your codebase. For styling, remember that CSS class names are separate and typically follow their own conventions (often kebab-case) and are applied via the className attribute, which is unrelated to how you name components.

Component names in React are written in UpperCamelCase (PascalCase) because JSX uses the first letter to decide how to treat a tag. When a name starts with a capital letter, React knows you’re referring to a custom component and will render it accordingly; if it starts with a lowercase letter, JSX treats it as a built-in HTML element. Using UpperCamelCase makes the intent clear, improves readability, and aligns with common tooling and project conventions. It also helps with imports, error messages, and consistency across your codebase. For styling, remember that CSS class names are separate and typically follow their own conventions (often kebab-case) and are applied via the className attribute, which is unrelated to how you name components.