1

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?

2
  • o padrão utlizado pelo React é Pascal Case como mencionado, mas, não é uma obrigação é um forma de criar componentes para diferencia de outros código e a manutenção ser mais fácil.
    – novic
    Commented 10/08/2020 às 22:53
  • 1
    Se não é obrigação, por que não funciona quando utilizo camel case?
    – yoyo
    Commented 11/08/2020 às 17:26

1 Resposta 1

6

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.

2
  • 2
    Realmente, nunca tinha parado pra pensar nisso — sem a convenção de nomenclatura seria bem mais difícil para o React diferenciar. Teria que ter uma lista com os elementos HTML válidos... Ou alguma outra forma de se resolver. Boa resposta. :-) Commented 5/12/2020 às 21:52
  • 2
    Levando em consideração que é possível trabalhar com Web Components no React, me parece que se não tivessem adotado essa convenção, se tornaria algo realmente mais complexo. Que bom que isso foi resolvido de forma simples :) Commented 5/12/2020 às 21:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .