Curso online gratuitoReact Native Mobile App Development
Duração do curso online: 5 horas e 43 minutos
Novo
Aprenda a criar apps móveis com React Native e Expo: componentes, hooks, API e navegação. Curso online gratuito para acelerar sua carreira mobile.
Neste curso gratuito, aprenda sobre
Preparar ambiente React Native com Node.js, Expo CLI e dependências
Criar projeto Expo rapidamente e entender a estrutura inicial do boilerplate
Criar e reutilizar componentes: export/import e composição no App
Usar props para passar dados e configurar componentes de forma flexível
Exibir imagens com Image: source uri, estilos/tamanho e requisitos de renderização
Gerenciar estado com useState; entender por que variáveis comuns não re-renderizam
Usar useEffect para efeitos colaterais: ciclo de vida, dependências e fetch inicial
Estilizar layouts com Flexbox: flexDirection row para alinhar itens lado a lado
Renderizar listas dinâmicas (map/FlatList) com key única e performance
Consumir API: buscar dados, guardar no estado e mostrar loading/placeholder
Modelar dados da API e repassar atributos (ex.: filme.atributos) para componentes
Configurar navegação com React Navigation: NavigationContainer, stacks e links
Organizar projeto (src, telas, componentes) e ajustar entry point do Expo
Separar AuthRoutes/AppRoutes com Context+Provider e fluxo de login/loading
Descrição do curso
Desenvolver aplicativos móveis hoje exige velocidade, consistência e uma base técnica sólida — e é exatamente isso que você vai construir neste curso React Native Mobile App Development. Aqui, você aprende a criar apps com React Native usando Expo, montando um ambiente de desenvolvimento moderno e entendendo o papel do Node.js e das ferramentas que tornam o fluxo de trabalho mais produtivo do início ao fim.
Ao longo das aulas, você evolui do básico ao intermediário com prática: aprende a estruturar um projeto, criar componentes reutilizáveis, reaproveitar código e desenvolver telas com comportamento dinâmico. Você entende como props ajudam a manter a interface flexível e como lidar corretamente com imagens vindas de links, garantindo que renderizem como esperado no dispositivo. Também aprende a diferença entre variáveis comuns e estado reativo, usando useState para refletir mudanças na tela e useEffect para sincronizar o ciclo de vida do componente com tarefas como carregar dados, reagir a atualizações e inicializar rotinas do app.
O curso ganha ritmo com a construção de uma experiência real: renderização dinâmica de listas, criação de cards a partir de dados, boas práticas para lidar com chaves únicas (keys) e organização de componentes. Você trabalha o consumo de uma API externa, aprendendo a buscar informações, exibir feedback enquanto os dados não chegam e evitar problemas comuns com URLs e URIs de imagens. Assim, você desenvolve um app mais confiável, com uma interface que responde bem a carregamento e diferentes estados de execução.
Na etapa de navegação, você aprende a configurar fluxos entre telas com React Navigation, entendendo o papel do NavigationContainer e como estruturar rotas para diferentes áreas do app. Também aprende práticas de organização do projeto — como separar arquivos em uma pasta src e manter telas limpas —, além de montar um fluxo de autenticação completo: divisão entre rotas autenticadas e não autenticadas, uso de Context com Provider para controlar o estado do usuário, disparo do processo de login e gerenciamento adequado de loading para uma experiência mais fluida.
Ao final, você terá uma base consistente para criar aplicativos com múltiplas telas, dados externos, componentes reutilizáveis e um fluxo de login bem estruturado — um conjunto de habilidades muito valorizado em vagas de desenvolvimento mobile e em projetos próprios.
Conteúdo do curso
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #110m
Exercício: Qual é o principal papel do Node.js ao preparar o ambiente para desenvolver apps com React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #212m
Exercício: Qual comando cria um novo projeto React Native usando Expo de forma rápida, gerando um boilerplate com a estrutura inicial?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #311m
Exercício: Ao criar um componente reutilizável em React Native, qual sequência está correta para usá-lo no App principal?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #411m
Exercício: Em React Native, qual é a principal vantagem de usar props em um componente?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #509m
Exercício: Ao usar o componente Image no React Native com source={{ uri: "..." }}, o que é necessário para a imagem aparecer corretamente na tela?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #612m
Exercício: Em um componente Contador no React Native, por que uma variável comum (ex.: let numero = 0) pode ser incrementada no código, mas não atualizar o valor exibido na tela?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #710m
Exercício: No React Native, qual é a principal finalidade do hook useEffect?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #811m
Exercício: Em React Native, qual propriedade é essencial para exibir uma imagem em um componente Image a partir de um link?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #913m
Exercício: Em React Native, qual propriedade deve ser ajustada para que a imagem e os dados do card apareçam lado a lado (em uma linha)?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1011m
Exercício: Qual é a forma mais adequada de renderizar dinamicamente vários cards a partir de uma lista de filmes em React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1114m
Exercício: Qual é o objetivo principal do projeto prático em React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1214m
Exercício: Qual é a principal finalidade de usar useEffect junto com useState ao consumir uma API externa em um app React Native (Expo)?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1311m
Exercício: Em React Native, qual abordagem permite renderizar dinamicamente uma lista de filmes após uma requisição, exibindo uma mensagem enquanto os dados ainda não chegaram?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1412m
Exercício: Ao renderizar a lista de filmes com um componente CardFilme, por que é comum passar filme.atributos como propriedade?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1513m
Exercício: Ao exibir a imagem do pôster vinda da API no React Native, o que é necessário para que o URI funcione corretamente?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1614m
Exercício: Em listas renderizadas no React Native, qual é a forma correta de evitar o aviso de Unique key e facilitar ações como selecionar/deletar um item?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1710m
Exercício: Qual alteração melhora a experiência de carregamento ao buscar a lista de filmes no React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1812m
Exercício: Para criar navegação entre telas em um app React Native (por exemplo, ao clicar em Saiba mais e abrir outra tela), qual é a abordagem adequada?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #1919m
Exercício: Qual é o papel do NavigationContainer ao configurar o React Navigation em um app React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2012m
Exercício: Ao usar o componente Link do React Navigation, qual informação é obrigatória para que a navegação funcione corretamente?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2109m
Exercício: Ao mover o arquivo App.js para dentro da pasta src em um projeto React Native com Expo, qual ajuste garante que o app continue iniciando corretamente?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2216m
Exercício: Ao criar a tela de Login no React Native, qual prática ajuda a manter o projeto mais organizado e menos poluído?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2316m
Exercício: Ao criar links entre telas usando React Navigation, qual é um motivo comum para o app não conseguir navegar ao clicar em um link?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2413m
Exercício: Qual é o principal objetivo de separar a navegação em AuthRoutes e AppRoutes em um app React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2517m
Exercício: Qual é a principal vantagem de usar um Context com Provider para controlar as rotas autenticadas e não autenticadas em um app React Native?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2610m
Exercício: Qual abordagem permite que a tela de login dispare o processo de autenticação e atualize as rotas com base no estado do usuário?
Aula em vídeo: Desenvolvimento Mobile 2023/1 - Aula #2710m
Exercício: Ao implementar um estado de loading no fluxo de autenticação, qual é o comportamento correto nas rotas quando loading está true?