Curso
React Native: Criando componentes
No React Native tudo que é exibido na tela para o usuário é chamado de componente. Imagens, textos e botões são exemplos de componentes que importamos e utilizamos no nosso código. Além dos componentes que já utilizamos, como View, Image e Text, nós podemos criar os nossos próprios componentes, como por exemplo uma barra de título, um card, etc. Neste curso vamos aprender a criar e a reutilizar um componente React Native utilizando os conceitos de importação e exportação (import e export).
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
10 horas
Curso de React Native (10 aulas)
Aula 1 - Introdução
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.
Aula 2 - Componente App
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.
Aula 3 - Uma visão geral sobre componentes
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.
Aula 4 - Criando e exportando 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.
Aula 5 - Importando um componente
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.
Aula 6 - Exportando e Importando um estilo
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.
Aula 7 - Separando os componentes em pastas
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.
Aula 8 - Padrões de arquivos React Native
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.
Aula 9 - Criando um aplicativo
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.
Aula 10 - Como criar um aplicativo com componentes menores
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.
Veja outros cursos de React Native
React Native: Consumindo APIs
React Native: Consumindo APIs Públicas de Terceiros
React Native: Usando Array.map e Array.filter