Seu Primeiro Componente

Componentes: O Alicerce da UI

Na Web, o HTML nos permite criar documentos estruturados e ricos em conteúdo com seu conjunto de tags nativas, como <h1> e <li>:

<article>
  <h1>Meu Primeiro Componente</h1>
  <ol>
    <li>Componentes: O Alicerce da UI</li>
    <li>Definindo um Componente</li>
    <li>Usando um Componente</li>
  </ol>
</article>

Este trecho de HTML representa um artigo <article>, seu título <h1>, e um índice de conteúdo (abreviado) apresentado como uma lista ordenada <ol>. Este conjunto de tags, combinado com CSS para estilização e JavaScript para a interatividade, é responsável por cada elemento de UI que você vê na Web — seja uma barra lateral, avatar, modal ou dropdown.

O React permite que você combine tags HTML, CSS e JavaScript em “componentes” personalizados, elementos de UI reutilizáveis para a sua aplicação. O código do índice de conteúdo que você viu acima pode ser transformado em um componente <TableOfContents /> que você pode renderizar em cada página. Por trás do código, ele ainda usa as mesmas tags HTML como <article>, <h1>, etc.

Assim como nas tags HTML, você pode compor, ordenar e colocá-lo dentro de outros componentes para criar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Documentação</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos através da reutilização de componentes que você já escreveu, acelerando seu desenvolvimento. Nosso índice de conteúdo acima poderia ser usado em qualquer tela usando o componente <TableOfContents />! Você pode até mesmo iniciar seu projeto com os milhares de componentes compartilhados pela comunidade de código aberto do React, como Chakra UI e Material UI.

Definindo um componente

Tradicionalmente, na criação de páginas web, os desenvolvedores web estruturavam o conteúdo utilizando HTML e, em seguida, adicionavam interações acrescentando um pouco de JavaScript. Isso funcionava muito bem quando a interação não era algo essencial na web. Atualmente, espera-se que muitos sites e aplicações sejam interativos. O React coloca a interatividade em primeiro lugar enquanto ainda usa a mesma tecnologia: um componente React é uma função JavaScript que permite você adicionar tags HTML. Confira o exemplo abaixo (você pode editar o exemplo abaixo):

Agora vamos aprender como construir um componente:

Passo 1: Exportar o componente

O prefixo export default é uma sintaxe padrão do JavaScript (não específica do React). Ele permite que você marque a função principal em um arquivo para que você possa mais tarde importá-la de outros arquivos. (Mais sobre importação em Importando e Exportando Componentes!

Passo 2: Definir a função

Com a sintaxe function Profile() { } você está definindo uma função JavaScript chamada Profile.

Passo 3: Adicionar HTML

O componente retorna uma tag <img /> com os atributos src e alt. O <img /> é escrito como HTML, mas na verdade, é o JavaScript que está por trás! Essa sintaxe é chamada JSX e permite usar tags HTML dentro do JavaScript.

As instruções de retorno podem ser escritas todas em uma linha, como neste componente:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Mas se seu HTML não estiver na mesma linha que a declaração return, você deve colocá-la entre parênteses:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Usando um componente

Agora que você definiu seu componente Profile, você pode colocá-lo dentro de outros componentes. Por exemplo, você pode exportar um componente Gallery que usa várias vezes o componente Profile:

O que o navegador vê

Observe a diferença entre caixa alta e caixa baixa no nome dos componentes:

• <section> é minúscula, então o React sabe que nos referimos a uma tag HTML.
• <Profile /> começa com a letra P maiúsculo, então o React sabe que queremos usar nosso componente chamado Profile.

E o componente Profile contém ainda mais HTML, como a tag <img />. No final, é isso que o navegador vê:

<section>
  <h1>Cientistas incríveis</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Agrupando e organizando componentes

Os componentes são funções comuns do JavaScript, portanto, você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou relacionados entre si. Caso o arquivo comece a ficar muito extenso, você pode sempre mover Profile para um arquivo separado. Você aprenderá como fazer isso em breve na página sobre importações.

Como os componentes Profile são renderizados dentro da Gallery—mesmo várias vezes—, podemos dizer que Gallery é um componente pai, tornando cada Profile como um componente “filho”. Essa é parte da magia do React: você pode definir um componente uma vez e usá-lo em quantos lugares e quantas vezes quiser.

export default function Gallery() {
  // 🔴 Nunca defina um componente dentro de outro componente!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare componentes no nível superior
function Profile() {
  // ...
}