React Native
Ano letivo · 1129 termos · 44 dias · 88 aulas
O material inteiro do ano em um só lugar. Digite o nome do método, do operador, da tabela ou do conceito e você chega no dia E na aula onde ele aparece.
JavaScript e o primeiro componente
Do zero ao JSX: sintaxe, funcoes, objetos e o primeiro componente que devolve tela. 13 dias, 26 aulas de 50 min.
Como o React Native roda
O que e a biblioteca, onde o app roda, e a diferenca entre rodar no navegador e rodar no celular.
1. O que e React Native e onde o app roda
2. O primeiro script: console e o terminal
Variáveis, let e const
Como se guarda um valor, e por que let e const substituíram var.
1. let, const e o fim de var
2. const, escopo de bloco e o que não pode mudar
Tipos, operadores e comparação
Os tipos do JavaScript, a aritmética e as pegadinhas de comparação que fazem alunos perderem nota.
1. Os tipos de dado e typeof
2. Operadores, comparação e o caso de == contra ===
Strings
Texto: concatenar, interpolar, medir e fatiar.
1. Concatenar, interpolar e medir
2. Fatiar, buscar e converter
Condicionais
if, else e o operador ternário, com os casos que o JavaScript trata diferente.
1. if, else if e else
2. Operador ternário e switch
Laços de repetição
for, while, e o laço que percorre lista.
1. for e forEach
2. while, for...of e for...in
Funções
Declarar, chamar, passar argumento e devolver valor.
1. Declarar e chamar uma função
2. Argumentos, escopo e funções anônimas
Arrays
A lista que o app inteiro usa: guardar, percorrer e transformar.
1. Criar, ler e alterar um array
2. Transformar: map, filter e reduce
Objetos e desestruturação
O modelo de dado do app: o que é um objeto, e como se lê uma propriedade.
1. Objetos: propriedades, métodos e o this
2. Desestruturação e spread
JSX e o primeiro componente
A sintaxe que descreve tela, e o componente que a devolve.
1. O que e JSX e por que existe
2. View, Text e StyleSheet
Props e composição de componentes
Como um componente recebe dado de outro e monta tela com partes.
1. Props: passar dado para o componente
2. Composição e componente reutilizável
useState: o app que muda sozinho
Estado é a memória do componente; useState é o que muda a tela quando ela muda.
1. useState e rerender
2. Atualizar estado e as pegadinhas do set
useEffect e o primeiro app
Efeito colateral, o laço que roda depois da renderização, e o app fechado.
1. useEffect: o que roda depois da tela
2. Montar o app e rodar a primeira versão
Layout, listas e navegação
Flexbox, `FlatList`, formulario, API, React Navigation, TypeScript e o app que funciona. 16 dias, 32 aulas de 50 min.
Layout com Flexbox
O sistema de layout do React Native: linha, coluna, espacamento e o que ocupa quanto espaco.
1. flexDirection: linha e coluna
2. justifyContent, alignItems e flexWrap
Tamanho, espaçamento e borda
width, height, padding, margin e o resto das medidas que definem o tamanho de uma caixa.
1. width, height, flex e o limite
2. padding, margin e borda
Texto e tipografia
Como o texto se apresenta: tamanho, peso, alinhamento e o limite de linhas.
1. fontSize, fontWeight e cor
2. textAlign, numberOfLines e o texto longo
Imagem, toque e evento
Mostrar imagem e responder ao toque: os dois eventos que o aluno mais usa.
1. Image, require e a pasta de imagens
2. Pressable, TouchableOpacity e onPress
Listas: FlatList e SectionList
A lista que o celular precisa renderizar sem travar.
1. FlatList e o porquê de não usar map
2. SectionList, itemSeparator e lista vazia
Formulário e entrada de texto
Como o app recebe o que o usuario digita, e como controla o campo.
1. TextInput e o estado do campo
2. Validação e teclado
useEffect com dado de fora
O efeito que busca, que espera e que cuida do que precisa ser limpo.
1. useEffect com dependência e requisição
2. Evitar o laço infinito e limpar o efeito
Consumo de API com fetch
Buscar dado de um servidor real, e o que fazer quando a resposta vem errada.
1. fetch, requisição e resposta
2. Token, erro de resposta e o que mostrar na tela
Navegação entre telas
Trocar de tela sem recarregar o app: o roteador do React Navigation.
1. React Navigation e o Navigator
2. Parâmetros entre telas e abas
Componente com TypeScript
Tipar props e estado: o que muda quando a tela para de quebrar em silêncio.
1. Interface, type e tipar props
2. Tipar estado, lista e função
Testes de componente
Provar que a tela faz o que deveria, sem depender do celular.
1. O que é teste de componente
2. Escrever e rodar o teste
Listas com dado remoto: paginação e cache
Trazer o próximo pedaço da lista e não refazer a requisição a cada rolagem.
1. Paginação com FlatList
2. Cache de dado e atualização
Formulário que grava e revê
Fechar o ciclo: o usuário preenche, o app guarda e depois mostra o que foi gravado.
1. useReducer e estado que cresce
2. Revisar o que foi preenchido
Acessibilidade e ajuste de tela
O app precisa funcionar para quem usa leitor de tela e fonte maior.
1. Rótulo, papel e leitor de tela
2. Fonte, safe area e ajuste por tamanho
Desempenho: quando o app começa a travar
O que pesa em um app de celular e como medir antes de otimizar.
1. render desnecessário e o que dispara
2. Lista, imagem e medição
Fechamento do trimestre: app completo
Juntar o que o trimestre todo entregou em um app que roda de ponta a ponta.
1. Estruturar o projeto e revisar a base
2. Publicar o app e fechar o trimestre
SQLite e persistência local
O dado que sobrevive ao app fechar: tabela, consulta, migracao, indice e o CRUD completo. 15 dias, 30 aulas de 50 min.
Por que o dado precisa sobreviver ao app fechar
O limite do estado em memoria e o que a persistencia local resolve.
1. O estado em memória e o que ele não resolve
2. As três opções de onde guardar o dado
AsyncStorage: o armazenamento simples
Guardar chave e valor, e o que ele serve e o que ele não serve.
1. Gravar e ler uma chave
2. JSON no armazenamento e o limite do par chave-valor
SQLite: o que é um banco relacional no celular
A mesma ideia de tabela, coluna e consulta que o MySQL, rodando dentro do app.
1. O que é SQLite e por que ele cabe no celular
2. Abrir o banco e criar a tabela
Inserir
Gravar linha no banco, com os tipos que o SQL espera.
1. INSERT e o resultado da gravação
2. Inserir vários de uma vez
Consultar: SELECT
Trazer dado de volta para a tela, e o filtro que muda tudo.
1. SELECT e a leitura das linhas
2. WHERE: filtrar o que vem
Atualizar e apagar
Mexer em linha que já existe, e apagar sem deixar lixo.
1. UPDATE e a linha alterada
2. DELETE e apagar com confirmação
Modelar o dado
Definir a tabela antes de escrever a consulta, e as decisões que isso economiza.
1. Chave primária e identidade da linha
2. Tipos, tamanho e o que a coluna aceita
Relacionamento entre tabelas
Duas tabelas que se ligam por chave, como o MySQL, mas sem servidor.
1. Chave estrangeira e o vínculo
2. JOIN para ler o dado junto
Alterar a estrutura depois de criada
O schema mudou: como levar a tabela do aluno até lá sem perder o dado.
1. ALTER TABLE e a coluna nova
2. A migração que roda ao abrir o banco
Índice e consulta que não trava
Por que a consulta fica lenta com muitos dados, e o que resolve.
1. CREATE INDEX e o ganho
2. Índice nos campos que a consulta filtra
A consulta dentro do app: um hook de dados
Tirar a consulta do botão e colocá-la no ciclo de vida do componente.
1. Buscar no banco e colocar na tela
2. O hook que carrega, recarrega e salva
Formulário que grava no banco
O formulário que o aluno construiu no 2º trimestre, agora gravando de verdade.
1. Do formulário ao INSERT
2. Editar o que já foi gravado
Transação no SQLite
Várias gravações que só valem se todas valerem.
1. BEGIN, COMMIT e ROLLBACK
2. Quando a transação salva o app
Desempenho com muitos dados
Cinco mil linhas: o que o celular aguenta e onde o app trava.
1. A lista grande e o FlatList
2. Medir antes de otimizar
Fechamento do ano
Juntar os três trimestres em um app que grava, lê e sobrevive ao fechamento.
1. O app completo, com dados de verdade
2. Revisar, testar e entregar
Nenhum dia corresponde a busca. Tente outro termo.