CWI: Treinamento React-Native

Treinamento em React-Native para CWI

Cronograma

• Introdução
  • O que é React-Native?
  • Que problemas ele resolve?
  • Tecnologias e conhecimento envolvido.
• React: o core de tudo
  • O que é React?
  • Entendendo estrutura de componentes.
  • Entendendo renderização e props.
  • Entendendo estado.
  • Criando nosso primeiro componente.
• React-Native
  • Parte 1: React para apps
    • Entendendo as semelhanças e diferenças entre React e React Native.
    • Executando o projeto pela primeira vez.
    • Criando nosso primeiro componente.
  • Parte 2: Componentes embarcados
    • Visualização dos componentes que já existem.
    • Tour pela documentação.
  • Parte 3: Estilizando componentes
    • O que é StyleSheet?
    • Diferenças entre CSS e StyleSheet.
    • Organizando elementos na tela com flex-box.
  • Parte 4: Textos
    • Como utilizar.
    • Centralizando regras de exibição.
    • Criando componentes reutilizáveis.
  • Parte 5: Imagens
    • Como utilizar.
    • Centralizando resources.
    • Otimizando ícones.
  • Parte 6: Layout com base em dados
    • State e atualização de dados.
    • Renderização condicional.
  • Parte 7: Botões
    • Como utilizar
    • Tipos existentes
  • Parte 8: TextInput
    • Trabalhando com teclado.
    • Validando de dados.
    • Entendendo métodos e referências.
    • Trabalhando com bibliotecas externas.
      • react-native-keyboard-aware-scroll-view
  • Parte 9: Listas
    • Tipos existentes.
    • FlatList
    • Ações nos itens da lista.
  • Parte 10: Navegação
    • Conhecendo React Navigation
    • Trabalhando com comportamentos específicos de cada plataforma (botão back do android)
  • Parte 11: Organização de uma aplicação enterprise.
    • Separando componentes, rotas e telas.
    • Centralizando principais configurações.
    • Entendendo módulos (@providesModule)
  • Parte 12: Networking
    • Como trabalhar com requisições web?
    • Entendento async/await.
  • Parte 13: Código por plataforma
    • Como executar partes de código somente no Android? Ou somente no iOS?
    • Separação por abstração e composição.
  • Parte 14: Tratamento de erros
    • Debugando seu código.
    • Identificando erros e corrigindo-os.
  • Parte 15: Animações
    • Como utilizar.
    • Presets embarcados.

Requisitos Técnicos

• Se possuir smartphone (iOS 9+ ou Android 5+), podemos rodar o projeto direto no celular.
• Caso prefira rodar no Windows/Linux, instalar o Android Studio e configurar o Android SDK.
• Caso prefira rodar no OSX, instalar o XCode.

Instalação

• Instale o NodeJS versão atual (current).
• No terminal, execute o comando npm install -g create-react-app
• No terminal, execute o comando npm install -g create-react-native-app