React Native Template App

Template projeto React-native React Native

Arquitetura escolhida para separar UI de lógica de negócio.

Arquitetura

• Presentational Components & Containers(Screens)

  Presentational components => parte react, componentes menores; Containers => parte redux/saga (containers contém presentational components e conectam tudo ao redux/saga;

  Post do Dan Abramov sobre o assunto.

• State/Store com Redux Redux.

  Redux facilita o compartilhamento de estado entre todos os componentes da aplicação, evitando passar props entre diversos componentes.

  Com Redux, o estado é compartilhado utilizando stores globais, e alterações de estado são previsíveis: actions são aplicadas por reducers ao estado/store.

• Chamadas Asyncronas são gerenciadas com Redux Saga.

  Sagas são disparadas por Redux Actions e também podem alterar a Store redux, utilizando Javascript generator (yield).

Links auxiliares

• Pastas estrutura de pastas do projeto
• Redux gerenciar estado global da aplicação
• Redux Persist Persiste store na AsyncStorage
• Redux Sagas controlar fluxos asyncronos
• React Navigation NavigationService Usa navegaçao como um servico para tratar as rotas e adicionar splash screen
• prettier & eslint configurados pra react-native

OPCIONAL - Bibliotecas auxiliáres para facilitar a integracao com redux e axios - não obrigatórias

• reduxsauce (v0.7) to facilitate using Redux
• apisauce facilita usar o axios axios

Pastas

• App/Components: presentational components (telas)
• App/Config: configuracao global do app (variáveis, funções)
• App/Containers: container components/ Screens - contém lógica redux
• App/Images: imagens da aplicacao
• App/Services: API
• App/Redux/Sagas: redux sagas
• App/Redux/Stores: Config para criar store, aplicar middlewares, sagas, etc
• App/Redux/Actions: actions e actions creators
• App/Redux/Reducers: reducers
• App/Redux/Helpers: helpers - auxiliam em funcoes get na store, padronizando chamadas
• App/Theme: thema para o app

Requisitos

• Node 8.+
• Xcode 9.+

Também instalar as dependências requeridas para React Native.

• Android development
• iOS development

Utilizando o projeto

• clonar o repositório
• remova qualquer histórico do git: rm -rf .git/
• crie um novo projeto git: git init
• npm install
• renomear o projeto utilizando reacnt-native-rename, conforme abaixo:

$ npm install react-native-rename -g
$ git checkout -b rename-app
$ react-native-rename <novoNome> -b <com.agileteam.novoNome>

// Remove pastas android e ios antigas
$ rm -rf android/ ios/

// Regerar pastas android e ios com novo nome do app
$ react-native upgrade

$ react-native link 

Rodando o projeto

• react-native run-android (lembre-se de já ter o emulador ou um telefone android conectado)
• react-native run-ios (lembre-see de já ter o simulator ou um telefone iPhone conectado)

Build para distribuição Betas

Beta builds