TransWikia.com

Por que React não aceita camelCase para nomear componentes?

Stack Overflow em Português Asked on January 31, 2021

Estava preparando uma componente cuja única função era exportar uma tag <p> contendo um texto. Naturalmente criei uma função que exportava o texto:

import React from  'react';

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

Em seguida eu chamava a função como uma tag dentro de um componente responsável por toda a seção sobre do site, que por sua vez era renderizado no 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>
    </>
)

Entretanto, ao salvar as alterações e verificar o comportamento da aplicação dentro do navegador, reparei que nada havia mudado. Depois de verificar a sintaxe, a relação entre os componentes e o terminal em busca de erros de execução, não encontrei nada. Resolvi mudar o nome da função para Lero ao invés do antigo textoSobre. Então, simplesmente substitui todos os textoSobre por Lero e funcionou perfeitamente.
Por que isso acontece?

jsxreact

2 Answers

Está escrito na documentação que o nome dos componentes devem iniciar com letra maiúscula, então isso não deveria ser uma surpresa. Resumidamente, é para diferenciar o seu componente de um elemento HTML para que o React possa criá-lo de maneira adequada.

Segue citação da documentação com a explicação:

Nota: Sempre inicie os nomes dos componentes com uma letra maiúscula.

O React trata componentes começando com letras minúsculas como tags do DOM. Por exemplo, <div /> representa uma tag div do HTML, mas <Welcome /> representa um componente e requer que Welcome esteja no escopo.

Você pode ler mais sobre o raciocínio por trás dessa convenção aqui.

E o link mencionado acima contém:

Componentes Definidos pelo Usuário Precisam Começar com Letras Maiúsculas

Quando um tipo elemento começar com uma letra minúscula, ele se refere a um componente interno <div> ou <span> e resulta na string 'div' ou 'span' passada para React.createElement. Tipos que começam com letra maiúscula como <Foo /> são compilados para React.createElement(Foo) e correspondem a um componente definido ou importado no seu arquivo JavaScript.

Nós recomendamos nomear componentes com letras maiúsculas. Se você realmente tiver um componente que comece com letra minúscula, guarde-o em uma variável que comece com letra maiúscula antes de usá-lo no JSX.

Answered by Rafael Tavares on January 31, 2021

React não aceita camel case porque é uma convenção que as tags tenham Pascal case.

Answered by Marcelo Shiniti Uchimura on January 31, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP