Why Do React Components Need to Start with Capital Letters?

It is likely that you have noticed that component names in React always begin with a capital letter. However, why is that the case?

In JSX, React components are written in a way that gets transformed into plain JavaScript using the React.createElement API, courtesy of Babel. Here's where capitalization plays a key role:

• JSX and Babel: JSX (JavaScript XML) is a syntax extension that allows you to write HTML-like code inside JavaScript. However, before this code can be executed, Babel transforms it into JavaScript that browsers can understand. This is where capitalization becomes crucial.
• Capitalized Names as Components: When Babel encounters a name starting with a capital letter, it interprets it as a custom React component. It then converts this into a React Fiber object, which is an essential part of React's internal rendering system. Essentially, capital letters tell React, "Hey, this is a component!"
• Lowercase for HTML Elements: On the other hand, names that begin with lowercase letters, like <div> or <span>, are interpreted as standard HTML elements. So, if you name your component with a lowercase letter, React will mistakenly treat it as a regular HTML element rather than a custom one.

Why Does This Matter?

If you don’t follow this convention, you could run into bugs or unexpected behavior. For example, naming a component <buttonComponent> instead of <ButtonComponent> might cause React to throw errors or render the component incorrectly. Always capitalize your component names to ensure React recognizes and processes them the way you intend!         

Thanks for reading!