How React Differentiates Components From Regular HTML Tags

React Components names first letter should be capital or they won't work.

React Components are typically capitalized (e.g., MyComponent).
This capital letter signals React that it should treat the element as a Component, not as a regular HTML element.
React Component's name must start with capital letter to distinguish it from HTML element.

Regular HTML tags are written in lowercase letter.
React knows that if element's name is in lowercase, it corresponds to the HTML element.

//component
// Notice that component's first letter is capital
export default function MyComponent() {
    return(
        <h1>This is My Component</h1>
    )
}

import MyComponent from './MyComponent'

export default function App() {
    return(
        <div>
            <MyComponent />
        <div>
    ) 
}

• starts with capital letter M, so React knows that we want to use our component called MyComponent.

• h1 is in lowercase, so React knows we refer to a HTML tag.