Why doesn’t React accept camelCase to name components?

Asked

Viewed 201 times

1

I was preparing a component whose only function was to export a tag <p> containing a text. I naturally created a function that exported the text:

import React from  'react';

function textoSobre() {
    return (
        <p>
            Insira aqui o texto da aba SOBRE NÓS
        </p>
    )
}
    
export default textoSobre

Next I called the function as a tag within a component responsible for the whole section sobre of the site, which in turn was rendered on App.jsx

import React from 'react';
import './Sobre.css';
import textoSobre from './texto/textoSobre.jsx'

export default props => (
    <>
        <header className="Sobre">
            <h1>Sobre Nós</h1>
        </header>
        <body>
            <textoSobre></textoSobre>  {/* aqui chamo a função criada, como uma tag */}
        </body>
    </>
)

However, when saving the changes and checking the behavior of the application within the browser, I noticed that nothing had changed. After checking the syntax, the relation between the components and the terminal in search of execution errors, I found nothing. I decided to rename the function to Lero instead of the old textoSobre. So, it just replaces all the textoSobre for Lero and it worked perfectly. Why does this happen?

react jsx

  • the standard used by React is Pascal Case as mentioned, but, is not a must is a way to create components to differentiate from other code and maintenance be easier.

  • 1

    If it’s not mandatory, why doesn’t it work when I use Camel case?

1 answer

6

Is written in the documentation that the name of the components should start with a capital letter, so this shouldn’t come as a surprise. Briefly, it is to differentiate your component from an HTML element so that React can create it properly.

The following is a quote from the documentation with the explanation:

Note: Always start the component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents a tag div of HTML, but <Welcome /> represents a component and requires that Welcome is in scope.

You can read more about the reasoning behind this convention here.

And the link mentioned above contains:

User-Defined Components Need to Start with Uppercase Letters

When an element type starts with a lowercase letter, it refers to an internal component <div> or <span> and results in the string 'div' or 'span' passed over to React.createElement. Types starting with uppercase letter like <Foo /> are compiled to React.createElement(Foo) and correspond to a defined or imported component in your Javascript file.

We recommend naming components with uppercase letters. If you actually have a component that starts with lower case letter, store it in a variable that starts with upper case letter before using it in JSX.

  • 2

    Actually, I never stopped to think about it - without the naming convention it would be much harder for React to differentiate. You would have to have a list of valid HTML elements... or some other way to resolve it. Good answer. :-)

  • 2

    Taking into account that can work with Web Components in React, it seems to me that if they had not adopted this convention, it would become something really more complex. I’m glad that this was solved in a simple way :)

Browser other questions tagged react jsx

You are not signed in. Login or sign up in order to post.