Template avançada para aplicações React Native com a estrutura utilizada na Rocketseat 🚀
MIT License
Este projeto visa a criação de um template que possa ser utilizado no momento de criação de projetos utilizando React Native, visto que o processo de instalação e configuração das libs no início de um projeto podem gerar certa complexidade e muitas vezes até erros que atrasam o processo, atrapalhando assim o fluxo de desenvolvimento.
Abaixo segue o que foi utilizado na criação deste template:
Para conseguir utilizar o template, seja através do React Native CLI ou com uma cópia local dos arquivos, siga os passos abaixo.
Antes de seguirmos para as configurações e uso do template, é ideal que você tenha o ambiente configurado para criar e testar aplicativos em React Native, para isso você pode seguir o guia do link abaixo:
Ambiente React Native (Android/iOS)
A estrutura de arquivos está da seguinte maneira:
rocketseat-advanced
├── src/
│ ├── config/
│ │ └── ReactotronConfig.js
│ ├── images/
│ │ ├── rocketseat_logo_roxa.png
│ │ └── rocketseat_logo.png
│ ├── pages/
│ │ └── Main/
│ │ └── index.js
│ ├── services/
│ │ └── api.js
│ ├── store/
│ │ ├── ducks/
│ │ │ └── index.js
│ │ ├── sagas/
│ │ │ └── index.js
│ │ └── index.js
│ ├── index.js
│ └── routes.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── babel.config.js
├── dependencies.json
├── devDependencies.json
├── index.js
├── jsconfig.js
├── LICENSE
├── package.json
└── README.md
Serão explicados os arquivos e diretórios na seção de Edição.
react-native init AwesomeExample --template rocketseat-advanced
App.js
da raiz, pois o arquivo index.js
agora aponta para a pasta src.Com isso o projeto será criado com todas as dependências do template devidamente instaladas e linkadas, tal como os arquivos de configuração que são copiados para o projeto.
Para que os gestos sejam habilitados no Android é necessário um passo a mais, que é bem simples, abra o arquivo android/app/src/main/java/<pacote_do_projeto>/MainActivity.java
, e comece importando os pacotes como abaixo:
// ...
import com.facebook.react.ReactActivity;
// Importações adicionadas
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
Feito a importação vamos criar um método novo, logo abaixo do getMainComponentName()
, ficando:
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() { ... }
// Método adicionado
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName()) {
@Override
protected ReactRootView createRootView() {
return new RNGestureHandlerEnabledRootView(MainActivity.this);
}
};
}
}
Nesta seção haverão instruções caso você queira editar o template, explicando para que os diretórios são utilizados e também os arquivos de configuração.
src - Diretório contendo todos os arquivos da aplicação, é criado um diretório src
para que o código da aplicação possa ser isolado em um diretório e facilmente portado para outros projetos, se necessário;
config - Diretório para guardar os arquivos de configuração da aplicação, por exemplo, a configuração de uso do Reactotron e configuração de inicialização do Firebase;
reactotron-redux
e reactotron-redux-saga
, para ser usado na aplicação;images - Diretório para armazenar imagens em geral que possam ser utilizadas na aplicação, esse diretório pode ser renomeado para assets
e dentro de assets
criar um novo diretório para guardar somente as imagens, assim é possível ter um diretório para guardar todo tipo de arquivo, e não apenas imagens;
pages - Diretório onde ficam as páginas (telas) da aplicação, como forma de padronização e boas práticas toda página fica dentro de um diretório com seu nome;
Main - Diretório exemplo de uma página cujo nome é Main, por padrão foi adotado usar sempre como nome do diretório o nome da página em camelCase, dentro desse diretório é necessária a criação ao menos do arquivo index.js
;
services - Diretório onde serão criados os arquivos relacionados a serviços utilizados na aplicação, por exemplo, requisições HTTP, autenticação com Firebase ou qualquer outro serviço que for utilizado;
store - Diretório onde será criada toda a estrutura do Redux para a aplicação, como os Ducks (Reducers + Action Types + Action Creators), os Sagas e um arquivo para centralizar toda essa configuração e disponibilizar para o restante da aplicação;
ducks - Diretório destinado a centralizar os Ducks da aplicação para padronização na estrutura relacionada ao Redux;
combineReducers()
;sagas - Diretório destinado a centralizar os Sagas da aplicação para padronização na estrutura relacionada ao Redux;
index.js - Arquivo responsável por executar a configuração para o funcinamento do Redux + Redux Saga, dentre suas funções estão: criar um Middleware para monitorar as Actions disparadas na aplicação, aplicar o middleware criado juntamente com um Enhancer que monitora o fluxo de uma função do Saga, criar o store global da aplicação combinando os reducers existentes e exportar o state criado;
index.js - Arquivo responsável por centralizar o código do diretório src
, nele é inserido o HOC Provider do react-redux
que é o responsável por disponilizar o state global para a aplicação, e dentro do Provider são chamadas as rotas tal como qualquer outra configuração que precise ser executada na inicialização da aplicação, ele é como um Entry Point do diretório src
;
routes.js - Arquivo com as configurações de navegação da aplicação, nele são criados os Navigators disponibilizados na biblioteca React Navigation;
.editorconfig - Arquivo destinado à configuração do plugin Editor Config, que padroniza algumas configurações para o editor em diferentes ambientes;
.eslintrc.json - Arquivo de configuração do ESLint, é nele que são inseridas as regras e configurações de Linting do projeto, tal como a configuração do Resolver para o Babel Plugin Root Import e configuração da variável global __DEV__
;
babel.config.js - Arquivo de configuração do Babel, é nele que é configurado o Babel Plugin Root Import para aceitar imports absolutos na aplicação usando o diretório src
como raiz;
dependencies.json - Arquivo contendo apenas um objeto com a lista de dependências que devem ser instaladas na aplicação, vale lembrar que as dependências que já vem por padrão no projeto como react
e react-native
não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;
devDependencies.json - Arquivo contendo apenas um objeto com a lista de dependências de desenvolvimento que devem ser instaladas na aplicação, vale lembrar que as dependências de desenvolvimento que já vem por padrão no projeto como @babel/core
, @babel/runtime
, entre outras, não precisam estar nessa lista, a menos que você queira gerenciar a versão dessas libs;
index.js - Arquivo raiz da aplicação, também chamado de Entry Point, é o primeiro arquivo chamado no momento do build e execução da aplicação, nele é chamado o arquivo src/index.js
que por sua vez chama as rotas da aplicação;
jsconfig.json - Arquivo de configuração do JavaScript no Editor, ele é o responsável por ativar o Auto Complete de códigos JavaScript na aplicação;
package.json - Diferente dos projetos comuns, esse arquivo tem as configurações necessárias para a publicação do Template no NPM, para saber mais sobre isso veja a seção abaixo.
Para publicar um template como esse, o processo é bastante simples e rápido.
Crie uma conta no site do NPM;
Com a conta criada execute o comando abaixo e insira suas credenciais;
npm login
Basta abrir o arquivo package.json
e modificar as informações de acordo com o seu template, mas as informações mais importantes são duas, o name
e o version
, que são os únicos que tem restrições, seguem abaixo as restrições:
name
sempre deve começar com o prefixo react-native-template-
seguido do nome do seu template;@<nome_da_organization>
no nome do pacote;name
deve ser único, não podendo ser igual ao de um template já publicado;version
deve ser atualizada a cada publicação, se o template está na versão 0.0.1 e é preciso publicar uma atualização no mesmo, a version
deve ser diferente e superior a versão atual, por exemplo, 0.0.2;Após configurar corretamente o package.json
basta executar no terminal/prompt o comando npm publish
;
Com a publicação finalizada o template deve ficar disponível através do link https://www.npmjs.com/package/react-native-template-<nome_do_template>
.
Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada.
git checkout -b feature/FeatureIncrivel
)git add .
)git commit -m 'Adicionando uma Feature incrível!
)git push origin feature/FeatureIncrivel
)Para testar o template de um caminho local, coloque o caminho absoluto junto com o prefixo file://
react-native init AwesomeContribution --template file:///Users/Dev/contributions/react-native-template-rocketseat-advanced
Distribuído sob a licença MIT. Veja LICENSE
para mais informações.
Rocketseat - Github - [email protected]