Componentes

O coração do React. Um componente é uma função que retorna HTML e que tem um escopo próprio (de estilo e estado). É o que permite você reutilizar trechos de HTML na sua interface.

Introdução

No React, um componente é uma função que retorna HTML. Funções normalmente retornam números, strings, ou até nada, mas em Javascript, especificamente em arquivos terminados em .JSX, é possível retornar trechos de HTML também. O que isso quer dizer, em termos práticos? Que você pode chamar uma função dentro de um loop while que retorna um certo elemento e adicionar esse elemento quantas vezes você quiser!

1

Agora, somos capazes de, por exemplo, utilizar o componente acima dentro de outros componentes para montar uma interface mais complexa!

1

E se eu quiser 1000 botões?

O conteúdo dessa sessão exige que você já tenha um conhecimento relativamente avançado sobre Javascript, em especial ES5. Você pode buscar mais sobre isso aqui.

Todo o código não deixa de ser uma função do Javascript, então temos acesso a toda a funcionalidade que ele provem de forma muito fácil! Há dezenas de formas de fazer um loop em JS, mas geralmente utilizamos o método map() por ser mais fácil.

1

Temos bastante coisa para discutir sobre o código anterior! Primeiro, note que o componente Button é o mesmo dos exemplos anteriores. Segundo, note que antes do return da função App, há a criação de uma variável chamada buttons. Ao utilizarmos { }, abrimos um escopo de JS dentro do retorno, no qual podemos fazer um .map() na variável buttons que retorna uma lista de 1000 elementos do componente Button!

Note também que passamos um atributo chamado key para o componente. Isso é uma coisa mais técnica, mas a verdade é que essa key será usada pelo React para diferenciar os botões internamente (como uma espécie de ID). É sempre uma boa prática adicionar key para elementos que você criar a partir de um .map() ou outros tipos de loop. Elementos comuns não precisam disso.

Estilizar componentes com Tailwind e className

Para estilizar um componente usando Tailwind, basta utilizar os elementos dentro dos componentes! Olhares mais atentos também devem ter reparado que no React, utilizamos className ao invés de class, como é no HTML padrão. Isso ocorre pois a palavra class já existe no Javascript e causaria um conflito! O navegador não teria como saber se estavamos tentando criar uma classe ou só dando um estilo para o nosso componente, por isso decidiram fazer essa alteração pequena.

1

Utilizando o Fragment

Novamente, olhares mais atentos devem ter reparado que em todos os exemplos, nossos componentes tem retornado <div></div>. Isso tem um bom motivo! É que, na verdade, apenas UM elemento pode ser retornado de um componente. Isso significa que caso você queira retornar mais de um elemento, tenha que circula-los com uma div ou utilizar um fragment.

1

E finalmente, você está preparado para ver como customizar dinamicamente um componente!