PROF.

DIONE FERRARI

CURSO
REACT NATIVE
AULA 1:
INTRODUÇÃO
Introdução
• React Native é uma popular biblioteca open-source para o
desenvolvimento de aplicativos móveis, criada e mantida pelo
Facebook (agora Meta Platforms, Inc.).
• Ela permite que desenvolvedores construam aplicativos móveis
usando JavaScript e React, uma biblioteca para construir interfaces de
usuário.
• A principal vantagem do React Native é a capacidade de desenvolver
aplicativos para Android e iOS usando uma única base de código, o
que pode significar uma economia significativa de tempo e recursos
em comparação com o desenvolvimento nativo separado para cada
plataforma.

Dione Ferrari
Origem
• React Native foi introduzido pela primeira vez em 2015, como uma
evolução das ideias por trás do React, que foi lançado em 2013.

• O objetivo era estender as capacidades do React, permitindo que os

desenvolvedores usassem a mesma metodologia de desenvolvimento
baseada em componentes para construir aplicativos móveis, não
apenas para a web.

• Isso é alcançado através de uma abordagem que combina os melhores

aspectos do desenvolvimento nativo com as potencialidades do React,
criando uma experiência de desenvolvimento eficiente e performática.

Dione Ferrari
Principais Funcionalidades
• Hot Reloading: Facilita o desenvolvimento ao permitir que as mudanças no código
sejam imediatamente visíveis no aplicativo sem necessidade de uma nova
compilação.
• Componentes Reutilizáveis: Permite a criação de componentes que podem ser
reutilizados em diferentes partes do aplicativo ou em diferentes projetos.
• Acesso Nativo: Oferece a capacidade de acessar funcionalidades específicas do
dispositivo, como câmera e localização, usando módulos nativos ou bibliotecas de
terceiros.
• Desempenho: Apesar de não ser tão otimizado quanto o código nativo puro, React
Native é projetado para ser suficientemente performático para a maioria dos
aplicativos móveis, graças ao uso de componentes nativos.

Dione Ferrari
Principais Características

As principais características do React Native, que o tornam uma escolha

popular para o desenvolvimento de aplicativos móveis, incluem:

1. Desenvolvimento Cross-Platform
React Native permite que você escreva seu aplicativo uma vez em JavaScript e
o execute tanto no iOS quanto no Android. Isso significa que você pode
manter uma base de código única para ambas as plataformas, economizando
tempo e recursos em comparação com o desenvolvimento nativo separado.

Dione Ferrari
Principais Características
2. Baseado em React
React Native utiliza a mesma metodologia de design baseada em
componentes do React, facilitando para os desenvolvedores que já estão
familiarizados com React para a web se adaptarem ao desenvolvimento
móvel.

3. Desempenho Próximo ao Nativo

Apesar de ser uma framework híbrida, o React Native possibilita a criação de
aplicativos com desempenho próximo ao nativo. Isso é conseguido porque os
componentes do React Native são mapeados para componentes nativos
equivalentes.

Dione Ferrari
Principais Características
4. Hot Reloading
Com o recurso de hot reloading, os desenvolvedores podem ver
imediatamente o resultado das últimas alterações no código sem ter que
recompilar o aplicativo inteiro. Isso agiliza significativamente o ciclo de
desenvolvimento.

5. Acesso a APIs e Componentes Nativos

React Native fornece uma ponte para acessar APIs e componentes nativos do
iOS e Android, permitindo que os desenvolvedores utilizem funcionalidades
completas do dispositivo, como câmera, localização, acelerômetro, etc.

Dione Ferrari
Principais Características
6. Vasto Ecossistema e Comunidade
Há um grande ecossistema de bibliotecas, ferramentas e frameworks
disponíveis para serem usados com React Native, além de uma comunidade
ativa e de suporte. Isso inclui uma variedade de plugins, componentes de UI e
módulos que aceleram o desenvolvimento de aplicativos.

7. Flexibilidade
React Native permite a integração com código nativo, oferecendo aos
desenvolvedores a flexibilidade de escrever partes do aplicativo usando Swift,
Objective-C, Java ou Kotlin. Isso é útil para otimizar certas partes do aplicativo
ou para adicionar funcionalidades que não estão disponíveis diretamente
através do React Native.

Dione Ferrari
Principais Características
8. Foco na Experiência do Usuário
A abordagem de design baseada em componentes do React Native,
juntamente com sua capacidade de criar interfaces de usuário suaves e
responsivas, ajuda a garantir uma excelente experiência do usuário,
rivalizando com a de aplicativos nativos.

9. Suporte Corporativo
React Native foi desenvolvido e é mantido pelo Facebook (Meta), garantindo
um bom nível de suporte e atualizações regulares. Grandes empresas, como
Instagram, Airbnb, e Tesla, utilizaram React Native em seus aplicativos móveis,
o que atesta sua confiabilidade e eficácia.

Dione Ferrari
Principais Características
10. Aprendizado Único, Escrita em Qualquer Lugar
A filosofia "aprenda uma vez, escreva em qualquer lugar" permite que os
desenvolvedores usem suas habilidades em JavaScript e React para
desenvolver aplicativos não só para móveis (iOS e Android) como também
para outras plataformas, como web e desktop, com tecnologias similares (ex.:
React.js para web).

Essas características fazem do React Native uma solução poderosa e versátil

para o desenvolvimento de aplicativos móveis, combinando a eficiência do
desenvolvimento cross-platform com a performance e a experiência do
usuário de aplicativos nativos.

Dione Ferrari
Componentes!

Componentes no React Native são os blocos de construção fundamentais para

a criação de interfaces de usuário (UI) em aplicativos móveis.

Eles são similares aos componentes do React para desenvolvimento web, mas
são projetados especificamente para funcionar em ambientes móveis.

Cada componente no React Native encapsula estrutura, estilo e lógica que

podem ser reutilizados em diferentes partes do aplicativo.

Dione Ferrari
Tipos de Componentes
Existem dois tipos principais de componentes no React Native:

1. Componentes Funcionais: São escritos como funções JavaScript e podem

utilizar hooks para gerenciar o estado e o ciclo de vida do componente. São
recomendados para componentes mais simples ou quando se deseja utilizar a
sintaxe mais concisa e moderna do React.

2. Componentes de Classe: São escritos estendendo a classe Component do

React. Eles permitem o uso de estados e oferecem acesso a métodos do ciclo
de vida do componente. São úteis para componentes mais complexos que
requerem gerenciamento de estado ou interações com o ciclo de vida do
componente.

Dione Ferrari
Estrutura de um Componente
Um componente no React Native é definido de maneira declarativa. Ele pode
incluir:
JSX: Uma sintaxe que se assemelha a HTML e é usada para definir a estrutura
visual do componente.
Estado (State): Um objeto JavaScript usado para armazenar dados dinâmicos
que quando alterados, podem provocar a re-renderização do componente.
Props: São parâmetros passados para componentes para configurá-los. As
props são imutáveis dentro do componente, tornando os componentes
mais previsíveis e fáceis de entender.
Estilos: Embora o React Native não use CSS, ele oferece um sistema de
estilização que usa JavaScript para definir os estilos dos componentes de
forma semelhante ao CSS.
Dione Ferrari
Exemplos de Componentes Nativos
O React Native vem com uma série de componentes pré-construídos que
mapeiam diretamente para componentes nativos da plataforma móvel,
permitindo a criação de UIs com desempenho próximo do nativo.

Alguns exemplos incluem:

View: O contêiner básico para componentes de layout, semelhante a uma div em HTML.
Text: Um componente para exibir texto.
Image: Para exibir imagens.
ScrollView: Um contêiner que permite rolagem quando o conteúdo excede a tela.
TextInput: Para entrada de texto do usuário.
Button: Um componente simples para capturar cliques (toques).

Dione Ferrari
Vantagens dos Componentes

Reutilização de Código: Os componentes podem ser reutilizados em

diferentes partes do aplicativo, o que melhora a consistência e reduz a
duplicação de código.
Separação de Preocupações: Encapsulando a estrutura, estilos e lógica, os
componentes ajudam a manter o código organizado e fácil de manter.
Composição: Componentes podem ser combinados para construir interfaces
complexas de forma modular e flexível.

Componentes no React Native simplificam o processo de desenvolvimento de

aplicativos móveis, fornecendo uma abordagem modular e eficiente para
construir interfaces de usuário ricas e interativas.

Dione Ferrari
Estilos
O React Native utiliza o JavaScript para estilizar componentes, empregando uma
sintaxe similar ao CSS, mas com algumas diferenças. Aqui estão algumas
propriedades de estilo comumente usadas:

justifyContent: Alinha os filhos de um contêiner em seu eixo principal. Exemplos de valores incluem
center, flex-start, flex-end, space-around, e space-between.
alignItems: Alinha os filhos de um contêiner no eixo cruzado. Por exemplo, center, flex-start, flex-end.
padding e margin: Controlam o espaçamento interno e externo em torno de um elemento,
respectivamente.
width e height: Definem a largura e a altura de um componente.
borderWidth, borderColor, e borderRadius: Usados para definir as bordas de um componente.
backgroundColor: Define a cor de fundo de um componente.
color: Especifica a cor do texto dentro de um componente Text.
fontSize: Define o tamanho do texto.

Dione Ferrari
Exemplo de Estilização

Dione Ferrari
Props
Props, ou propriedades, são uma forma de passar dados de um
componente pai para um componente filho em React Native, assim
como em React para desenvolvimento web.

Elas são imutáveis dentro do componente filho, o que significa que um

componente filho não pode modificar as props que recebe do seu
componente pai.
Isso ajuda a manter o fluxo de dados unidirecional e torna os
componentes mais previsíveis e fáceis de entender.

Dione Ferrari
Utilização de Props

Props podem ser usadas para:

• Passar dados e configurações para um componente.
• Configurar a aparência e o comportamento de um componente.
• Passar funções para um componente que podem ser chamadas em resposta
a eventos (como cliques ou toques).

Dione Ferrari
Exemplo de Props

Dione Ferrari
Pontos Importantes
Imutabilidade: O componente Filho não pode alterar a prop mensagem que
recebe do Pai. Se a informação precisa mudar, o componente Pai deve passar
novos valores para as props.
Reutilização: O componente Filho pode ser reutilizado em diferentes partes
do aplicativo, e diferentes dados podem ser passados como props, tornando-o
flexível e reutilizável.
Composição: Props permitem a composição de componentes, onde
componentes menores são combinados para formar componentes maiores e
mais complexos.

Props são fundamentais para passar dados entre componentes no React

Native, facilitando a construção de interfaces de usuário dinâmicas e
interativas.
Dione Ferrari
Hora de
testar !!!