Entendendo o React Native: NPM, Expo, Metro e EAS
por Vinícius Bueno
Ao começar com React Native, é comum se deparar com termos essenciais para o desenvolvimento. Mas o que cada um realmente significa e como eles se conectam no fluxo de trabalho?
NPM
O NPM (Node Package Manager) nada mais é que o gerenciador de pacotes do Node.js (uma plataforma JavaScript para execução de código no lado do servidor). Nós podemos utilizá-lo para instalar, desinstalar e atualizar bibliotecas. Por exemplo, ao começar um projeto no React Native, usaremos o NPM para instalar o Expo CLI, com o comando:
npm install -g expo-cli
Nesse código, estamos executando o comando npm, usando o subcomando install para instalar um pacote. A flag -g indica que a instalação será global (disponível em todo o sistema), e o argumento expo-cli especifica o pacote a ser instalado.
É importante notar que existem outros gerenciadores de pacotes do Node.js, como o Yarn e o PNPM, que podem ser usados dependendo da sua preferência e do projeto que está desenvolvendo. Há uma discussão sobre esses gerenciadores, quanto à performance, segurança e usabilidade de cada um, que pretendo abordar em outro post futuramente.
Expo
O Expo é uma plataforma que complementa o React Native, oferecendo uma maneira rápida e intuitiva de montar projetos e ferramentas de desenvolvimento acessíveis por meio de CLI. Por exemplo, ele disponibiliza um link local para abrir no navegador e ver suas alterações em tempo real. Ao baixar o app Expo Go no smartphone, é possível visualizar essas alterações em tempo real, facilitando o desenvolvimento. O Expo também disponibiliza APIs para funcionalidades móveis, como geolocalização e câmera, sem a necessidade de instalar pacotes adicionais na versão gerenciada.
Metro
Por trás do Expo, roda o empacotador (bundler) de JavaScript Metro, desenvolvido especialmente para o React Native. No Expo, o Metro é utilizado, por exemplo, para garantir que os arquivos sejam processados e preparados para execução. O Metro utiliza o Babel, que compila o código JS, convertendo código moderno para uma versão compatível com navegadores e dispositivos mais antigos (exemplo: JS ES6 para JS ES5). Dentro do diretório raiz de um projeto React Native, é comum encontrar o arquivo metro.config.js, onde podemos especificar como o Metro deve lidar com diferentes arquivos e recursos, a fim de otimizar o código para produção.
EAS
O EAS (Expo Application Services) é um serviço em nuvem da Expo que, utilizando o Metro, empacota os arquivos e dependências do seu projeto React Native, além de gerenciar o lançamento e as atualizações do seu aplicativo para a App Store e Play Store. O EAS oferece ferramentas como EAS Build para criar os pacotes de aplicativo e EAS Submit para facilitar o envio às lojas de aplicativos. Também é possível criar um APK do seu app para instalar no seu dispositivo Android pela CLI EAS (é necessário instalar o pacote), seguindo as configurações especificadas no arquivo eas.json.
Extra: package.json
Se você já usou o NPM anteriormente, com certeza já viu esse arquivo no seu projeto. Nele, são especificados os dados sobre os pacotes instalados, além da versão do seu app, nome e configurações de scripts.
O package.json é essencial para o NPM, pois é onde são listadas as dependências do projeto, scripts e outras configurações importantes, como o nome do projeto e a versão. Quando você utiliza o NPM para instalar pacotes, o package.json registra essas dependências nas seções dependencies ou devDependencies.
É isso…
Espero que você tenha aprendido algo! Em breve, lançarei mais posts por aqui. Se tiver alguma sugestão, fique à vontade para me chamar no meu Instagram @insta ou por e-mail, em vbdev.contato@gmail.com. Abaixo estão as referências que utilizei para escrever este post. Aliás, um dos meus próximos textos será sobre recomendações de podcasts sobre programação. Até mais!
Referências
Episódio 292 do podcast React Native Radio, falando sobre Metro:
Artigo de Kulwindar Singh no Medium, explicando package.json
