Começando um projeto no React Native em 2024

Instalando pacotes

Primeiramente, tenha o Node.js e o NPM instalados na sua máquina. Agora, vamos instalar o Expo CLI. Se você ainda não leu meu post onde explico o Expo e outros componentes do ecossistema React Native, clique aqui. Abra o diretório no seu editor de código e um terminal. Em seguida, digite o seguinte comando:

npm install -g expo-cli

Com o Expo instalado, podemos começar a criar o nosso app.

Criando o app

Utilizando o Expo, você pode escolher entre algumas opções de estrutura inicial para o projeto. Neste tutorial, utilizaremos a opção padrão. Digite o seguinte comando na linha de comando (você pode substituir my-app pelo nome que desejar):

npx create-expo-app my-app

Depois que o projeto for criado, você verá que foram gerados os diretórios e arquivos do aplicativo. Para explorar a pasta do seu app, digite:

cd my-app

Em seguida, inicie o ambiente de desenvolvimento local com o seguinte comando:

expo start

Agora, você pode escanear o QR Code exibido no terminal com seu celular utilizando o app Expo Go (disponível na Play Store e na App Store). Alternativamente, clique no link gerado no terminal (ex.: localhost:123) para acessar pelo navegador.

Entendendo o projeto

Criar um app pela primeira vez pode ser confuso, então explicarei os principais diretórios para ajudar você a se orientar dentro do projeto.

Diretório ‘app’

O diretório 'app' pode ser usado para organizar os arquivos JS/TS principais da sua aplicação. Caso ele não exista, você pode criá-lo. Dentro dele, é comum armazenar os componentes principais e outras partes importantes do app.

Se você escolheu um template com navegação por abas, encontrará um subdiretório chamado 'tabs', que contém os componentes acessados por meio da barra de navegação do app. Você pode editar esses arquivos, criar novos e salvar para visualizar as mudanças na web ou diretamente no app Expo Go.

Diretório ‘hooks’

Os hooks são funções que permitem usar recursos do React, como estado e ciclo de vida, em componentes funcionais. Na pasta ‘hooks’, você pode armazenar hooks personalizados criados para atender a necessidades específicas do seu sistema. Além disso, o React fornece hooks internos, como useState e useEffect, que são amplamente utilizados para gerenciar estado e efeitos colaterais, respectivamente.

Diretório ‘components’

O diretório ‘components‘ é onde geralmente são armazenados os componentes reutilizáveis da aplicação, que podem ser usados em várias partes do app. Esses componentes podem ser simples, como botões e formulários, ou mais complexos, dependendo da necessidade. Se o diretório não existir, você pode criá-lo para organizar melhor seu código e promover a reutilização de componentes em todo o projeto.

Diretório ‘assets’

O diretório assets é onde você deve armazenar arquivos estáticos, como imagens, fontes e ícones, usados na sua aplicação. Para facilitar a organização, é comum criar subpastas, como images, fonts e icons, dentro dele.

Arquivo ‘metro.config.js’

O arquivo metro.config.js é responsável por configurar o empacotador Metro, usado no React Native. Ele permite customizar como o Metro trata arquivos, como otimizações para produção ou a inclusão de novos tipos de arquivos no projeto.

Mais informações sobre as opções disponíveis podem ser encontradas na documentação oficial do Metro.

Arquivo ‘package.json’

O arquivo package.json contém informações essenciais sobre o projeto, como dependências, scripts e metadados. Ele é utilizado pelo NPM para gerenciar pacotes e executar tarefas de desenvolvimento, como inicializar o servidor local ou empacotar o app para produção.

Arquivo ‘app.json’

O arquivo app.json armazena configurações específicas para o Expo, como o nome do app, versão, ícones e splash screen. Ele é indispensável para customizar o comportamento do aplicativo e necessário durante o processo de publicação nas lojas.

Para aprender mais sobre as opções disponíveis, visite a documentação do app.json.

Saiba mais

Se você quer se aprofundar em como estruturar projetos em React Native, aqui estão alguns recursos úteis:

• Documentação oficial do React Native
• Expo: Ferramentas e guias para desenvolvedores
• React: Conceitos básicos do framework

Agora que você conhece os principais arquivos e diretórios, pode começar a personalizar seu app e explorar o universo do desenvolvimento mobile com React Native e Expo.