Fala galera, hoje o dataholic Michel Oliveira vai mostrar como iniciar um projeto com uma ferramenta sensacional, que ajuda muito na hora de criar um app com react native. Vem conferir!
Mas e aí? Você sabe o que é o Expo?
O Expo é um framework/plataforma utilizada no desenvolvimento de aplicações com React Native. É um conjunto de ferramentas e serviços construídos em torno de plataformas nativas e do 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.
Alguns requisitos
Existem duas ferramentas que você precisa para desenvolver aplicativos com o Expo: um aplicativo de linha de comando chamado Expo CLI para inicializar e servir seu projeto, e um aplicativo cliente móvel chamado Expo Go para abri-lo no iOS e Android. Qualquer navegador da web funcionará para abrir o projeto na web.
Expo CLI
Expo CLI é um aplicativo de linha de comando, que é a principal interface entre um desenvolvedor e as ferramentas do Expo. A Expo CLI também tem uma GUI baseada na web que aparece em seu navegador da web quando você inicia seu projeto. Você pode usar a GUI em vez da interface de linha de comando se ainda não estiver confortável em usar um terminal ou preferir GUIs, ambas têm a capacidade necessária.
Para instalar o Expo CLI você precisa ter instalado o Node.js LTS, Git e para os usuários de macOS e Linux precisão também do Watchman.
Expo Go
Expo Go é um aplicativo que está disponível nas lojas de apps da google e apple. Ele permite que você abra os aplicativos que estão sendo servidos através do Expo CLI apenas lendo o QR Code gerado no browser ou no terminal. Você pode baixar o expo go nas seguintes lojas:
Android Play Store - Android Lollipop (5) e superior.
iOS App Store - iOS 11 e superior.
Esclarecidos esses conceitos vamos agora pôr a mão na massa de fato.
Instalação
1- Primeiramente, instalamos o Expo CLI, para isso abra o terminal (ctrl+alt+t) e digite o seguinte comando:
$ npm install --global expo-cli
2- Verifique se a instalação foi bem-sucedida, se o retorno do comando abaixo for "Not logged in", isso significa que deu certo a instalação:
$ expo whoami
3- O próximo passo é instalar o Expo Go. Com seu dispositivo, vá até sua loja de aplicativos e busque por Expo Go, basta instalar como qualquer outro app.
4- Agora estamos prontos para criar nosso projeto com expo. Abra seu terminal (ctrl+alt+t) crie uma pasta para guardar o projeto, navegue para essa pasta:
$ mkdir project-expo && cd project-expo
5- Nessa pasta digite o comando para iniciar o projeto:
$ expo init hello-world
Ao digitar o comando acima, o expo perguntará com qual template você quer criar o porojeto:
Existem duas abordagens para criar aplicativos com ferramentas Expo, elas são chamadas de fluxos de trabalho, Managed workflow - "gerenciados" e Bare workflow - "nuas". A principal diferença entre as duas abordagens é que com o fluxo de trabalho gerenciado (Managed workflow), você apenas escreve JavaScript/TypeScript, e as ferramentas e serviços Expo cuidam de todo o resto para você. Já no fluxo de trabalho simples (Bare workflow), você tem controle total sobre todos os aspectos do projeto nativo, e as ferramentas e serviços do Expo são um pouco mais limitados.
Managed workflow
blank - um aplicativo mínimo tão limpo quanto uma tela vazia.
blank (TypeScript) - o mesmo que em branco, mas com configuração TypeScript.
tabs (TypeScript) - várias telas e guias de exemplo usando react-navigation e TypeScript.
Bare workflow
minimal - simples e minimalista, apenas o essencial para você começar.
Nesse caso vou escolher o blank sem TypeScript. Pressionando enter na opção escolhida o expo vai criar e configurar todo nosso projeto. Após a criação do projeto você pode entrar na pasta do projeto que no meu caso dei o nome de hello-world.
Dentro da pasta do projeto podemos iniciar o servidor do expo e gerar o QR Code para abrirmos o app com o expo Go, digite o seguinte:
$ expo start
No terminal irá aparecer o QR Code para que você possa ler com o app Expo Go, provavelmente o browser irá abrir também com o mesmo QR Code e algumas outras opções. Abra seu app Expo Go e leia o QR Code, o expo vai abrir o app em seu dispositivo:
App aberto no Android
Pronto! Você criou seu primeiro aplicativo com React Native. Agora vamos alterar essa mensagem no app:
Abra o projeto no VSCode ou seu editor de texto preferido (aposto que é o VSCode).
Com o projeto aberto, abra o arquivo App.js, esse é o arquivo onde podemos por nossos códigos. Vamos alterar o texto que está dentro da tag <Text>, altere para “Hello World!” e salvar o código.
Note no seu dispositivo, que ao salvar o código, a alteração é refletida instantaneamente no dispositivo, isso acontece graças a um recurso sensacional do React Native chamado de fast refresh, que permite obter feedback quase instantâneo para alterações em seus componentes.
O fast refresh vem habilitada por padrão, para desabilitar/habilitar você pode chacoalhar seu dispositivo para abrir o menu do desenvolvedor (developer menu) e clicar em Disable Fast Refresh.
Dev Tools
Então é isso galera, hoje aprendemos que o expo é uma ferramenta para desenvolvimento de aplicações com react native.
Vimos também que precisamos de apenas duas ferramentas para iniciar um projeto com expo, o Expo CLI e Expo Go, um aplicativo de linha de comando e um aplicativo para dispositivo android e iOS para abrir o app respectivamente.
Além disso o expo nos dá dois fluxos de trabalho, gerenciado (Managed workflow) onde os serviços do expo cuidam da maior parte das configurações, e simples (Bare workflow), onde você tem controle total sobre os aspectos do projeto nativo.
Agora você pode iniciar seus projetos sem medo de passar horas configurando um ambiente trabalhoso e pesado com react native CLI, android studio e emulador, o que demanda muito consumo de hardware do seu PC.