Seu Primeiro Componente
Os Componentes são um dos conceitos centrais do React. Eles são a base das interfaces de usuário (UI), o que os torna o lugar perfeito para começar sua jornada com React!
Você aprenderá
- O que é um componente
- Que papel desempenham os componentes em uma aplicação React
- Como escrever o seu primeiro componente React
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):
export default function Profile() { return ( <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" /> ) }
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
:
function Profile() { return ( <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>Cientistas incríveis</h1> <Profile /> <Profile /> <Profile /> </section> ); }
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 letraP
maiúsculo, então o React sabe que queremos usar nosso componente chamadoProfile
.
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.
Deep Dive
Sua aplicação React começa em um componente “raiz”. Normalmente, ele é criado automaticamente quando você inicia um novo projeto. Por exemplo, se você usar CodeSandbox ou você usar o framework Next.js, o componente raiz é definido em pages/index.js
. Nesses exemplos, você exportou componentes raiz.
A maioria das aplicações React usa componentes em todos os níveis. Isso significa que você não usará componentes apenas para partes reutilizáveis, como botões, mas também para partes maiores, como barras laterais, listas e até em páginas inteiras! Os componentes são uma maneira prática de organizar o código e o HTML da UI, mesmo que alguns deles sejam usados apenas uma vez.
Os Frameworks React levam isso um passo adiante. Em vez de usar um arquivo HTML vazio e deixar o React “assumir” o gerenciamento da página com JavaScript, eles também geram o HTML automaticamente a partir de seus componentes React. Isso permite que seu aplicativo mostre algum conteúdo antes que o código JavaScript seja carregado.
Ainda assim, muitos sites usam o React apenas para adicionar interatividade às páginas HTML existentes. Eles têm muitos componentes raiz em vez de um único para toda a página. Você pode usar o React na medida certa para atender as suas necessidades.
Recap
Você acabou de ter um gostinho do React! Vamos recapitular alguns pontos importantes.
-
O React permite que você crie componentes, elementos de UI reutilizáveis para sua aplicação.
-
Em uma aplicação React, cada parte da UI é um componente.
-
Os componentes do React são funções comuns do JavaScript, mas com duas diferenças importantes:
- Seus nomes sempre começam com letra maiúscula.
- Eles retornam JSX.