O que é um componente

A palavra Componente será muito utilizada nessa trilha e essa seção serve para deixar bem definido sobre o que exatamente estamos falando quando lemos essa palavra.

Componentes básicos

São alguns componentes que já vêm do React Native prontos e têm um propósito específico. Exemplos:

O componente Text tem o propósito de exibir um texto
O componente Image tem o propósito de exibir uma imagem
O componente View tem o propósito de ser uma “caixa” que coloca outros componentes (qualquer outro componente, inclusive outras Views, podendo ter “uma caixa dentro de outra, dentro de outra …”) dentro dessa caixa
O componente Pressable tem o mesmo propósito que a View, mas permitindo que seja feita uma ação quando o usuário clicar dentro dessa caixa
O componente ScrollView tem o mesmo propósito que a View, mas permitindo scrollar na horizontal ou na vertical quando o conteúdo interno não couber no espaço delimitado para o ScrollView
O componente FlatList tem o propósito de ser parecido com o ScrollView, exibir conteúdo scrollavel, só que com a especialidade em percorrer uma lista de elementos e exibí-lo de forma otimizada

Existem diversos outros componentes que já vêm com o React Native, e veremos mais sobre eles ao longo desta trilha. Todo componente pode ser utilizado para criar outro componente.

Componentes do React Native Os componentes que já vêm prontos no React Native

Para que criar um componente?

Um componente deve ser criado para evitar repetição de código e quando fizer sentido separar lógica entre cada parte do código.

Por exemplo, precisamos exibir uma lista de membros da Comp Júnior, e cada membro vai ser exibido em um cartão com uma foto e nome, e esse botão vai ser clicável, para que quando pressionarmos o botão iremos exibir mais detalhes (ainda não veremos a nível de código):

Componente Cartão Membro:

- Pressable
  - Image("Foto do Membro")
  - Text("Nome do Membro")

A ideia do componente Cartão Membro é ter o código para exibir os dados do Membro, passando apenas os dados do membro por parâmetro, não tendo que repetir toda a estrutura do componente (que nesse caso utiliza apenas 3 componentes, mas muitas vezes podem haver muito mais componentes) toda vez que precisarmos exibir um Cartão do Membro na tela.

Conclusão

Para concluir o que é um componente: Tudo é um componente.

Lembra que um componente pode ter outro componente, que pode ter outro, …? Então, podemos entender também que:

uma tela é um componente, pois nela colocamos outros componentes.
a biblioteca de navegação (que veremos no curso de React Native), utiliza um componente que troca de telas (um componente que escolhe qual dos vários componentes dentro dele deve aparecer em um determinado momento)

No React/React Native, tudo é um componente, e os componentes têm suas lógicas e outros componentes para serem exibidos.