Au 01 - Mobile - React Native - Configurando ambiente e criando projeto - Mestres BEGIN

Neste primeiro vídeo da série, focamos na configuração inicial do ambiente para desenvolvimento com React Native utilizando o Expo, preparando o terreno para o projeto prático que desenvolveremos nas próximas aulas.

Por que usar Expo?

O Expo simplifica o desenvolvimento React Native oferecendo:

• Fácil configuração inicial
• Ferramentas prontas para desenvolvimento
• Possibilidade de testar em dispositivos físicos
• Serviços adicionais como publicação nas app stores

Ideal para iniciantes e projetos que não requerem integração profunda com código nativo.

Pré-requisitos

Para começar, você precisará instalar:

1. Node.js - Versão LTS recomendada
2. Visual Studio Code - Editor de código preferencial
3. Git - Para controle de versão
4. Android Studio (Windows/Linux) ou Xcode (Mac) - Para emuladores

Criando o Primeiro Projeto

Passo a passo para iniciar:

1npx create-expo-app minicurso-react-native --template blank-typescript

Este comando cria um projeto limpo com TypeScript pré-configurado.

Executando o Projeto

Após criar o projeto:

1. Acesse a pasta do projeto
2. Execute npm start
3. Escolha como visualizar:
   • Expo Go no celular (mesma rede)
   • Emulador Android (tecla "a")
   • Simulador iOS (tecla "i")
   • Navegador web (tecla "w")

Configurando Emulador Android

Para quem usa Windows/Linux:

• Instale o Android Studio
• Acesse o Device Manager
• Crie um dispositivo virtual com API 31 (Android 12)
• Recomendado: Pixel 4 como dispositivo base

Fluxo de Desenvolvimento

Com tudo configurado:

• Edite o arquivo App.tsx
• Salve as alterações
• O Fast Refresh atualiza automaticamente
• Para recarregar manualmente:
  • Tecla "R" no terminal
  • Balancar dispositivo (gesto no emulador)

Considerações Finais

Com esta configuração inicial:

• Temos um ambiente completo para desenvolvimento mobile
• Podemos testar em múltiplas plataformas
• O fluxo de edição-teste é ágil e eficiente

Próximos passos:

• Apresentação do projeto que desenvolveremos
• Primeiros componentes e estilização
• Navegação entre telas

Dicas importantes:

• Mantenha suas ferramentas atualizadas
• Explore as configurações do VS Code para React Native
• Familiarize-se com os atalhos do Expo CLI
• Considere usar um dispositivo físico para testes mais realistas

Esta base sólida de configuração será fundamental para todo o desenvolvimento que faremos no curso. Na próxima aula, começaremos a colocar a mão na massa no projeto prático!