Nessa aula você irá conhecer a estrutura de um projeto React Native tradicional, criado com a sua CLI própria. É importante conhecer essa estrutura padrão pois o Expo existe justamente sobre essa base, utilizando os mesmos conceitos mas facilitando o desenvolvimento ao trazer uma estrutura mais completa e opinada. Além disso, projetos que precisam utilizar muito código nativo as vezes precisam trabalhar com a maior liberdade que a CLI do React Native oferece, então conhecer essa estrutura é útil.
- Para criar um novo projeto precisamos apenas rodar o comando a seguir:
Obs.: se você ainda não possuir o pacote da react-native-cli instalado globalmente não tem problema, ao rodar o comando ele irá solicitar que você instale apertando “y”.
npx react-native init MyFirstProject
- Ao abrir a pasta do projeto com o editor nós vamos nos deparar com muitos arquivos e pastas. Iremos falar rapidamente para que serve cada um deles.
- A primeira pasta é a tests. Ela contém um arquivo de teste de exemplo e é onde nós normalmente colocaríamos os testes automatizados do projeto.
- Abaixo dela está a pasta .bundle com o arquivo config. Ele é o arquivo de configuração do Bundler, um gerenciador de gems do Ruby, ou seja, algo parecido com o npm que temos no Javascript.
- A seguir temos as pastas android e ios. Elas são importantes porque com elas é possível interagir com os projetos nativos das respectivas plataformas, e possuem o conteúdo que normalmente teríamos em projetos tradicionais para android e ios usando Java/Kotlin e Objective-C/Swift.
Um exemplo de uso delas em projetos React Native é quando vamos publicar os nossos aplicativos e precisamos de configurações específicas da plataforma, ou então quando precisamos lidar diretamente com recursos nativos que não são acessíveis pelo RN.
- Temos no projeto também a pasta node_modules, como em qualquer outro projeto Node.
- Agora na parte dos arquivos podemos ver que temos muitos, o que pode parecer intimidador, mas eles são mais simples do que aparentam. Como um projeto React Native usa muitas ferramentas ao mesmo tempo acabamos ficando com muitos arquivos de configuração dessas ferramentas. Vamos falar rapidamente sobre cada um dos arquivos de configuração:
- .buckconfig arquivo de configuração do Buck, uma ferramenta de build criada pelo Facebook.
- .eslintrc.js arquivo de configuração do ESLint, biblioteca de correção e formatação de código javascript.
- .flowconfig arquivo de configuração do Flow, biblioteca de checagem de tipos estática.
- .gitignore lista de arquivos ignorados do repositório git.
- .node-version arquivo que especifica a versão do Node a ser usada pelo projeto para gerenciadores de versão.
- .prettierrc.js arquivo de configuração Prettier, um formatador de código.
- .ruby-version arquivo que especifica a versão do Ruby a ser usada pelo projeto para gerenciadores de versão.
- .watchmanconfig arquivo de configuração do Watchman, ferramenta usada para detectar mudanças no código do projeto e automaticamente refazer o build e subir o projeto no nosso dispositivo/emulador.
- babel.config.js arquivo de configuração do Babel, um compilador de código Javascript usado para coisas como JSX e compatibilidade de versões da linguagem.