Curso
React: Trabalhando com coleções de dados
Neste curso veremos como trabalhar com coleções de dados no React. A ideia é que o site tenha componentes dinâmicos na tela, os quais são carregados conforme a coleção de dados. Por exemplo, se um novo item é adicionado na coleção, um novo componente é renderizado automaticamente na tela — sem a necessidade de instanciar o componente várias vezes. Além disso, poderemos também construir buscas no sistema, através dessa coleção de dados. Para obter estas novas funcionalidades, usaremos as funções nativas do JavaScript Array.map e Array.filter em conjunto com o React.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
6 horas
Curso de React (6 aulas)
Aula 1 - Introdução
Nesta aula veremos como integrar o uso do Array.map no React para exibir componentes de forma dinâmica, usando uma coleção de dados como base.
Aula 2 - Array.map no React
Nesta aula veremos como utilizar o Array.map no código React. Conheceremos também a sintaxe do Array.map e a propriedade nativa do React: key.
Aula 3 - Array.filter no React
Nesta aula veremos a utilidade do Array.filter no código React para realizar buscas em uma coleção de dados. Também relembraremos o funcionamento do Array.filter e a sua sintaxe, conforme o que já foi apresentado no módulo de JavaScript.
Aula 4 - Evoluindo o exemplo - parte 1
Nesta aula evoluiremos o exemplo visto na aula anterior. A ideia aqui é criar botões que permitam o usuário filtrar e apresentar os jogos de uma coleção conforme a plataforma escolhida.
Aula 5 - Evoluindo o exemplo - parte 2
Nesta aula aplicaremos mais uma evolução no nosso exemplo prático. A ideia agora é criar um campo de pesquisa que permite ao usuário buscar os dados de uma coleção com base em um texto digitado.
Aula 6 - Refatorando o código
Nesta aula refatoraremos o código do exemplo. A ideia aqui é deixar o código mais organizado através da criação de uma camada de serviço, separando a lógica central da aplicação em um novo arquivo JavaScript.
Veja outros cursos de React
React: Componentização de aplicações com Props + useState
React: Modificando o comportamento da página com State Hook e evento onClick
React.js: Introdução