-
Notifications
You must be signed in to change notification settings - Fork 7
Introdução
Nesta secão você encontrará uma breve introdução à ES6, React, Redux, React-Native e ao Caronaboard; E alguns links para pesquisa.
Uma das caracteristicas de um projeto React Native é termos um número consideravél de dependencias externas. Procuramos fazer uso de bibliotecas que sejam bem documentadas e de facil entendimento, abaixo você encontra uma breve descrição de cada dependência e o link para consultar a documentação.
Firebase é uma plataforma que fornece alguns serviços comuns à aplicações mobile, para que possamos mover mais rapidamente. Atualmente usamos o serviço de banco de dados e autenticação.
Usamos Redux para gerenciar o estado da aplicação e Redux-thunk para criar ações asincronas.
react-native-vector-icons é uma lib que dispõem centenas de icones.
react-native-ui-kitten é uma lib para facilitar a estilização de componentes, eles tem disponivel uma coleção de mais de 40 telas prontas para uso chamado Kitten Tricks
react-native-navigation é uma implementação nativa de navegação para React-Native. React Native não possui um bom sistema de navegação por padrão, normalmente é necessário usar um lib para isso. Referência
A maior dificuldade encontrada ao trabalhar com React é [quase] sempre no uso e entendimento do ES6. O codebase do Caronaboard native em sua grande parte adota esta nova sintaxe e encorajamos aos contribuidores também adotarem. Nossa dica é ir aprendendo a medida que for encontrando sintaxe que não são familiares.
Abordarei um exemplo que causa confusões: Vejamos o arquivo: https://github.com/CaronaBoard/caronaboard-native/blob/master/src/modules/rideRequest/containers/RideOfferScreen.js
No topo do arquivo nos vemos:
import { saveRideOffer } from '../../../services/firebase'
import styles from './styles/RideOfferScreenStyles'
No primeiro import é um named export, ou seja, dentro do arquivo ../../../services/firebase existe um export com este exato nome, ao importar deste jeito estamos pegando aquilo que foi exportado com este nome.
Já o segundo export é um default export, em outras palavras ./styles/RideOfferScreenStyles está exportando algo que pode ser importado com qualquer nome. Neste exemplo demos um nome de styles mas poderia ser qualquer outra coisas.
A diferença de sintaxe é que named export precisam ter {} enquanto default exports não devem ter o {}.
Referências úteis:
- https://github.com/lukehoban/es6features
- http://es6-features.org/#Constants
- https://developer.mozilla.org/en-US/
React e React Native fazem jus ao slogan Learn Once, Write everywhere. Uma vez que você aprende react, migrar para React Native vai ser tranquilo.
O ReactJS, por exemplo, usa tags HTML para fazer o browser entender o que desejamos renderizar, no React Native precisaremos procurar qual componente seria similar. Você pode consultar a documentação AQUI.
Sugestões de material:
Estamos usando Redux para gerenciar o estado da aplicação.
Sugestões de material: