Componentes

Suponha que uma página precisa do mesmo cartão de saudação em três lugares, cada um com o mesmo cabeçalho e layout. Você copia a marcação três vezes e agora tem três lugares para atualizar toda vez que o design muda. A resposta do React é escrever esse pedaço de interface uma 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 o React chama a função para descobrir o que colocar na tela.

Aqui está o menor deles:

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 imprime seu próprio <h1>Olá</h1>. Isso é composição: você constrói componentes pequenos e os combina em componentes maiores, até chegar a um app completo.

Algumas regras acompanham isso. Nomes de componentes começam com letra maiúscula. Greeting e App funcionam como tags porque o React consegue distingui-los de elementos HTML comuns como div ou h1, que começam em minúscula. Um componente que retorna JSX também precisa retornar um único elemento raiz, da mesma forma que App envolve suas duas tags Greeting em um único div envolvente. Isso pega quase todo mundo na primeira vez: retornar dois elementos irmãos sem envolvê-los e o React lança um erro. Se você precisa retornar irmãos sem envolvê-los em um div extra, use um fragmento:

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

<> e </> são um fragmento. 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 costumava 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 manual usa componentes de função em todo lugar, que é a forma padrão atual de escrever React. Veja History and versions para entender como o React saiu 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 lugar para cálculo e mantenha efeitos colaterais fora dele. Dado os mesmos props, um componente deve retornar o mesmo JSX toda vez. Não busque dados, defina um timer ou mute variáveis fora da função diretamente no corpo. Essas coisas pertencem a um hook como useEffect (coberto depois, em Effects), que executa código após a renderização estar pronta em vez de durante ela. Ler o DOM, escrever para uma variável declarada fora do componente ou depender de um valor que muda entre chamadas quebram tudo isso e levam a bugs difíceis de rastrear, porque o 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 inteira cabe em uma frase: um componente é uma função, e chamá-lo com uma tag como <Greeting /> executa essa função e mostra o que ela retorna. Uma vez que 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 no React. Mantenha-os pequenos, nomeie-os com letra maiúscula e retorne uma única raiz, usando um fragmento quando você precisa agrupar irmãos sem um elemento wrapper extra.

Composição, componentes pequenos 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 de saída, sem efeitos colaterais no corpo. Essa restrição é o que permite ao React chamar seus componentes livremente, processar renderizações em lote e reordenar 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 dessas declarações return.