Introdução

O React Native foi adotado com sucesso por centenas de empresas em todo o mundo, incluindo
Uber, Microsoft e Facebook, e é usado em vários setores.
No entanto, antes de decidir usar o React Native, é crucial que você entenda como ele
funciona e decida se é o mais adequado para o seu projeto.
Quais são suas principais vantagens e maiores desvantagens? Qual é a diferença de
outras plataformas de desenvolvimento cruzado? O que seus desenvolvedores e
desenvolvedoras precisam estar cientes antes de embarcar na jornada React Native?
Essas e outras perguntas serão respondidas ao longo desse artigo para que você possa fazer uma
escolha consciente e ver se o React Native é o ideal para você ou o projeto que pretende
desenvolver.

O que é React Native?

React Native (também conhecido como RN) é uma estrutura de aplicativo móvel popular,
baseada na linguagem JavaScript, que permite criar aplicativos móveis renderizados
nativamente para iOS e Android. A estrutura permite criar um aplicativo para várias plataformas
usando a mesma base de código.
O React Native foi lançado em 2015 pelo Facebook como um projeto de código aberto. Em
apenas alguns anos, tornou-se uma das principais soluções adotadas no desenvolvimento
móvel, e hoje é utilizada por aplicativos mundialmente famosos como
o Discord, Tesla, Instagram, Facebook e entre outros. Discutiremos esses e outros exemplos de
aplicativos baseados em React Native mais adiante neste post.
Dentre as várias razões por trás do sucesso do React Native, temos que as empresas podem criar
o código apenas uma vez e usá-lo para alimentar seus aplicativos iOS e Android - e isso se traduz
em uma enorme economia de tempo e recursos.
Costumamos chamar de programação mobile híbrida quando um mesmo código funciona em
diferentes plataformas.
Em segundo lugar, o React Native foi construído com base no React – uma biblioteca JavaScript
que já era muito popular quando o framework mobile foi lançado. Veremos um pouco sobre a
diferença entre eles mais pra frente também.
Em terceiro lugar, a estrutura capacitou os desenvolvedores de Front-end, que anteriormente
só podiam trabalhar com tecnologias baseadas na web, para criar aplicativos robustos e prontos
para produção para plataformas móveis.

Um pouco sobre a história do React Native

Quando o Facebook decidiu oferecer seus serviços em dispositivos móveis em vez de criar
aplicativos nativos, como muitas das principais empresas de tecnologia da época, eles decidiram
executar em páginas da Web móveis baseadas em HTML5. No entanto, esta solução não resistiu
ao longo do tempo, deixando muito espaço para melhorias na interface do usuário e no
desempenho.
Logo depois, em 2013, o desenvolvedor do Facebook, Jordan Walke, fez uma descoberta
inovadora: ele encontrou um método de gerar elementos de interface do usuário para
aplicativos iOS com o JavaScript; ou seja, conseguiu desenhar uma tela de app com Javascript.
Isso provocou um incêndio e um Hackathon especial foi organizado para descobrir ainda mais
quanto desenvolvimento móvel poderia ser feito usando soluções JavaScript (até agora,
tradicionalmente baseadas na web).

1
Foi assim que o React Native ganhou vida. Inicialmente desenvolvido apenas para iOS, o
Facebook rapidamente o seguiu com suporte ao Android, antes de tornar o framework público
em 2015. Apenas três anos depois, o React Native já era o segundo maior projeto no GitHub,
medido pelo número de contribuidores.

Conheça a linguagem JavaScript

JavaScript é uma linguagem de programação dinâmica que é usada para desenvolvimento web,
em aplicativos web, para desenvolvimento de jogos e muito mais. Ele permite implementar
recursos dinâmicos em páginas da web que não podem ser feitos apenas com HTML e CSS.
Mas o JavaScript não se limita ao mundo Web. Ele está presente em diversos cenários, como
servidores e aplicativos mobile. Por exemplo, com ele podemos criar uma Web API para diversas
aplicações usando o ambiente de execução do Node.js.
A linguagem de programação que usamos no React Native é o JavaScript. Mas muitos recursos
da linguagem podem dificultar a vida de quem está codando um App grande, com várias telas e
recursos. Isso porque, o JavaScript possui uma tipagem dinâmica, o que pode ser um problema
quando trocamos diversas informações na aplicação. Para solucionar isso, existe o TypeScript,
um recurso que usa todo o poder do JavaScript, mas com tipagem estática e outras
funcionalidades a mais.

JavaScript ou TypeScript para React Native?

Para entender melhor esta questão, é preciso considerar que as linguagens de programação se
dividem nas linguagens dinâmicas (Javascript) ou nas linguagens tipadas (Typescript).
Resumindo, o TypeScript é uma linguagem de programação de código aberto desenvolvida pela
Microsoft que compila para JavaScript. Desde seu lançamento em 2012, a linguagem
permaneceu em desenvolvimento ativo e continua a ganhar popularidade a cada ano.
E como assim é uma linguagem tipada? Bom, um aplicativo do mundo real terá
muitas validações e verificações dinâmicas. Para esses aplicativos, o código JavaScript se
tornará difícil de testar em algum momento, principalmente porque não há verificação de tipo.
TypeScript é fortemente tipado e tem um compilador que reclama se você não definir o tipo
de uma variável.
É importante que você entenda: tanto sites feitos com React quanto apps feitos com React
Native ou TypeScript, essa linguagem vai ser convertida em JavaScript no final das contas. Mas,
durante o processo de desenvolvimento, ela é extremamente útil e torna nossas aplicações
mais robustas.

2
A diferença mais importante entre TypeScript e JavaScript é que eles são duas linguagens de
programação separadas, embora o TypeScript seja fortemente baseado em JavaScript. Na
verdade, TypeScript é um superconjunto de JavaScript, o que significa que todo código
JavaScript válido também é código TypeScript válido. O TypeScript não altera o JavaScript, mas
o expande com novos e valiosos recursos.
O TypeScript introduziu uma grande quantidade de sintaxe extraída da programação orientada
a objetos, sendo eles:

• tipos enumerados;
• interfaces;
• genéricos;
• módulos.

O TypeScript parece realmente fantástico, né? Basicamente, ele é um JavaScript evoluído.

Porém, quando estamos começando no mundo do desenvolvimento, seja Web ou Mobile, o
TypeScript pode apresentar uma curva de aprendizado muito maior. Portanto, geralmente
começamos com JavaScript e depois migramos para o TypeScript.

3
Muitas empresas hoje veem o TypeScript como um diferencial no currículo da pessoa
programadora. Mas nada impede o desenvolvedor ou desenvolvedora de aprender a usar o
TypeScript dentro da empresa, visto que tudo o que ele já sabe sobre JavaScript será aplicado lá
também.
Se ficou curioso(a) para saber mais sobre a batalha entre o TypeScript e JavaScript, dê uma
olhadinha nesse artigo: Javascript ou Typescript? que temos aqui na plataforma Alura.

Qual a arquitetura do React Native?

A arquitetura do React Native pode ser dividida em 4 seções principais:

• O código React, em que o desenvolvedor escreve o App;

• O JavaScript que eventualmente é interpretado a partir do código que a pessoa
desenvolvedora escreveu;
• Uma série de elementos que são conhecidos como The Bridge.
• O lado nativo.

4
JavaScript
Nessa parte, o código é executado em um mecanismo JavaScript. O React Native usa score,
que é um mecanismo JavaScript de código aberto para WebKit. Esse mecanismo é executado
dentro de nosso aplicativo em uma das threads, sendo que um aplicativo móvel possui várias
threads e que o javascript é uma delas.

Na parte nativa
No lado nativo, asos pessoas desenvolvedoraes desenvolvem em Object Swift, no caso do iOS,
ou com Java/Kotlin se for para Android. Usaremos as linguagens nativas específicas da
plataforma que usamos antes e a thread principal da interface do usuário estará disponível como
de costume.
Em todas as plataformas, só precisamos alterar a interface do usuário da thread principal da
interface do usuário e poderemos criar diferentes threads em segundo plano conforme
necessário.
Ecossistema iOS – Hipsters Ponto Tech #306

The Bridge
O the bridge ou então a "ponte" do React Native é uma forma de comunicar o nosso
código JavaScript com a parte nativa (o código do Android e/ou iOS).
Ele funciona como se fosse o coração do React Native, se comunicando com os dois lados de
forma assíncrona. Basicamente é assim que acontece:

5
 1. Escrevemos o código de um componente botão;
2. O JavaScriptCore vai compilar o código do componente e enviar para a bridge;
3. A bridge, por sua vez, vai pegar esse código compilado e enviar para a parte nativa,
para que possa ser exibido o botão;
4. O nativo entende e monta o componente do botão em tela;
5. Se houver uma interação no botão, ou seja, se for clicado, esse evento acontece
primeiro no lado nativo, que vai para o bridge e depois para a parte em que foi
programada em JavaScript para executar alguma função, por exemplo.

Estruturação de pastas e arquivos

Já se deparou com algum projeto de outra pessoa e ficou perdido no meio de tanta pasta e
arquivos? A organização dos nossos arquivos é importante para que futuramente a gente
consiga se localizar bem e debugar fácil nosso programa.
Não existe uma regra definida de como deve ser a estrutura e organização de nossos Apps com
React Native. Mas existe um padrão que é muito utilizado pela comunidade e aqui na Alura
também. Então, só reforçando que aqui é uma sugestão de organização e não a única e mais
correta forma de fazer.
Normalmente uma estrutura de um App React Native é organizada da seguinte forma:

• assets: Pasta para armazenar todas as imagens, fontes, etc;

• src: esta pasta é o container principal de todo o código dentro de sua aplicação, ou
seja, isso significa que essa pasta guarda todo o código;
o componentes: Pasta para armazenar qualquer componente comum que você
usa em seu aplicativo. Exemplo: um botão, cabeçalho, card etc;
o constantes: Pasta para armazenar qualquer tipo de constante que você tenha;
o rotas.js: arquivo para armazenar as rotas das telas do App;
o context: Esta pasta contém todos os seus Context API. Ou seja, serve para
autenticação, armazenamento de dados de formulários, configurações de
temas ou outras funcionalidades. Não sabe como funciona? Dê uma olhada no
que são os Estados globais e as diferenças entre Redux e Context API;
o telas: Pasta que contém todas as telas/recursos do seu aplicativo;
o servicos: Controlador de API ou serviços externos. Para saber mais sobre APIs,
dê uma olhadinha no React Native: REST APIs com JSON server;
o utils: Pasta para armazenar qualquer função comum, como formatador de
data, cálculo de tempo e por aí vai.
• App.js: componente principal que inicia todo o seu aplicativo;
• index.js: Ponto de entrada do seu aplicativo de acordo com os padrões React-Native.
No Expo esse arquivo não é necessário.

Como é apenas uma sugestão, os nomes das pastas podem até variar um pouco, mas o ideal é
manter um padrão e seguir uma estrutura semelhante.

Firebase com Expo

No projeto de Firebase feito com Expo, seguimos essa estrutura abaixo:

6
Na imagem, você vai perceber que dentro da pasta "telas" existem outras 3 pastas, uma para
cada tela. E, dentro de cada tela, tem um arquivo index.js, que contém a lógica e estrutura da
página, e outro arquivo estilos.js, que contém os estilos da página.
Algumas pastas extras podem aparecer dentro de scr, como é o caso de config. Essa pasta
contém os arquivos de configuração do Firebase.
Nosso arquivo de rotas também tem um padrão, que fica assim:

Como podemos ver, o arquivo rotas.js contém a importação de cada tela e fica por meio
de containers do react-navigation para permitir a navegação entre as telas.

7
Dentro de cada tela ou componente, temos uma estrutura muito padrão conforme o código
abaixo:

Os componentes ou telas são criadas e exportadas como função e, dentro dela, temos diversos
elementos do React Native, como View, Text, TouchableOpacity e entre outros.

Perceba também que cada elemento React Native contém um estilo, que vem do
arquivo estilos.js. Esse arquivo normalmente tem essa estrutura:

Assim ficam as estruturas básicas do React Native. Mantendo esse ou um padrão parecido, será
muito mais fácil de trabalhar com a aplicação no futuro, seja em grupo ou individualmente.

8
Principais características do React Native
O React Native possui várias características que o tornam uma escolha poderosa para a
construção de aplicativos móveis. Entre elas temos:

1. Desenvolvimento multiplataforma
Aí você pode estar se perguntando o que seria esse desenvolvimento multiplataforma? O
desenvolvimento multiplataforma é a prática de construir software compatível com mais de
um tipo de plataforma de hardware. Um aplicativo multiplataforma pode ser executado no
Microsoft Windows, Linux e macOS, ou apenas em dois deles. Um bom exemplo de aplicativo
multiplataforma é um navegador da Web que executa o mesmo, independentemente do
computador ou dispositivo móvel em que você o executa.
A ideia aqui é facilitar ao máximo a vida da pessoa programadora, uma vez que o mesmo código
que ele desenvolver poderá produzir aplicações que rodem em diferentes plataformas, sem ficar
se preocupando em ter que aprender a usar ferramentas muito diferentes para um mesmo
propósito.
Com isso, o React Native e até outros serviços com esse propósito ganham maior audiência da
comunidade, uma vez que você não precisa decidir qual público-alvo, ou seja, usuários de iOS
ou Android, pois o software multiplataforma é executado em ambos, o que lhe dá acesso a
uma base de usuários mais ampla.
Existem algumas diferenças de navegação e design entre iOS e Android que, no
desenvolvimento multiplataforma, são tratadas por padrão, graças à base de código
compartilhada.
Isso ajuda a criar uma identidade de marca de aplicativo consistente em ambas as plataformas
com menos esforço do que se fosse construído nativo.
Sendo assim, uma das maiores vantagens do desenvolvimento multiplataforma é que você
pode construir apenas uma base de código para Android e iOS ao mesmo tempo. O
desenvolvimento de aplicativos nativos requer escrever código separadamente e
frequentemente precisa de dois desenvolvedores de software diferentes para realizar o
trabalho, um para iOS e outro para Android.

2. Uso de recursos nativos

O React Native nos permite abstrair o lado Android e iOS para criar um App que funcione nos
dois sistemas operacionais, como também, usar recursos nativos no nosso desenvolvimento. Ou
seja, podemos integrar ferramentas específicas da programação nativa no nosso
desenvolvimento híbrido com React Native.

3. Modularização em forma de componentes

A programação com React Native é praticamente baseada em componentes. Isso ajuda muito
na modularização do nosso código e na parte de abstração de funções complexas. Além de que
permite a reutilização de código em diversas aplicações.
O site do NPM contém diversas bibliotecas criadas por empresas e comunidades que podem ser
integradas em seus projetos como um componente comum. Isso facilita e agiliza muito a criação
de aplicativos.

Vantagens e desvantagens do React Native

9
Nem tudo são flores e mesmo que o React Native possua diversas vantagens, ele também tem
algumas desvantagens. Com isso, vamos analisar com relação a dois pontos diferentes:
Vantagens em relação à perspectiva de negócio e em relação ao de desenvolvimento.
É importante que você saiba os prós e contras para tomar decisões acertadas e bem
informadas em sua carreira, então vamos lá!

Vantagens do React Native de uma perspectiva de negócios

• Velocidade e custo: o que as pessoas desenvolvedoras adoram no React Native é
poder reutilizar código e reciclar componentes criados por eles mesmos. Elas também
podem compartilhar sua base de código e fazê-los trabalhar mais rápido. Além disso,
os desenvolvedores e desenvolvedoras do React Native lidam com o desenvolvimento
de aplicativos para ambas as plataformas, Android e iOS, para que não precisem
contratar duas equipes separadas;
• Experiência do usuário: a experiência da pessoa que utiliza um App feito em React
Native é tão boa quanto a programação nativa, visto que os códigos, sejam em
JavaScript ou TypeScript, serão convertidos em linguagem nativa, o deixando
bem performático;
• Tempo: é bem mais rápido validar uma ideia no mercado, quando se usa o React
Native, para obter feedbacks e adaptar as mudanças de acordo sem a necessidade de
um grande investimento;
• Comunidade: A comunidade React Native é enorme. Com isso a pessoa
desenvolvedora consegue resolver problemas de uma forma bem rápida;
• Custo de manutenção: você lida apenas com uma base de código.

Vantagens do React Native de uma perspectiva de

desenvolvimento
• Facilidade em trabalhar: desenvolvedores e desenvolvedoras geralmente apreciam a
experiência de desenvolvimento. Possuir ferramentas robustas e que economizam
tempo o tornam uma boa escolha em relação a outras plataformas;
• Funciona nas principais plataformas: Depois de aprender o React Native, você pode
criar aplicativos para iOS e Android;
• Ferramentas de depuração inteligentes: mecanismos de relatório de erros que podem
ser adicionados por alguns serviços e bibliotecas. Isso permite que os desenvolvedores
se concentrem mais na parte produtiva;
• Facilidade na depuração: utiliza o Flipper como padrão;
• Ambiente de trabalho: a pessoa desenvolvedora não é forçada a trabalhar no Xcode
ou Android Studio para desenvolver Apps iOS ou Android;
• Reutilização de código: os desenvolvedores e as desenvolvedoras podem integrar
facilmente 90% da estrutura nativa e reutilizar o código para qualquer plataforma.
Esse recurso não apenas economiza tempo, mas também ajuda a reduzir o custo de
criação de dois aplicativos;
• Componentes pré-desenvolvidos: várias bibliotecas de código aberto estão
disponíveis para acelerar seu trabalho;
• Interface de usuário mais suave e rápida: em comparação com os híbridos clássicos.
Os aplicativos React Native usam APIs nativas para renderizar sua interface do usuário;
• Expo: é uma ótima ferramenta para o desenvolvimento rápido de aplicativos para
muitas plataformas, com muitas bibliotecas prontas para uso no SDK;

10
 • Uma base de código para todos: a possibilidade de manter apenas uma base de
código para executar um projeto em um Android, iOS e Web;
• Modo de demonstração: ao usar o Expo, é possível criar uma demonstração para um
cliente sem realmente enviar o aplicativo para a App Store ou Play Store. A única coisa
que precisamos é do App Expo em um dispositivo móvel;
• Atualizações Over The Air (OTA): permitem enviar correções rápidas diretamente aos
usuários sem a necessidade de esperar que a App Store ou o Play Store aceitem as
alterações;
• Hot reload: permite que os desenvolvedores vejam as alterações que aplicaram no
código em tempo real.

Desvantagens
• Desempenho menor que o nativo: React Native não é capaz de usar todas as
vantagens e o potencial de uma plataforma específica. Assim, um aplicativo nativo
pode realmente maximizar as funcionalidades e entregar a melhor experiência ao
usuário no resultado final.
• Módulos personalizados: muitos módulos personalizados já estão disponíveis, mas
pode haver a necessidade de alguns componentes específicos que você será forçado a
construir do zero.
• Problemas de atualização: é difícil manter o aplicativo atualizado com a versão mais
recente do React Native. Atualizar versões do React Native é, na maioria dos casos, um
processo complicado.
• Recursos novos: os recursos novos que chegam aos nativos podem demorar a chegar
para o React Native.

Expo CLI vs React Native CLI

O Expo é uma ferramenta open-source, construída em torno do React Native, que ajuda você
a criar aplicativos móveis multiplataforma usando Javascript e/ou Typescript.
Expo fornece o Expo SDK, que ajuda você a usar algumas funcionalidades nativas móveis, como
BarcodeScanner, MapView, ImagePicker e muito mais, para que possamos definir a Expo como
um ecossistema mais do que uma estrutura.
Basicamente, o Expo facilita a criação de um app usando o React Native, visto que ele abstrai
toda uma configuração de setup no computador para programar e poupa a pessoa
desenvolvedora de precisar de um computador potente para executar suas aplicações, visto que
não há necessidade de um emulador de celular, podendo executar o projeto diretamente no
seu dispositivo físico.
Mas, assim como qualquer tecnologia, temos os lados positivos e negativos.

Pontos positivos em usar o Expo

O Expo torna mais fácil e rápido desenvolver aplicativos ao lidar com todas as alterações de
configuração, conflitos de versão e certificados. O Expo GO é um aplicativo que você pode baixar
nas lojas do Google ou da Apple e que permite visualizar seu aplicativo em tempo
real enquanto o desenvolve.
Além disso, a grande vantagem do Expo é que ele permite desenvolver aplicativos móveis
multiplataforma sem ter os equipamentos necessários para isso. Por exemplo, se você deseja
desenvolver um aplicativo móvel executado em iOS e não pode comprar um Mac ou não quer

11
lidar com o Xcode por algum motivo, você pode definitivamente fazer isso, usando os serviços
do Expo.
Ele tem recursos excelentes que você pode usar para otimizar seu tempo e custo de
desenvolvimento. Logo, fica fácil entender por que o Expo ganhou muita popularidade entre os
desenvolvedores React Native nos últimos anos.

Pontos negativos em usar o Expo

Por outro lado, o Expo tem algumas desvantagens sérias que limitam seu crescimento. Uma
dessas limitações é lidar com código nativo como desenvolvedor(a)- ao contrário do React
Native CLI.
Quando você desenvolve seu aplicativo usando o Expo, você não altera o código nativo e isso
será uma notícia muito frustrante para os desenvolvedores e as desenvolvedoras que desejam
desenvolver seus próprios módulos nativos e integrá-los em seus aplicativos React Native.
Uma solução é fazer uma ejeção no seu app feito em Expo para o React Native CLI, assim
poderá mexer no código nativo Android e iOS diretamente. Mas uma vez feita essa ejeção, não
poderá voltar atrás e ser um projeto Expo. Essa ejeção pode causar algumas incompatibilidades
e bugs no App também.
Usar o Expo dependendo do projeto pode limitar o desenvolvimento. Por exemplo, se seu App
precisa usar o bluetooth, então o Expo não conseguirá te ajudar nisso, visto que ele ainda não
tem suporte.

Apesar dos ótimos recursos que oferece a seus usuários, o Expo tem algumas limitações sérias
que você precisa considerar ao desenvolver seu próximo aplicativo.

O que é React Native CLI?

O React Native CLI é uma ótima solução se você deseja integrar algum código nativo (escrito
em Java/Kotlin ou Swift/Objective-C) em seu projeto ou até mesmo escrever seu próprio.
Nos últimos anos, o React Native teve muitas melhorias em sua infraestrutura, deixando o seu
App o mais parecido com o Nativo possível. Com o React Native é possível integrar muitas
funcionalidades móveis nativas, como a câmera, o gerenciador de arquivos, o Bluetooth e muito
mais, graças ao excelente trabalho e apoio da enorme comunidade por trás do React Native.
Porém o React Native CLI apresenta algumas limitações cruciais que devem ser consideradas.
Uma dessas limitações é que, ao contrário do Expo, você precisa ter o equipamento certo para
compilar seu aplicativo em .apk ou .ipa, para enviar seu App para produção nas duas principais
plataformas móveis (iOS e Android).
É preciso ter um Mac e Xcode no caso da Apple Store, e também um estúdio Android para a Play
Store. Além disso, quando você estiver pronto para enviar seu App para produção, precisará
lidar com todas as configurações, assinaturas, certificados e muitas outras coisas.

Como instalar o React Native?

Para começar a usar o React Native, algumas instalações e configurações devem ser feitas no
computador. A ferramenta base que deve ser instalada na máquina é o Node.js. Com ele,
teremos acesso ao gerenciador de pacotes NPM que vai nos permitir criar e instalar diversas
bibliotecas.

Como criar o primeiro App com Expo?

12
Agora que temos nosso setup configurado na nossa máquina, vamos criar um App com Expo?

Vamos abrir o terminal, navegar até uma pasta desejada e digitar:

expo init PrimeiroProjeto

Depois, vamos navegar para o projeto criado /PrimeiroProjeto e podemos abrir ele em algum
editor de texto de sua preferência - eu costumo usar o VSCode.
No terminal, dentro da pasta do projeto, digite:

expo start

Seu projeto será executado e será listado no terminal mesmo alguns comandos para rodar o
aplicativo no emulador Android, simulador iOS ou ler um QR Code no celular físico para ele ser
executado também.

Você notará que dentro da pasta já tem alguns arquivos criados. Essa é uma estrutura básica
do React Native com Expo. Se divirta alterando algumas informações como texto e imagem e
veja o que acontece!

Como criar o primeiro App com React Native CLI?

Com o ambiente todo configurado para rodar o React Native CLI, execute os seguintes
comandos no terminal:

Para criar um projeto:

npx react-native init PrimeiroProjeto

Para navegar até o projeto:

cd PrimeiroProjeto

Para executar o projeto:

npx react-native start

Você também vai notar que algumas pastas e arquivos foram criados por padrão. Essa é uma
estrutura base do React Native CLI. A grande diferença em relação ao Expo são as pastas "ios" e
"android" que aparecem. Com elas é possível adicionar e modificar bibliotecas nativas no seu
App.

Para executar a aplicação em um emulador Android:

npx react-native run-android

E, para iOS, digite:

13
 npx react-native run-ios

Se quiser saber como posicionar elementos na tela e mexer com algumas unidades de
medidas, esses artigos aqui estão explicando muito bem isso!

• Componentes e unidades de medida;

• Posicionando elementos com Flex.

O que o mercado procura mais no dev React Native?

O mercado constantemente está mudando, e percebemos o aumento na procura por
desenvolvedores e desenvolvedoras mobile. Se você quer ser um dev mobile React Native ou
quer se preparar mais para o mercado, essas são algumas das habilidades que os recrutadores
ficam de olho:

• Forte conhecimento dos fundamentos do React, como o DOM virtual, ciclo de vida do
componente, estado do componente, etc;
• Forte conhecimento de JavaScript e paradigmas de programação funcional. Por
exemplo, escrever código funcional em oposição ao código imperativo;
• Experiência com uma biblioteca de gerenciamento de estado como Context API,
Redux, MobX ou outros;
• Escrevendo código limpo, confiável e sustentável;
• Testes de unidade como jest, prop types, flow, etc.
• Experiência com depuração de Apps;

Algumas habilidades extras são:

• Conhecimentos de linguagens de programação móveis como Swift,Objective-C, Java

e/ou Kotlin;
• Forte conhecimento de verificação de tipo e teste de unidade;
• Experiência em escrever pacotes npm e módulos nativos.

O que é o Expo?
Expo é um framework que facilita muito o desenvolvimento de Apps. É um conjunto de
ferramentas e serviços construídos em torno de plataformas nativas e React Native que ajudam
você a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web
a partir da mesma base de código JavaScript/TypeScript.
Resumindo, o Expo abstrai toda a configuração inicial que é preciso fazer para começar a
programar com React Native, tornando muito mais simples o desenvolvimento e também o uso
de mapas, câmeras e diversos sensores em suas aplicações.

Usar o Expo parece bom demais né!? Partiu ver como configurar seu ambiente para usar ele!

Como instalar o Expo

14
O passo a passo de configuração é basicamente o mesmo em cada sistema operacional,
mudando poucas coisas, mas separei abaixo a instalação em vídeo de cada um para facilitar:

Windows

Se você utiliza o Windows, assista este Alura+ para configurar o seu ambiente.

macOS

Mas se você utiliza o macOS, assista a este Alura+.

Linux

E se você utiliza o Linux, assista a este Alura+.

Programando direto no celular

Com o Expo, você pode programar tanto usando o Emulador Android, como Android Studio e o
simulador iOS do Xcode ou então usando o seu próprio celular.

Caso opte por usar algum emulador ou simulador, aconselho dar uma olhada nesse outro artigo,
que além de ensinar a configurar o React Native CLI também é mostrado sobre os emuladores.
Porém, se você está começando ou quer mais agilidade é bem simples e rápido usando o celular
real, além de ter a sensação real de ver o seu aplicativo em um dispositivo que não é simulado.
Para isso, o que você precisa fazer é:

• Baixar o aplicativo do Expo nas lojas oficiais de aplicativos:

o Play Store;
o App Store.
• Feita a instalação do aplicativo no seu celular, basta rodar algum projeto feito em Expo
que será exibido um QR Code no seu computador e você poderá ler esse QR Code com
esse aplicativo que acabamos de baixar. Feita a leitura, o seu App começará a
funcionar diretamente no celular e, toda vez que você modificar e salvar seu código, as
mudanças serão refletidas em tempo real na tela do seu dispositivo.

React Native
React Native é um dos mais incríveis frameworks de aplicativos baseados em JavaScript
que se destina a desenvolver aplicativos móveis renderizados nativamente para
Android e iOS. Você pode utilizar a mesma base de código para desenvolver aplicativos
para várias plataformas com React Native.

Os dez melhores componentes para React Native

Você quer saber sobre os componentes nativos de melhor reação? Vamos dar uma
olhada nas principais opções fornecidas abaixo a esse respeito:

15
Native Base
Native Base é uma biblioteca existente desde os primeiros dias do React Native para
oferecer suporte a componentes de interface de usuário de plataforma cruzada. Ele está
oferecendo uma rica lista de componentes que parece bem fora da caixa. Ele oferece
suporte básico para todos os componentes e oferece configuração predefinida para
vários componentes com todos os casos de uso possíveis.

React Native Paper

React Native Paper é uma biblioteca de interface do usuário de plataforma cruzada do
React Native que se baseia no Material Design do Google. Ele está oferecendo
componentes prontos para produção e mais fáceis de personalizar. Ele também oferece
suporte a temas, o que torna mais fácil aplicar temas a qualquer componente específico.

Claro e escuro são dois temas padrão desta biblioteca. No entanto, a biblioteca de ícones
vetoriais React Native é essencial para dar suporte e utilizar os ícones adequadamente.
Ele também pode suportar a web por meio da web React Native.

Teaset
Teaset é outra adição fantástica ao conjunto de bibliotecas React Native. É basicamente
uma biblioteca de interface de usuário que apresenta mais de 20 JS ES6 puro para suas
classes de conteúdo de componente. Com muito apreço, o Teaset é a solução ideal para
quem tem um talento especial para o design e simplicidade. Ele está se concentrando
principalmente no controle de ação e exibição de conteúdo.

React Native Elements

React Native Elements é uma das maneiras mais fáceis e simples de começar.
Geralmente é um kit de interface do usuário de plataforma cruzada. No entanto, este
kit de ferramentas pode oferecer uma série de componentes integrados com mais de
uma estrutura básica apenas, em vez de seguir um sistema de design opinativo.

• Por isso, você certamente pode ter mais controle sobre como vai personalizar
os componentes.
• No entanto, o processo de personalização desta biblioteca envolve uma
mistura de adereços básicos da API React Native com alguns adereços
personalizados também.
• O pacote React Native Elements inclui um pacote completo de componentes,
incluindo preços, sobreposição, emblema, barras de pesquisa específicas da
plataforma, divisor, etc.

Para usar React Native Elements para projetos baseados na web, os desenvolvedores
podem acessar o React Native Web. No geral, o React Native Elements permite que
você crie uma interface do usuário adaptável e rápida rapidamente.

16
Material Kit React Native
Material Kit componente está oferecendo um modelo de aplicativo nativo
gratuitamente com material design. O componente é construído com a estrutura Galio e
foi criado para permitir que você reprojete os componentes para mantê-los atualizados
e mínimos.

Ele vem com mais de 200 elementos artesanais, incluindo navegação, entradas, cartões,
botões, etc. Você pode fazer alterações no tema para trazer variações de cores em todos
os componentes.

No geral, é super fácil de usar a biblioteca, que vem com 5 páginas de exemplo e cinco
plug-ins customizados também. No entanto, você também pode ter acesso à sua versão
profissional, o que permite obter mais exemplos com facilidade.

React Native UI Kitten

UI Kitten é uma biblioteca React Native que você pode usar como um kit inicial para
aplicativos móveis de qualquer domínio, até mesmo de comércio eletrônico. É também
uma Implementação Nativa React do Eva Design System.

No entanto, esta biblioteca está oferecendo um conjunto de 20 componentes de uso

geral que se destina a cuidar dos componentes visuais. É uma biblioteca de código aberto
e sempre gratuita, que permite que você use os temas disponíveis. Você também pode
personalizá-los para criar seus próprios temas, sem nem mesmo alterar o código-fonte
dos componentes

Ele também permite alternar entre temas escuros e claros em tempo de execução. Não
há necessidade de recarregar o tema para isso.

Lottie for React Native

Lottie é uma biblioteca que permite adicionar animações aos seus aplicativos. Lottie
ajuda você a adicionar seu adobe after Effects criado animações em seus aplicativos com
facilidade.

Plug-ins e bibliotecas Lottie estão disponíveis para uso gratuitamente. Ele permite que
você utilize coleções selecionadas de animações para tornar os aplicativos mais
interessantes e atraentes.

Nachos UI
Nachos UI biblioteca está oferecendo mais de 30 componentes que podem ser usados
em qualquer projeto nativo JS e react. Ele pode mantê-lo sem estresse para estilizar
qualquer um dos componentes necessários. Você pode personalizar facilmente os
componentes de acordo com o estilo adequado ao seu projeto.

17
React Native Vector Icons
Vector Icons é uma fantástica biblioteca de componentes React Native se você deseja
adicionar ícones ao seu aplicativo, pois contém mais de 3000 ícones. Por isso, pode
oferecer-lhe quase tudo o que é ideal para as suas necessidades.

Além disso, esta biblioteca permite estilizar, estender e personalizar ícones ao integrá-
los ao seu projeto.

No geral, pode ser a melhor biblioteca a ser usada para os ícones de seus aplicativos.

React Native UI Lib

UI Lib é uma biblioteca React Native que é desenvolvida e mantida pelo Wix. Ele oferece
um conjunto de ferramentas completo para construir aplicativos nativos de alta
qualidade. Felizmente, ele oferece suporte a todas as versões do React Native para tornar
as coisas mais fáceis para você. No geral, ele oferece mais de 20 componentes de IU,
todos mais fáceis de integrar.

Conclusão
A lista acima dos dez melhores componentes do React Native é baseada em
componentes mantidos ativamente que você pode usar para seus aplicativos com
facilidade. Certifique-se de escolher a opção certa que atenda aos requisitos do seu
aplicativo da melhor maneira possível, para que você possa aproveitar ao máximo esses
componentes do React Native facilmente.

React Native é uma das mais incríveis estruturas de aplicativos com base em JavaScript,
projetada para desenvolver aplicativos móveis renderizados nativamente para Android e
iOS. Você pode utilizar a mesma base de código para desenvolver aplicativos para várias
plataformas com React Native.

O Que é CSS?

CSS é uma linguagem de estilos usada para estilizar elementos de uma página desenvolvida
com uma linguagem de marcação, como o HTML. O que ela faz é separar a parte estrutural
escrita, ou seja, o conteúdo, da parte visual, ou seja, o design gráfico dessa mesma página.
A expressão cascata da nomenclatura indica que é possível usar mais de um arquivo CSS ao
mesmo tempo para criar o estilo visual de um site. É o CSS que estipula o visual dele, incluindo
elementos como tamanho da fonte, imagens de fundo e estilo de cores.

18
A linguagem CSS tem muitas possibilidades de formatação. Ela permite mexer, editar,
remover, alinhar ou trabalhar no espaçamento dos elementos de uma página de forma prática
e fácil.
Isso garante mais flexibilidade e agilidade não apenas para os elementos textuais e gráficos
que constituem essa mesmo página, mas também para profissionais que trabalham com essa
linguagem de estilos.
É por isso que desenvolvedores, sejam iniciantes ou experientes, costumam usá-la nos seus
projetos online. Sites, blogs e ecommerce frequentemente são feitas com folha de estilo CSS,
além de outras linguagens.

Como CSS Funciona?

O CSS funciona através de uma sintaxe de códigos que possuem regras próprias e que
influenciam na apresentação visual de uma página.
Quando um desenvolvedor aplica estes códigos CSS na estrutura de uma página, eles ficam
gravados juntos com outras informações desta mesma página. Isso inclui conteúdos em texto,
animações, vídeos e o que mais tiver sido inserido.
Assim, quando um usuário acessa um site, o navegador organiza todos esses dados e mostra os
elementos visuais estilizados na tela. Mas sem esquecer dos demais conteúdos programados
com outras linguagens de programação.
Essa é a combinação de linguagens que acontece na maioria dos sites na internet. Como
resultado, os leitores e visitantes se sentem mais inclinados a continuar acessando uma página.
Já pensou seu site ter este nível de complexidade no visual?
Uma particularidade do CSS é que ele veio para preencher lacunas deixadas pela linguagem
HTML. É como se o HTML fosse o esqueleto de uma pessoa, enquanto o CSS são as roupas.
Juntas, elas moldam a estrutura óssea, o visual e o estilo gráfico de um site.

Vantagens de Usar CSS

É bem fácil de perceber quando um site não usa a linguagem CSS na sua estrutura. Imagine
uma situação em que uma página HTML que não carrega completamente. E, na imagem de
fundo, está uma tela totalmente branca, e os textos estão em azul ou preto.

19
 Antigamente, essa era a realidade dos desenvolvedores. Era preciso definir e escrever toda a
estrutura textual e visual de um site na linguagem de marcação HTML. Com, o CSS, o
programador cria arquivos CSS estilizados e pode inseri-los sobre o código HTML.
Ou seja, com o CSS, não é mais necessário escrever os elementos de um site individualmente
em código HTML. A estrutura textual de conteúdo fica com o HTML. A parte visual, agora, é
toda definida pelos múltiplos estilos possíveis com o CSS.
Essa é uma das grandes vantagens de se usar CSS. Algumas outras são:
• Mudanças Rápidas e Facilitadas
Os estilos implementados pelo CSS permitem que a parte estrutural e fundamental de um
documento seja separada da sua parte de apresentação. Ou seja, mudanças na parte visual e
no estilo do arquivo podem ser feitas de forma rápida e facilitada, sem comprometer todo o
conteúdo do arquivo.
• Folhas de Estilo Multifuncionais
Assim que o programador cria uma folha de estilos, ela pode ser aplicada a vários documentos
diferentes. Assim, todos eles podem ter a mesma aparência e visual de página, caracteres e
planos de fundo, por exemplo. Algo que otimiza o tempo de produção e agiliza os trabalhos no
seu projeto na internet.
• Códigos Menos Poluídos e Mais Organizados
Como o código de formatação fica armazenado em um único arquivo CSS, fora do contato com
o HTML, os códigos CSS recebem menos atributos e propriedades específicas. Isso resulta em
linhas de códigos mais limpas e mais fáceis de entender, economizando tempo na manutenção
de um site. Os navegadores também carregam as páginas mais rapidamente.

O Que é Possível Fazer Com CSS?

O CSS é a linguagem de estilos para compor o aspecto visual de uma página na web. Por conta
disso, ela contém uma série de aplicações. Conheça algumas delas abaixo.
• Animações
São elementos que ajudam sites a receber mais atenção dos visitantes do que simples páginas
estáticas. Neste caso, é exigido um conhecimento mais aprofundado do programador para
executar a estrutura certa de uma animação, pois ela é mais complexa do que apenas
configurar elementos visuais simples.
• Efeitos Visuais
O estilo cascata do CSS se encaixa com efeitos de estilo que se sobrepõem uns aos outros. Isso
cria um atrativo visual extra para quem está acessando tal página na internet com essas
funcionalidades. Um dos efeitos mais apropriados para este aspecto é o Parallax, que confere
um efeito de profundidade mais realista ao layout.
• Sites Dinâmicos
Como a linguagem de estilos CSS é versátil e fácil de implementar, desenvolvedores são
capazes de criar sites dinâmicos usando efeitos combinados. Podem ser animações, passagens
de transição, páginas responsivas, linhas e fontes personalizadas e mudanças de tonalidades
quando o cursor do mouse passa sobre algum objeto.
• Landings Pages
São as páginas de destino usadas para capturar informações dos visitantes ou oferecer vendas
de produtos e serviços. Estas páginas precisam ser visualmente atrativas para conquistar a

20
 atenção de quem as acessa. Além disso, geralmente contam com formulários de inscrição e
elementos gráficos destacados. Tudo feito com CSS.

Como usar CSS?

Agora você vai aprender a como usar CSS no seu projeto. Como vimos antes, o HTML e o CSS
trabalham juntos para apresentar uma página de internet bem estruturada. Tanto na parte do
conteúdo quando no visual.
Assim, vamos usar o código básico do HTML como ponto inicial. Por exemplo: temos
que <p>Isso é um parágrafo<p>. Para estilizar esse trecho em CSS, você precisa selecionar um
elemento e declarar o que deseja fazer com o bloco de informação.
Assim, na prática, temos:
Situação 1: Todos os elementos <p> são estilizados e coloridos nas cores azul (blue) e negrito
(bold).
1. <style>
2. p{
3. color: blue;
4. text-weight: bold;
5. }
6. <style>

Situação 2: Todos os elementos <p> terão alinhamento centralizado (center), com tamanho de
fonte 16 (font-size) e cor rosa (pink).
1. <style>
2. p{
3. text-align: center;
4. font-size: 16px;
5. color: pink;
6.
7. }
8. </style>

Estilos de CSS: Interno, Externo e Inline

O CSS pode ser apresentado usando alguns métodos. São eles: Interno, Externo e Inline.
Vamos explicar brevemente o que cada um deles é e como atuam nas páginas de internet.
1. Interno. Neste método, o CSS é carregado toda vez que um site é atualizado, o que pode gerar
tempos de carregamento maiores. Não é possível usar o mesmo estilo CSS em várias páginas,
pois este método fica configurado para apenas uma página. O benefício disso é ser mais fácil
compartilhar o template da página para uma pré-visualização.

21
2. Externo. Neste método, tudo é feito em um arquivo .css em separado. Isso significa que você
pode programar e planejar todo o conteúdo CSS de uma página em um documento. E, mais
tarde, anexá-lo ao arquivo HTML dessa mesma página. Um dos benefícios, com isso, é a
diminuição do carregamento de sites.
3. Inline. Neste método, o programador ou desenvolvedor trabalha com elementos específicos
que usam a tag <style>. Cada componente precisa ser estilizado; por isso, não é o jeito mais
rápido de se usar códigos CSS. Ainda assim, pode ser útil se você quiser fazer alterações em um
único elemento ou não tiver acesso aos arquivos CSS.

O que é Atomic CSS?

Antes de entrar no Tailwind CSS, vamos entender o que é Atomic CSS. De
acordo com o CSS Tricks (site em inglês):
"Atomic CSS é a abordagem da arquitetura CSS que favorece classes
pequenas e de propósito único com nomes baseados na função visual."
É como criar classes que supostamente têm um único propósito. Por
exemplo, vamos fazer uma classe bg-blue com o seguinte CSS:
.bg-blue {
background-color: rgb(81, 191, 255);
}

Agora, se adicionarmos essa classe a uma tag <h1>, ela terá um

fundo azul com a cor rgb(81, 191, 255), como você pode ver no
código acima.
Aqui está o HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world!</h1></div>
</body>
</html>

22
Este HTML resultará em algo assim:

Agora, imagine escrever regras CSS de propósito único, tão úteis, e mantê-las em
um arquivo CSS global. Eu sei que é um investimento de tempo, mas pense nisso – você
poderá usar essas classes auxiliares de propósito único em qualquer lugar que desejar.
Você só precisa do seu arquivo HTML para consumir esse arquivo CSS global e pronto.
Você também poderá usar combinações dessas classes auxiliares em uma única tag
HTML.

Vamos ver outro exemplo?

Vamos criar um arquivo CSS com as seguintes regras:

.bg-blue {
background-color: rgb(81, 191, 255);
}
.bg-green {
background-color: rgb(81, 255, 90);
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}

e, em seguida, consumi-lo em nosso arquivo HTML da seguinte

forma:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

23
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world 1</h1></div>
<div><h1 class="text-underline">Hello world 2</h1></div>
<div class="text-center">
<h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
</div>
</body>
</html>
Isso gerará o seguinte resultado:

🗒️ Pontos a observar aqui:

• Combinação de várias classes auxiliares: veja como combinei várias
classes auxiliares na linha 14 da tag <h1>, nomeadas bg-green, font-
weight-400 e text-underline. Todas foram aplicadas no meu
texto Hello world 3.
• Reutilização de classes auxiliares: no exemplo acima, veja como a
classe auxiliar text-underline é usada várias vezes nas linhas 12 e 14.
Veja como conseguimos adicionar estilos diferentes sem sair da página
HTML. Bem, você pode dizer: "Ei, nós tivemos que escrever essas
classes auxiliares ou utilitárias no arquivo CSS global... e quanto a
isso?" Bem, eu entendo. Esse definitivamente foi o investimento inicial
de tempo que tivemos que fazer para começar.

Claro, quem sabe quantas dessas classes auxiliares ou utilitárias de

propósito único teríamos que fazer se quiséssemos seguir essa
arquitetura Atomic CSS.

24
 É aí que entra o Tailwind CSS. O conceito de Atomic CSS não é novo,
mas o Tailwind CSS o leva a outro nível.

Tailwind CSS – um framework CSS visando a utilidade

O Tailwind CSS, segundo o próprio site da web é um "framework CSS
visando a utilidade", que fornece várias dessas classes utilitárias, opinativas
e de propósito único, que você pode usar diretamente dentro de sua
marcação de texto para projetar um elemento.
Algumas das classes utilitárias que uso frequentemente hoje em dia são:

• flex: usado para aplicar o Flexbox a uma <div>

• items-center: para aplicar as propriedades do CSS align-items: center; a
uma <div>
• rounded-full: para fazer uma imagem circular, e assim por diante.
Sério, não é possível listar todas elas porque existem muitas dessas classes
de utilitários. A melhor parte, contudo, é que não precisamos escrever
essas classes utilitárias e mantê-las em qualquer arquivo CSS global. Nós as
pegamos diretamente do Tailwind.

Você pode obter uma lista de todas as classes utilitárias que o Tailwind tem
a oferecer na página de documentação. Além disso, se você estiver
trabalhando no VS Code, poderá instalar uma extensão chamada Tailwind
CSS IntelliSense, que dará sugestões automáticas, enquanto você continua
digitando as classes utilitárias, conforme mostrado na imagem abaixo.

Como configurar o Tailwind CSS

Existem várias maneiras de configurar o Tailwind CSS em seu projeto, todas
mencionadas na documentação.

25
O Tailwind CSS funciona sem problemas com uma infinidade de estruturas
como Next, React, Angular e muito mais – e até mesmo no HTML OG(Open
Graph).

Para a demonstração prática abaixo, estou usando Tailwind CSS com uma
aplicação do Next. Para configurar uma aplicação do Next com o Tailwind
CSS diretamente, use o seguinte comando:
Com o npx:
npx create-next-app --example with-tailwindcss with-tailwindcss-app
ou com o yarn:
yarn create next-app --example with-tailwindcss with-tailwindcss-app
Uma vez que o projeto foi configurado, você pode começar a
próxima etapa para criar um componente básico de cartão.

Mãos à obra

Vamos construir um componente de cartão em um projeto do

Next.

// Arquivo Card.js
// a ser renderizado no index.js

import React from "react";

const Card = () => {

return (
<div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
{/* Imagem */}
<div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
<h1 className="absolute mx-auto text-center right text-2xl text-white">
Image goes here
</h1>
</div>

{/* Descrição */}

<div className="p-2 border-b-2">
<h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis

26
 beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
</h6>
</div>

{/* Stack de tecnologias utilizada */}

<div className="flex flex-wrap items-center m-2">
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#React
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Redux
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Javascript
</span>
</div>

{/* Links */}

<div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
<button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
Go to Project
</button>
<button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-
2">
Github
</button>
</div>
</div>
);
};

export default Card;

Isso resulta no cartão a seguir, que é renderizado na interface

do usuário:

27
Veja com que facilidade consigo estilizar o componente de cartão
sem sair do arquivo Card.js. Não há a necessidade de escrever
nenhum arquivo CSS extra.

Usando flex com a <div>, aplique a ela a regra de CSS display: flex;.
Quer adicionar position: relative; em uma <div>? Adicione
apenas relative na className e pronto.
Também podemos adicionar diferentes modificadores
como hover, active, focus e assim por diante para renderizar
condicionalmente classes utilitárias. É possível aplicar regras de
CSS complexas como esta:
.some-class-name {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

28
Basta mencionar space-x-2 na tag <div>. Legal, não é?
Temos que mencionar esses estilos explicitamente em algum
tipo de arquivo CSS global? Absolutamente, não! O Tailwind faz
isso automaticamente por nós. Essa é a beleza do Tailwind.

Ainda não terminamos... há muitas outras vantagens. Vamos vê-

las agora.

Vantagens do Tailwind CSS

O modo Just-In-Time (JIT) fornece tempos de construção

extremamente rápidos
Antes do Tailwind v3, ele limpava todos os estilos para remover quaisquer estilos não
utilizados, para que a compilação de produção permanecesse a menor possível.

De acordo com o Tailwind, a construção de produção costumava ficar entre 5 e 10 kB.

Essa, porém, é a história em produção. Em um ambiente de desenvolvimento, o CSS
pode ficar muito grande, especialmente se usarmos muitas configurações
personalizadas.

Com a v3 e depois dela, o Tailwind lançou um novo recurso chamado compilador Just-
in-Time. O compilador JIT evita compilar todo o CSS antecipadamente e compila apenas
o CSS como e quando precisamos dele.

Isso resulta em tempos de construção extremamente rápidos em todos os ambientes. E

como os estilos são gerados conforme precisamos deles, não há necessidade de limpar
os estilos não utilizados. Isso significa que o CSS em todos os ambientes será o mesmo.
Isso nos ajuda a nos livrar do medo de que qualquer CSS importante seja eliminado na
produção.

É opinativo e flexível ao mesmo tempo

O Tailwind CSS e opinativo. Ele específica algumas restrições quando se trata de estilo
e, se você me perguntar, se isso é bom, eu diria que sim, pois nos ajuda a manter a parte
do design para aqueles que realmente a entendem.

Basta olhar para uma das classes utilitárias para adicionar um box-
shadow na sua <div> (fonte):

29
Como você pode ver, existem apenas 8 variantes de sombra que o Tailwind fornece.
Existem valores predefinidos para deslocamento vertical e horizontal, desfoque,
propagação, cor e opacidade. É por isso que o Tailwind é opinativo.

Ele tenta dar uma opinião sobre quais valores de propriedade escolher em quase todas
as propriedades de estilo existentes. Acredite: na maioria dos casos, essas 8 variantes
(para box-shadow) serão mais do que suficiente para criar uma ótima interface de
usuário.

Por exemplo, no exemplo prático acima, usei shadow-lg na <div> pai principal, para
obter aquela bela sombra de caixa externa.

Usar a mesma variante de uma classe de utilitário específica em diferentes áreas da

interface do usuário também garante a uniformidade em toda a aplicação e resulta em
uma melhor experiência do usuário.

Caso, no entanto, você precise de algum valor realmente

personalizado para qualquer estilo em particular, pode obter isso
adicionando um tema personalizado no tailwind.config.js. Por
exemplo, para ter um shadow-3xl (o Tailwind não fornece shadow-
3xl para usar diretamente), você pode adicionar as seguintes
linhas no module.exports no tailwind.config.js:
module.exports = {

theme: {

extend: {
boxShadow: {

30
 '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}
}
}
}
Agora, com o advento do JIT, você também pode usar um valor
arbitrário entre colchetes [], como mostrado abaixo:
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
// O resto do código vai aqui
</div>
O uso de valores arbitrários pode ser útil quando você precisar de um estilo específico
em apenas alguns lugares. Neste caso, criar um tema para ele no tailwind.config.js pode
parecer desnecessário.

React Native List Views – Introdução e Exemplo

React Native List Views: A princípio o React Native fornece um conjunto de componentes para
a apresentação de listas de dados. Geralmente, você desejará usar o FlatList ou o SectionList. O
FlatListcomponente exibe uma lista de rolagem de dados alterados, mas estruturados de
maneira semelhante.

FlatList funciona bem para longas listas de dados, onde o número de itens pode mudar com o
tempo. Diferentemente dos mais genéricos ScrollView, os FlatList únicos processam os

31
elementos que estão sendo exibidos na tela, nem todos os elementos de uma só vez.

Nesse sentido o FlatList componente requer dois adereços: datae renderItem. data é a fonte
de informações para a lista. renderItem pega um item da fonte e retorna um componente
formatado para renderizar.

A princípio este exemplo cria um simples FlatListdado codificado. Cada item nos data
acessórios é renderizado como um Text componente. O FlatListBasics componente processa o
FlatList e todos os Text componentes.

import React, { Component } from 'react';

import { FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {

render() {
return (
<View style={styles.container}>
<FlatList
data={[
{key: 'Devin'},
{key: 'Dan'},
{key: 'Dominic'},
{key: 'Jackson'},
{key: 'James'},
{key: 'Joel'},
{key: 'John'},

32
 {key: 'Jillian'},
{key: 'Jimmy'},
{key: 'Julie'},
]}
renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
/>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
paddingTop: 22
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})

Entretanto se você deseja renderizar um conjunto de dados dividido em seções lógicas, talvez
com cabeçalhos de seção, semelhantes aos UITableViews no iOS, um SectionList é o caminho a
seguir.

import React, { Component } from 'react';

import { SectionList, StyleSheet, Text, View } from 'react-native';

export default class SectionListBasics extends Component {

render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'D', data: ['Devin', 'Dan', 'Dominic']},
{title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
]}
renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
renderSectionHeader={({section}) => <Text
style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,

33
 paddingTop: 22
},
sectionHeader: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
})

Enfim um dos usos mais comuns de uma exibição de lista é exibir dados que você busca de um
servidor. Para fazer isso, você precisará aprender sobre redes no React Native.

API: significado
Se você está se perguntando o que é API, em uma definição formal, esse conceito está
relacionado a um conjunto de rotinas e padrões estabelecidos por um software para
a utilização das suas funcionalidades por outros aplicativos.

O conceito de API nada mais é do que uma forma de comunicação entre sistemas. Ou
seja, elas permitem a integração entre dois sistemas, em que um deles fornece
informações e serviços que podem ser utilizados pelo outro, sem a necessidade de
algum dos sistemas conhecer detalhes de implementação do software.

Em outras palavras, é uma forma bem segura pela qual dois aplicativos trocam dados.
Assim, as APIs cuidam dessa comunicação em tempo real.

Para você entender melhor, usamos uma metáfora para explicar o significado de uma
API. Quando vamos a um restaurante, escolhemos um prato no menu e fazemos o
pedido ao garçom.

Em seguida, o garçom encaminha esse pedido à cozinha, que o prepara. No fim, o

garçom traz o prato pronto até a gente. Por fim, não sabemos como o prato foi
preparado, apenas recebemos o que solicitamos.

De forma geral, uma API funciona da mesma forma que o garçom em nosso exemplo.
Ao receber o pedido, a API o encaminha ao sistema responsável e, em seguida, devolve
o que solicitou.

34
 Importância das APIs
Hoje, por termos um mundo tão conectado, as APIs são essenciais para a entrega de
produtos cada vez mais ricos para os usuários.

Independente do produto que se deseja oferecer, seja ele um site, um aplicativo, um

bot, é muito importante a utilização do conceito de APIs integradas a sistemas para
trazer uma gama de funcionalidades para sua aplicação.

Podemos pensar na utilidade do que é API por dois pontos de vista: como produtor ou
consumidor.

Quando você produz, você está criando APIs para que outras aplicações ou sistemas
possam se integrar ao seu sistema. Isso não significa que você irá criar uma API apenas
para expor seu sistema a terceiros.

Vai depender do seu propósito, mas a API também pode ser apenas para seu uso, como
de uma interface sua para os clientes.

Seguindo nessa linha de raciocínio, imagine que você possua um sistema de comércio.
Ao criar uma API de acesso ao seu sistema, você possibilita a oferta de seus produtos
nas interfaces de seu interesse.

O que você vai expor de seu sistema na API depende do que deseja oferecer como
funcionalidade, mas poderia, por exemplo:

• listar produtos;
• ofertar promoções;
• efetivar vendas;
• realizar cobrança do pedido.

Algumas aplicações do conceito de API

Até aqui, exploramos o que é API e as possibilidades de você criar a API para facilitar a
integração com aplicações.

No entanto, hoje em dia já possuímos uma quantidade enorme de APIs que podemos
utilizar para enriquecer nossas aplicações, e são de todos os tipos. Vou citar apenas
algumas para ilustrar a gama de serviços e funcionalidades já existentes para
integração entre sistemas, que certamente já estão no seu dia a dia.

Pagamentos

Como exemplos de sistemas que oferecem APIs para pagamentos, temos:

35
• PagSeguro;
• Paypal;
• Iugu;
• Gerencianet;
• Cielo.

Todos eles vão oferecer uma infinidade de formas de pagamentos para sua aplicação.

Redes sociais

Umas vastas quantidades de redes sociais também oferecem exemplos de APIs que
podemos utilizar para enriquecer a experiência dos usuários em nossas aplicações.
Algumas deles são:

• Facebook;
• Twitter;
• Instagram;
• WhatsApp;

Essas APIs oferecem funcionalidades diversas, como:

• obter informações úteis sobre o usuário;

• criar opção de login utilizando o perfil da rede social, entre outras.

Localização

Uma das APIs mais populares quando falamos de localização é a do Google Maps. APIs
do tipo irão possibilitar que sejam oferecidos serviços e informações para o usuário de
acordo com sua localização, trazendo uma experiência muito mais rica.

Comércio eletrônico

Exemplos de APIs desse tipo possibilitam integrar com sistemas e ampliar a oferta de
produtos para venda, assim como fazer acompanhamento de compras realizadas.
Algumas plataformas que oferecem APIs nesse sentido são:

• Mercado Livre;
• eBay.

Esses são somente alguns exemplos de APIs, mas as possibilidades de integração são
enormes.

API: exemplo de uso e integração

Para exemplificar a facilidade que o conceito de APIs trouxe para a construção de nossas
aplicações, vou utilizar como referência a plataforma Take Blip, plataforma de chatbots
e contatos inteligentes.

36
 A plataforma não só proporciona uma forma simples de integrar com qualquer API,
como também traz algumas integrações já prontas, facilitando bastante a vida de quem
deseja aprender como criar um chatbot ágil.

O principal tipo de integração pronta que podemos pensar que a plataforma Take Blip
nos traz são com os canais onde o chatbot pode ser oferecido.

Para que um chatbot funcione dentro de um canal, cada canal também disponibiliza
uma API. É através dela que o chatbot será capaz de:

• receber e enviar mensagens;

• utilizar recursos suportados pelo canal, entre outras funcionalidades.

No entanto, cada canal oferece uma API diferente, o que vai requerer que você
conheça os detalhes da API para criar seu chatbot.

E se o bot estiver em mais de um canal, é mais de uma integração a ser feita. Utilizando
a plataforma Take Blip, não temos esse tipo de preocupação, pois a plataforma já é
integrada a cada um desses canais.

Em resumo, podemos criar um chatbot e, apenas habilitando na plataforma, ele

poderá estar no:

• Messenger;
• WhatsApp;
• SMS;
• Etc.

O que é e como usar o MySQL?

• O MySQL é um sistema gerenciador de banco de dados relacional de código aberto

usado na maioria das aplicações gratuitas para gerir suas bases de dados. O serviço
utiliza a linguagem SQL (Structure Query Language – Linguagem de Consulta
Estruturada), que é a linguagem mais popular para inserir, acessar e gerenciar o
conteúdo armazenado num banco de dados.
• Logo do MySQL (Foto: Reprodução) — Foto: TechTudo
• Na criação de aplicações web abertas e gratuitas, o conjunto de aplicações mais
usado é o LAMP, um acrônimo para Linux, Apache, MySQL e Perl/PHP/Python.
Nesse conjunto de aplicações, inclui-se, respectivamente, um sistema
operacional, um servidor web, um sistema gerenciador de banco de dados e
uma linguagem de programação. Assim, o MySQL é um dos componentes
centrais da maioria das aplicações públicas da Internet.

37
 O que é o Firebase de Google?
O Firebase de Google é uma plataforma digital utilizada para facilitar o desenvolvimento de
aplicativos web ou móveis, de uma forma efetiva, rápida e simples. Graças às suas diversas
funções, é utilizado como uma técnica de Marketing Digital, com a finalidade de aumentar a
base de usuários e gerar maiores benefícios econômicos.

Seu principal objetivo é melhorar o rendimento dos apps mediante a implementação de

diversas funcionalidades que farão do aplicativo um instrumento muito mais maleável, seguro
e de fácil acesso para os usuários.

O que podemos fazer com o Firebase?

Com o Firebase podemos:

• proporcionar uma interação dinâmica dos usuários utilizando o Firebase Authentication;

• conseguir que nossos aplicativos sejam visualizados e utilizados aplicando a
ferramenta compartilhar ou o Dynamic Links;
• enviar notificações a várias plataformas com o Cloud Messaging;
• criar análises de resultados com o Analytics.
Veja alguns exemplos do que podemos fazer com o Firebase:

• na hora de implementar funções, podem ser testadas com antecedência em um subconjunto

da base de usuários para verificar se funciona e a reação diante dela;
• comunique-se com seus usuários por In-app messaging — com ele é possível melhorar a
experiência do público e fidelizá-lo, além disso, pode guiá-los e convertê-los em clientes
potenciais.
Mas é tão importante assim? Com certeza!

A importância das funcionalidades do Firebase, é que, graças a elas, os developers ou

desenvolvedores podem adaptar a plataforma à medida das suas necessidades.

Otimizar um aplicativo nunca foi tão fácil!

Quais as principais caraterísticas do Firebase?

Essa plataforma móvel tem diversas caraterísticas. Lembraremos algumas delas.

1. Múltiplas plataformas suportam a ferramenta

O Firebase se encontra disponível para as principais plataformas móveis, seja Android, seja
iOS, seja a web.

2. Permite ganhar dinheiro

38
 Mediante o uso de Admob, o Firebase habilita a possibilidade de gerar dinheiro com anúncios
e publicidade.

3. Permite um desenvolvimento gratuito dos seus apps

Essa plataforma digital não exige pagamento para a iniciação, nem para seu uso.

O Firebase começa a cobrar quando você está em um nível mais avançado e experiente. Nessa
etapa, você pode solicitar planos de maior hierarquia, segundo o uso que quiser lhe dar.

4. Gera crescimento e desenvolvimento nos seus aplicativos

Essa é uma das caraterísticas mais importantes, uma vez que se centra no objetivo primordial
de tudo o que é Firebase.

Por meio dos serviços oferecidos, permite desenvolver suas aplicações, desde qualquer
dispositivo, de uma forma simples, segura e rápida.

Você também pode se interessar por estes outros conteúdos!

Google Instant Apps: o que é e quais os benefícios para o seu celular
Progressive Web Apps (PWAs): o que é e os melhores exemplos
Google Analytics anuncia unificação na mensuração app e web

Quais são os serviços que oferece?

Os serviços oferecidos podem ser divididos em 3 categorias:

No desenvolvimento
São diferentes serviços e com diversas utilidades.

• real time data base: nos ajuda dando uma base de dados em tempo real;
• autenticação: se executa para identificar os usuários por meio do e-mail ou das redes sociais;
• nuvem de armazenamento: armazenamento e envio de arquivos à escala de Google;
• hosting: se utiliza para publicar nosso site;
• remote config: é utilizado para modificar alguns aspectos do nosso app sem a necessidade de
atualizá-lo;
• test lab: serve para testar o aplicativo antes de publicá-lo;
• crash reporting: se utiliza para reportar erros do aplicativo.

Para fazer crescer nossos aplicativos e/ou negócio

Para fazer crescer os nossos aplicativos e, consequentemente, nosso negócio, nos dá a
possibilidade de:

• enviar notificações aos usuários com Notifications;

• permite mostrar os aplicativos de forma adequada nos resultados dos motores de busca, com
o uso de App indexing;

39
• proporciona a possibilidade de acessar a aplicação desde outros links e desde outros
aplicativos mediante Dynamic Links;
• permite fazer publicidade de nosso app usando AdWords;
• ajuda a monetizar o nosso aplicativo mediante a publicidade, utilizando AdMob.
Como podemos observar, existem múltiplas funcionalidades para conseguirmos fazer crescer
nosso negócio.

É importante considerar que os aplicativos, hoje em dia, representam um mercado que ainda
se está descobrindo e se mantêm em constante evolução, portanto, é fundamental entrar
nesse meio utilizando as melhores plataformas.

40