Construindo primeiro aplicativo mobile com Expo
O mercado de tecnologia é bastante movimentado e novas tendências sempre aparecem. Atualmente, o desenvolvimento mobile é o que mais ganhou força nesses últimos anos e o mercado tem bastante vaga nessa área, para ter uma noção em 2021 houve um aumento de 600% na procura de profissionais da área. E um aumento de salário de 10% a 20% nesse setor. As tecnologias que mais ganharam destaque nesse período foram o Flutter e o React Native. Então, a ideia desse artigo é para você que se interessou pela área e é iniciante e não sabe por onde começar. Trarei uma pequena introdução de como construir um aplicativo mobile usando Expo. De forma bem resumida, a Expo é um framework que te ajuda a desenvolver aplicativos mobile usando por baixo o React Native.
Sobre o Expo
A Expo é um framework que usa como base para o desenvolvimento mobile o React Native, uma biblioteca criada e mantida pelo Facebook. O legal sobre essa ferramenta é que você não precisa ter instalado o Android Studio e todo seu ecossistema para rodar sua aplicação. Você consegue do seu celular rodar o seu projeto através do aplicativo que eles disponibilizam para baixar. E pode ser feito sem está conectado ao seu PC. Maneiro né?!
A Expo tem várias bibliotecas prontas dependendo de sua necessidade, ajudando muito no desenvolvimento.
Instalação
Primeiro, vamos começar com a instalação. Você pode começar instalando a CLI usando esse comando:
npm install -g expo-cliCaso for usar o npx para criar o projeto, não é necessário a etapa de instalação
Criando Primeiro Projeto
Para criarmos o primeiro projeto passamos esse comando no terminal:
expo init nomeProjeto
npx create-expo-app nomeProjetoApós isso, a expo irá fazer é fornecer alguns modelos para você escolher.
Para explicação desse artigo eu estou usando o minimal
Com o projeto criado, você pode começar a trabalhar nele em qualquer IDE de sua preferência.
Como funciona o React Native
O React Native usa como linguagem o Javascript para sua construção, mas pode ser usado também o Typescript. O que acontece é que os componentes do react native interagem com as APIs nativas tanto do Android quando do IOS fazendo com que tenha uma renderização de componentes nativos. Então, um único código pode ser visualizado nas duas plataformas. Além disso, ele é bem semelhante ao ReactJS usado na web, única diferença são as tags usadas. No ReactJS usamos as tags HTML e no React Native usamos da própria biblioteca. Segue um exemplo:
REACTJS
<div>
<p>Olá! Seja bem-vindo!</p>
</div>REACT NATIVE
<View>
<Text>Olá! Seja bem-vindo!</Text>
</View>Estrutura Padrão do Projeto (Expo)
Selecionando o minimal na criação do projeto.
Criando Hello World!
Agora que conseguiu criar seu projeto, vamos criar na aplicação seu primeiro Hello World.
- Vamos abrir o arquivo App.js
- Com App.js aberto vamos alterar o conteúdo que está dentro do return
Para você que não entendeu o que esse código tá fazendo, vou explicar brevemente aqui. Ele tá criando uma função App que é onde o seu aplicativo se inicia e retorna uma renderização de um componente. O View é como se fosse uma div do html, o Text como se fosse as tags referente a texto no html e o Stylesheet é como se fosse o CSS. Cada tag do react native recebe um parametro style que fica responsável pela estilização do componente. O StatusBar ele fica responsável pela barrinha de status do smartphone.
- Vamos agora editar o texto que está no componente Text
- Agora para podermos ver a alteração feita, vamos rodar o aplicativo. Vamos executar o seguinte comando:
expo start --tunnelEste comando vai fazer com que você consiga rodar o seu aplicativo no seu celular sem precisar tá conectado com ele no notebook, para isso, precisa ter o aplicativo do (expo) instalado no seu smartphone. Caso queira outra maneira é só seguir a documentação.
- Estilizar o componente Text
Agora que seu aplicativo rodou e está funcionando certinho, vamos dar uma cara nova para ele. Repare que logo abaixo da função App tem uma variável chamada “styles” e é nela que vamos mexer. Iremos criar logo abaixo do container uma propriedade “text” que irá receber alguns parâmetros. A estilização é bem parecida com que acontece na Web, a diferença que não temos um traço para separar as palavras. Para a propriedade “text” vamos colocar um tamanho maior de texto, uma espessura para ela e uma cor. Ficando da seguinte maneira:
Repare que se você olhar o aplicativo rodando vai notar que essas alterações não foram feitas. Isso porque não passamos para os componentes cada estilização. Então vamos para o próximo passo.
- Passando o styles para o componente Text
Agora que criamos a propriedade “text” no styles, vamos passar isso para o componente. Para isso, iremos no componente Text e escrever uma propriedade chamada “style”. A maioria dos componentes recebe essa propriedade e é nela que passamos todas as estilizações que queremos fazer para aquele componente. Então ficará assim o código:
<Text style={styles.text}>Hello World!</Text>
Agora é salvar o código alterado e ver a modificação no seu aplicativo. Se você conseguiu chegar até aqui, parabéns! Você já tem os princípios básicos para construir um aplicativo mobile usando a Expo e React Native.
Conclusão
A Expo foi desenvolvido para atender tanto desenvolvedores iniciantes da área até aqueles mais experientes, entregando várias implementações interessantes de acordo com seu projeto.
Se gostou, comenta, curte! E se tiver dificuldade não deixa de perguntar.
Referências
