What naming convention should component class names use in React?

What naming convention should component class names use in React?

• A. lowercase
• B. snake_case
• C. UpperCamelCase
• D. camelCase

Answer: (C)

In React, component names should use UpperCamelCase (also called PascalCase). This naming makes JSX recognize what you’re rendering as a custom component rather than a standard HTML element. When you write a tag like <MyComponent />, React treats MyComponent as a component to instantiate because it starts with an uppercase letter. If your component name started with a lowercase letter, such as <myComponent />, JSX would assume you’re referring to a built-in HTML tag, and the component wouldn’t render as intended. This convention applies to both class-based and function components, and it aligns with how you export and import them (for example, export default MyComponent; and then use <MyComponent /> in your JSX). Other styles like lowercase, camelCase, or snake_case aren’t consistent with JSX’s element-resolution rules and can lead to confusion, so UpperCamelCase is the standard choice.

In React, component names should use UpperCamelCase (also called PascalCase). This naming makes JSX recognize what you’re rendering as a custom component rather than a standard HTML element. When you write a tag like , React treats MyComponent as a component to instantiate because it starts with an uppercase letter. If your component name started with a lowercase letter, such as , JSX would assume you’re referring to a built-in HTML tag, and the component wouldn’t render as intended.

This convention applies to both class-based and function components, and it aligns with how you export and import them (for example, export default MyComponent; and then use in your JSX). Other styles like lowercase, camelCase, or snake_case aren’t consistent with JSX’s element-resolution rules and can lead to confusion, so UpperCamelCase is the standard choice.