Como Criar um Projeto React Native
React Native continua sendo uma das tecnologias mais populares para o desenvolvimento de aplicativos móveis multiplataforma. Criar um projeto React Native envolve algumas ferramentas modernas e etapas que atualizam práticas comuns. Este guia vai te ajudar a começar.
1. Pré-requisitos
Antes de começar, certifique-se de que você possui os seguintes itens instalados e configurados:
- Node.js (versão mais recente): Pode ser baixado em Node.js.
- npm (instalado automaticamente com o Node.js) ou yarn (opcional).
- Git: Necessário para controle de versão e clonar repositórios.
- Editor de código: Recomendado o Visual Studio Code.
Ambiente de desenvolvimento:
- Para Android: Android Studio (com SDK configurado).
- Para iOS: Xcode (somente em dispositivos macOS).
Certifique-se de ter o Expo CLI ou o React Native CLI instalado. Este tutorial aborda ambos.
2. Criando um Projeto com Expo
Expo facilita o processo de criação e desenvolvimento de projetos React Native.
Instale o Expo CLI:
npm install -g expo-cli
Crie o projeto:
expo init meu-projeto
Durante a configuração, escolha um template:
- Blank: Um projeto vazio.
- Blank (TypeScript): Com suporte a TypeScript.
- Tabs (TypeScript): Com abas de navegação pré-configuradas.
Navegue até o diretório do projeto:
cd meu-projeto
Inicie o servidor de desenvolvimento:
expo start
Execute no dispositivo ou emulador:
- No smartphone, escaneie o QR code com o aplicativo Expo Go.
- No emulador, selecione a opção “Run on Android device/emulator” ou “Run on iOS simulator” no terminal Expo.
3. Criando um Projeto com React Native CLI
Se você precisa de mais controle ou deseja evitar as limitações do Expo, use o React Native CLI.
Instale o React Native CLI:
npm install -g react-native-cli
Crie o projeto:
npx react-native init MeuProjeto
Isso criará um projeto configurado com React Native.
Navegue até o diretório do projeto:
cd MeuProjeto
Execute o projeto:
- Para Android:
npx react-native run-android- Para iOS:
npx react-native run-ios
Certifique-se de que os emuladores estão configurados corretamente.
4. Estrutura do Projeto
Dentro do projeto criado, você encontrará a seguinte estrutura de pastas:
android/: Configurações e arquivos do Android.ios/: Configurações e arquivos do iOS.src/: Crie esta pasta para organizar os arquivos do projeto.App.js: Ponto de entrada do aplicativo.
5. Configurando Dependências e Bibliotecas
- Instale pacotes adicionais: Por exemplo, para navegação:
npm install @react-navigation/native
- Configure as bibliotecas: Algumas bibliotecas, como o React Navigation, podem exigir configurações extras. Sempre leia a documentação oficial.
- Adicione fontes e imagens personalizadas: Crie uma pasta
assets/na raiz do projeto e organize os recursos.
6. Boas Práticas
- Use TypeScript: Adicione suporte digitado para maior segurança.
npx expo install typescript- Escreva testes: Use ferramentas como Jest ou React Native Testing Library.
- Organize seu código: Adote padrões como separação de componentes, serviços e estilos.
7. Recursos Adicionais
- Documentação do React Native
- Documentação do Expo
- Comunidades como Stack Overflow e GitHub.
Agora você está pronto para começar seu próximo projeto React Native! Boa sorte e boa codificação! 🚀
