Introducao Ao React Native
Introducao Ao React Native
Biblioteca JavaScript do Facebook para construir aplicativos Otimiza tempo e recursos, permitindo desenvolvimento
móveis nativos para iOS e Android com uma única base de multiplataforma com desempenho próximo ao nativo.
código.
Comparando React Native
com outras tecnologias
Nativas Híbridas
Código específico para cada Tecnologias web (HTML, CSS,
plataforma. Alto desempenho, JavaScript) dentro de uma
mas exige duas bases de WebView, com desempenho
código. variável.
React Native
Combina a eficiência do desenvolvimento cross-platform com
desempenho próximo ao nativo.
Vantagens e Desvantagens
do React Native
1 Vantagens 2 Desvantagens
Reutilização de código, Dependência de módulos
grande comunidade, nativos para funcionalidades
atualizações rápidas, fácil avançadas, inconsistências
aprendizado para devs React. entre plataformas, curva de
aprendizado para código
nativo.
Casos de uso no mercado
Instagram Airbnb
Abstrai configurações nativas, fácil configuração e início Acesso total ao código nativo, maior flexibilidade,
rápido. Limitações ao acessar módulos nativos complexos. configuração inicial mais trabalhosa.
Estrutura de um Projeto React Native
1 App.js
2 components
3 screens
4 assets
5 android/ e ios/
Componentes Básicos do
React Native
1 View 2 Text
Contêiner para outros Exibe texto na tela, use para
componentes, equivalente à todos os textos do app.
div do HTML.
3 Image
Exibe imagens estáticas ou remotas, ótima para ícones e fotos.
Estilização
StyleSheet Flexbox
Define estilos como objetos JavaScript, similar ao CSS, mas Utilizado para layouts responsivos, controle a direção,
com foco em componentes. alinhamento e espaçamento dos elementos.
Navegação com React Navigation
Stack Navigator
Navegação em pilha (hierarquia), ideal para telas com fluxo sequencial.
Bottom Tabs
Navegação por abas na parte inferior, similar ao Instagram, para acesso rápido a telas.
Drawer Navigation
Menu lateral deslizante, ideal para acessar configurações e outras funcionalidades.
Gerenciamento de Estado
useState useReducer
Gerencie estados simples em componentes funcionais, para Ideal para estados complexos com múltiplos estados e ações,
variáveis individuais ou pequenas estruturas de dados. permitindo a organização e legibilidade do código.
Redux e Alternativas
Redux MobX, Zustand
Armazenamento centralizado Alternativas ao Redux,
do estado da aplicação, ideal oferecendo abordagens
para aplicações complexas e diferentes para gerenciamento
grandes. de estado, mais leves e
simplificadas.
Integração com Recursos Nativos
1 Permissões
2 APIs Nativas
3 Native Modules
Desempenho e Boas Práticas
1 Otimização de Desempenho
3 Análise de Desempenho
1
Gerar Builds
2
Publicar nas Lojas
3
Permissões e Termos