React Native: Criando componentes

Componentes são todos os elementos visuais exibidos na tela do aplicativo. Nesta aula vamos relembrar o conceito de componentes e vamos entender porque eles serão úteis na programação React Native.

Todo aplicativo possui o componente App que representa a tela exibida para o usuário. Este componente é criado a partir de outros componentes como View, Text e Image. Nesta aula vamos relembrar a sintaxe de criação do componente App.

Nas aulas anteriores aprendemos que para organizar melhor e facilitar na manutenção de um código, criamos componentes menores. Nesta aula vamos conhecer um aplicativo que vamos criar para entender como funciona o conceito de importação e exportação de um componente.

Já sabemos como um componente é criado e a estrutura de sintaxe que utilizamos - export default function. Nesta aula vamos relembrar este conceito e entender a função de cada palavra utilizada.

O processo de importação dos componentes Topo e Conteudo, ou seja, componentes que nós criamos, é similar ao processo de importação de uma imagem local - imagem que foi salva dentro do projeto. Nesta aula vamos aprender como isso é feito utilizando as palavras import e from.

As palavras import default e export, podem ser utilizadas para organizar nosso código não só separando um componente em componentes menores mas também para separar o estilo do código do componente. Entenda nesta aula como isso é feito.

Conforme vamos criando novos componentes e separando os seus códigos em dois arquivos, um para o código de exibição e outro com o código de estilização, a pasta que salva os componentes começa a ficar com arquivos misturados. Nesta aula vamos aprender a separar os componentes em pastas.

Já sabemos que para organizar o código do aplicativo, nós criamos uma pasta com o nome do componente e nela inserimos dois arquivos: código de exibição e código de estilização. Nesta aula veremos o padrão adotado pela comunidade de programadores React Native para nomear esses dois arquivos.

Nesta aula vamos praticar os conceitos de importação e exportação criando um aplicativo que importa componentes menores para criar a sua tela. Para isso vamos utilizar export default para criar os componentes e estilos e import para importá-los nos arquivos onde eles serão incorporados.

Criar um aplicativo que exibe mais de um componente pode parecer difícil neste momento, por isso nesta aula vamos explicar os passos dados para criar o aplicativo da aula anterior que possui três componentes: Barra Titulo, Card e Conteudo.