React Native 4 Dummies Flávio Caetano Senior Developer 

1. O que 2. Como 3. Demo 4. Por quê 

O que é React Native 

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 

1. Web app 2. Conversor de código 3. DOM React Native não é 

Como RN Funciona 

1. Componentes ⟷ Views Nativas 2. Props → atributos públicos imutáveis 3. State → atributos mutáveis Conceitos 

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 

1. constructor 2. componentWillMount 3. render 4. componentDidMount 5. componentWillUnmount Lifecycle do componente 

1. componentWillReceiveProps 2. shouldComponentUpdate 3. componentWillUpdate 4. render 5. componentDidUpdate Update do componente 

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 

Animações 

1. Rodam no contexto nativo 2. Declarativas 3. Interpolação (matriz de transformação) 

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 

Demo 

Por quê usar RN? 

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 

Obrigado github.com/fjcaetano @flavio_caetano