In React, component names must start with a capital letter because of how JSX distinguishes between HTML elements and React components.

• Lowercase names like <div>, <span>, or <section> are treated as built-in HTML elements.
• Capitalized names like <MyComponent> or <UserProfile> are treated as custom React components.

This distinction is important because React uses the case to decide whether to render a standard HTML tag or to look up a user-defined component.
If you mistakenly name a component with a lowercase first letter (like <myComponent>), React will try to find a native HTML element called <myComponent> — and since that doesn't exist, it will likely result in a bug or unexpected behavior.

Example:

function mycomponent() {
  return <h1>Hello!</h1>;
}

// Wrong usage - React treats <mycomponent /> as a regular HTML tag, not a component
<mycomponent />

// Corrected
function MyComponent() {
  return <h1>Hello!</h1>;
}

// Right usage
<MyComponent />

In short:
👉 Always start React component names with an uppercase letter to ensure React recognizes and renders them properly.

---