Componentes

Imagine uma página que precisa do mesmo cartão de boas-vindas em três lugares diferentes, cada um com o mesmo cabeçalho e layout. Se você copiar a marcação três vezes, terá três locais para atualizar cada vez que o design mudar. A solução do React é escrever aquele pedaço de interface uma única vez e reutilizá-lo como um componente: uma função JavaScript que retorna JSX, uma descrição de um pedaço de interface. Você o usa escrevendo-o como uma tag HTML, e React chama a função para descobrir o que mostrar na tela.

Aqui está o menor exemplo possível:

function Greeting() {
  return <h1>Olá</h1>
}

Greeting é uma função que retorna <h1>Olá</h1>. Para realmente mostrá-la, você a renderiza dentro de outro componente, usando-a como uma tag:

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  )
}

App também é um componente. Ele renderiza dois componentes Greeting dentro de uma div, e cada um mostra seu próprio <h1>Olá</h1>. Isso é composição: você constrói componentes pequenos e os combina em componentes maiores, até chegar ao app completo.

Algumas regras acompanham isso. Nomes de componentes começam com letra maiúscula. Greeting e App funcionam como tags porque React consegue diferenciá-los de elementos HTML normais como div ou h1, que começam com minúscula. Um componente que retorna JSX também precisa retornar um único elemento raiz, do jeito que App envolve seus dois componentes Greeting em uma div envolvente. Isso pega quase todo mundo na primeira vez: se você tentar retornar dois elementos irmãos sem envolvê-los em uma div, React vai lançar um erro. Se você precisa retornar elementos irmãos sem envolvê-los em uma div extra, use um fragment:

function Greeting() {
  return (
    <>
      <h1>Olá</h1>
      <p>Bem-vindo de volta</p>
    </>
  )
}

<> e </> formam um fragment. Ele agrupa o h1 e o p em um único valor de retorno sem adicionar um elemento à página.

Nota sobre versão

Código React mais antigo costuma definir componentes como classes em vez de funções:

class Greeting extends React.Component {
  render() {
    return <h1>Olá</h1>
  }
}

Você ainda verá componentes de classe assim em bases de código existentes. Este guia usa componentes de função em todo lugar, que é o jeito padrão atual de escrever React. Veja History and versions para entender como React evoluiu de um estilo para o outro.

Componentes são chamados durante a renderização, então trate o corpo da função puramente como um local para cálculos e mantenha efeitos colaterais fora dele. Dado os mesmos props, um componente deve retornar o mesmo JSX toda vez. Não busque dados, configure um timer ou modifique variáveis fora da função diretamente no corpo. Essas coisas pertencem a um hook como useEffect (abordado depois, em Effects), que executa código após a renderização estar concluída e não durante ela. Ler a DOM, escrever em uma variável declarada fora do componente ou depender de um valor que muda entre chamadas quebram isso e levam a bugs difíceis de rastrear, porque React pode chamar seu componente mais de uma vez por renderização por razões fora do seu controle.

JunoUm componente é uma função A ideia toda cabe em uma frase: um componente é uma função, e chamá-la com uma tag como <Greeting /> executa essa função e mostra o que ela retorna. Quando isso faz sentido, o resto do React é aprender o que você pode colocar dentro dessas funções.

JunoUm componente é uma função Componentes são a unidade com a qual você constrói em React. Mantenha-os pequenos, nomeie-os com letra maiúscula e retorne um único elemento raiz, usando um fragment quando precisar agrupar elementos irmãos sem um elemento wrapper extra. Composição, pequenos componentes combinados em componentes maiores, é como toda tela real é construída.

JunoUm componente é uma função Um componente é uma função pura de seus props: mesma entrada, mesmo JSX na saída, sem efeitos colaterais no corpo. Essa restrição permite que React chame seus componentes livremente, agrupe renderizações e reordene trabalho sem quebrar nada. Efeitos colaterais têm seu próprio hook por uma razão.

Próximo: JSX, a sintaxe que você viu dentro desses statements return.