0% acharam este documento útil (0 voto)
55 visualizações15 páginas

Introducao Ao React Native

Enviado por

eobardthawnezica
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0% acharam este documento útil (0 voto)
55 visualizações15 páginas

Introducao Ao React Native

Enviado por

eobardthawnezica
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 15

Introdução ao React Native

Bem-vindos! Nesta apresentação, vamos explorar o React Native, uma


poderosa ferramenta para desenvolver aplicativos móveis nativos utilizando
JavaScript.

por Luan Hernandes Batista


O que é React Native?
React Native Benefícios

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

Uber Eats Discord


Configuração do Ambiente
Expo React Native CLI

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

2 Evitar Renderizações Desnecessárias

3 Análise de Desempenho

4 Boas Práticas de Código


Publicação do Aplicativo

1
Gerar Builds

2
Publicar nas Lojas

3
Permissões e Termos

Você também pode gostar