React Native 4 Dummies

An intro to React Native for iOS developers

https://github.com/fjcaetano/talks

Transcript

1. React Native 4 Dummies Flávio Caetano Senior Developer
2. 1. O que 2. Como 3. Demo 4. Por quê
3. O que é React Native
4. 1. Plataforma para criar React-like apps 2. JavaScript & JSX 3. Objective-C & Swift 4. Java 5. Híbrido (one app to rule them all) 6. Nativo
5. 1. Web app 2. Conversor de código 3. DOM React Native não é
6. Como RN Funciona
7. 1. Componentes ⟷ Views Nativas 2. Props → atributos públicos imutáveis 3. State → atributos mutáveis Conceitos
8. Contexto JS Contexto Nativo Inicialização Componentes Alocação dinâmica das views Interação Callback do Componente queue JS Main queue + outras Atualiza UI
9. 1. constructor 2. componentWillMount 3. render 4. componentDidMount 5. componentWillUnmount Lifecycle do componente
10. 1. componentWillReceiveProps 2. shouldComponentUpdate 3. componentWillUpdate 4. render 5. componentDidUpdate Update do componente
11. 1. Packager gera um bundle do JS 2. Queue JS executa o bundle 3. Main queue cuida da UI 4. Views alocadas dinamicamente 5. Bridging apenas quando necessário Recapitulando
12. Animações
13. 1. Rodam no contexto nativo 2. Declarativas 3. Interpolação (matriz de transformação)
14. Contexto JS Contexto Nativo Declaração queue JS Main queue Inicialização Executa animação Frame 1 Executa animação Frame 2 Executa animação Frame 3
15. Demo
16. Por quê usar RN?
17. 1. Tempo de iteração ↓ 2. 1 projeto para 2 plataformas 3. 1 time de desenvolvimento mobile 4. Performance aceitável 5. 99% JS + 1% nativo 6. Cocoapods libs nativas + ∞ libs JS 7. Tchau Xcode/Android Studio
18. Obrigado github.com/fjcaetano @flavio_caetano