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?
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.