Quais tópicos serão abordados no curso?
Introdução aos Fundamentos do React
Introdução ao Curso de React:
Palavras de abertura.
O que é React e um pouco sobre a história da biblioteca.
Ênfase no trabalho com um sistema de base de código.
Componente Básico do React:
Aprendendo o que é JSX no React.
Como escrever um primeiro componente básico.
Construindo um componente com dados estáticos e entendendo os fundamentos.
Construindo uma Lista com Dados Dinâmicos:
Construindo elementos de forma dinâmica.
Usando as capacidades de Array.prototype.map para construção dinâmica.
Importando e exportando componentes de um arquivo.
Construindo uma Tabela com Dados Dinâmicos:
Estrutura da tabela e seus componentes em HTML.
Usando um loop aninhado para construir uma tabela.
Usando a função map de forma aninhada.
Usando dados dinâmicos de um arquivo importado.
Estilizando com o Objeto Style:
Entendendo a diferença entre HTML e JSX.
Aprendendo a estilizar elementos na página.
Praticando a construção de elementos dinâmicos de maneira desafiadora com estilos aprendidos.
Componentes com Estado e Eventos
Integrando Arquivos CSS no React:
Incorporando o mundo dos estilos como parte integral da construção de componentes.
Entendendo o que é className e a diferença entre HTML e JSX.
Incorporando um exercício abrangente de todo o material aprendido até este ponto no curso.
Enfatizando regras de CSS e como elas se integram ao nosso sistema construído.
Integrando Props em Componentes:
O que são props no React e quando usá-las.
Construindo componentes com props e métodos comuns de escrita.
Usando componentes que escrevemos na construção dinâmica.
Construindo uma Tabela com Props:
Construindo uma tabela usando props.
Criando um componente inteligente na construção da tabela.
Combinando construção dinâmica com múltiplos componentes usando props e estilizando com CSS.
Usando Eventos e useState:
Como vincular eventos do tipo onClick a elementos.
O que são componentes inteligentes e por que precisamos deles.
O que é o react hook do tipo useState e como usá-lo.
Criando condições booleanas dentro do JSX de um componente.
Conectando a criação de eventos e o armazenamento de estado para a construção de componentes inteligentes do React.
Usando o Evento onChange:
Como adicionar um input à página e usar useState para armazenar valores de entrada.
Construindo uma lista dinâmica com dados de entrada do usuário.
Explicação aprofundada de arrays e a diferença entre valor e referência.
Entendendo como trabalhar com arrays armazenados no estado do componente.
Tópicos Avançados e Uso de API
Construindo uma Tabela Dinâmica com Eventos:
Entendendo como integrar tudo o que foi aprendido até agora para construir uma tabela de forma dinâmica.
Usando useState para armazenar uma série de entradas.
Exemplo de uso de estado complexo com um array de objetos.
Usando o Hook useEffect:
O que é o react hook do tipo useEffect e como e quando usá-lo.
Realizando comunicação com o servidor usando fetch.
Mostrando métodos para proteger nosso código para evitar erros desnecessários.
Construindo um componente inteligente que combina os hooks useState e useEffect.
Exemplo de Uso do useEffect em Pesquisa no Lado do Servidor:
Explorando usos adicionais para useEffect.
Entendendo como o ciclo de vida do componente afeta nossa implementação de código.
Apresentando um exemplo complexo de uso do useEffect.
Usando Entradas Adicionais:
O que é uma entrada do tipo checkbox e como usá-la.
O que é uma entrada do tipo radio e como usá-la.
O que são entradas do tipo datetime e datetime-local e quando usá-las.
Construindo uma Tabela a partir de API com Filtragem de Resultados:
Fazendo uma solicitação de API para buscar dados sobre uma tabela.
Construindo a tabela de forma dinâmica.
Aprendendo como realizar pesquisas através de filtragem inteligente de resultados.
Discutindo arquitetura de código.
Tópicos Avançados e Arquitetura de Código
Usando Filtros Avançados:
Construindo uma tabela exibindo informações sobre voos.
Expandindo o uso da tabela com um componente de linha inteligente.
Usando entradas para construir filtros para a tabela, usando checkbox, datetime e entradas de texto.
Biblioteca Bulma para Estilização Avançada:
Aprendendo a incorporar estilos prontos.
Usando o pacote bulma para adicionar cor e estilos a projetos React construídos juntos.
Incorporando estilos em um componente existente e passando pela documentação da biblioteca que vamos usar.
Ordenação em JavaScript:
Melhorando um componente de tabela existente e adicionando capacidades de ordenação a ele.
Entendimento profundo de como as ordenações funcionam em arrays com números, strings e objetos.
Vendo como lidar com ordenações especiais quando nosso campo não é uma comparação direta.
Canais de Comunicação Entre Componentes:
Aprendendo como um componente filho pode se comunicar com um componente pai.
Implementando estilização bulma em vários componentes.
Construindo um componente versátil que nos permite incorporar abas na aplicação.
Vendo exemplos de uso de props do tipo função.
Conclusão