Seu Primeiro Componente

Componentessão um dos conceitos centrais do React. Eles são a base sobre a qual você constrói interfaces de usuário (UI), o que os torna o lugar perfeito para começar sua jornada no React!

Componentes: Blocos de construção da UI

Na Web, o HTML nos permite criar documentos estruturados e ricos com seu conjunto integrado de tags como<h1> e <li>:

Esta marcação representa este artigo<article>, seu título<h1>e um sumário (abreviado) como uma lista ordenada<ol>. Marcações como esta, combinadas com CSS para estilo e JavaScript para interatividade, estão por trás de cada barra lateral, avatar, modal, menu suspenso — cada pedaço de UI que você vê na Web.

O React permite que você combine sua marcação, CSS e JavaScript em “componentes” personalizados,elementos de UI reutilizáveis para seu aplicativo.O código do sumário que você viu acima poderia ser transformado em um componente<TableOfContents />que você poderia renderizar em cada página. Nos bastidores, ele ainda usa as mesmas tags HTML como<article>,<h1>, etc.

Assim como com tags HTML, você pode compor, ordenar e aninhar componentes para projetar páginas inteiras. Por exemplo, a página de documentação que você está lendo é feita de componentes React:

À medida que seu projeto cresce, você notará que muitos de seus designs podem ser compostos reutilizando componentes que você já escreveu, acelerando seu desenvolvimento. Nosso sumário acima poderia ser adicionado a qualquer tela com<TableOfContents />! Você pode até mesmo dar um impulso ao seu projeto com os milhares de componentes compartilhados pela comunidade de código aberto do React, comoChakra UI e Material UI.

Definindo um componente

Tradicionalmente, ao criar páginas da web, os desenvolvedores marcavam seu conteúdo e depois adicionavam interatividade salpicando um pouco de JavaScript. Isso funcionava muito bem quando a interatividade era um diferencial na web. Agora, é esperado para muitos sites e todos os aplicativos. O React coloca a interatividade em primeiro lugar, enquanto ainda usa a mesma tecnologia:um componente React é uma função JavaScript que você podesalpicar com marcação.Veja como isso se parece (você pode editar o exemplo abaixo):

E aqui está como construir um componente:

Passo 1: Exporte o componente

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

Passo 2: Defina a função

Comfunction Profile() { }você define uma função JavaScript com o nomeProfile.

Passo 3: Adicione marcação

O componente retorna uma tag<img />com atributossrc e alt. <img />é escrito como HTML, mas na verdade é JavaScript nos bastidores! Esta sintaxe é chamada deJSXe permite que você incorpore marcação dentro do JavaScript.

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

Mas se sua marcação não estiver toda na mesma linha da palavra-chavereturn, você deve envolvê-la em um par de parênteses:

Usando um componente

Agora que você definiu seu componenteProfile, você pode aninhá-lo dentro de outros componentes. Por exemplo, você pode exportar um componenteGalleryque usa vários componentesProfile:

O que o navegador vê

Observe a diferença na capitalização:

• <section>está em minúsculas, então o React sabe que nos referimos a uma tag HTML.
• <Profile />começa com umPmaiúsculo, então o React sabe que queremos usar nosso componente chamadoProfile.

E Profilecontém ainda mais HTML:<img />. No final, é isso que o navegador vê:

Aninhando e organizando componentes

Componentes são funções JavaScript comuns, então você pode manter vários componentes no mesmo arquivo. Isso é conveniente quando os componentes são relativamente pequenos ou estão intimamente relacionados entre si. Se este arquivo ficar lotado, você sempre pode moverProfilepara um arquivo separado. Você aprenderá como fazer isso em breve napágina sobre importações.

Como os componentesProfilesão renderizados dentro deGallery—até várias vezes!—podemos dizer queGalleryé umcomponente pai,renderizando cadaProfilecomo um “filho”. Isso faz parte da mágica do React: você pode definir um componente uma vez e depois usá-lo em quantos lugares e quantas vezes quiser.

Recapitulação

Você acabou de ter seu primeiro gostinho de React! Vamos recapitular alguns pontos-chave.

• React permite que você crie componentes,elementos de UI reutilizáveis para seu aplicativo.
• Em um aplicativo React, cada parte da UI é um componente.
• Componentes React são funções JavaScript regulares, exceto:
  1. Seus nomes sempre começam com uma letra maiúscula.
  2. Eles retornam marcação JSX.