1 - Introdução 2 - Criando projeto 3 - Gerando tabela 4 - Estruturando projeto 5 - Configurando repositório 6 - Configurando controle 7 - Modelo para validar requisições 8 - Serviço para listar produtos 9 - Rota para listar produtos 10 - Serviço para cadastrar produtos 11 - Rota para cadastrar produtos 12 - Serviço para alterar produtos 13 - Rota para alterar produtos 14 - Serviço para remover produtos 15 - Rota para remover produtos 16 - Cors 17 - Criando projeto React 18 - Criando componentes no React 19 - Estrutura de formulário no React 20 - Estrutura de tabela no React 21 - Estilizando componentes 22 - Visibilidade dos botões 23 - Obtendo os produtos 24 - Exibindo os produtos na tabela 25 - Objeto produto 26 - UseState de produto 27 - Obtendo dados do formulário 28 - Cadastrar produtos 29 - Limpar formulário 30 - Selecionar produto 31 - Cancelando alteração e exclusão 32 - Remover produto 33 - Alterar produto 34 - Considerações finais

23 - Obtendo os produtos

Nessa vigésima terceira parte do nosso tutorial de Spring Boot e React, iremos realizar a listagem dos produtos da nossa API. Iremos implementar o useEffect com a fetch API, veja abaixo como será criada essa estrutura:

// UseState
const [objProduto, setObjProduto] = useState(produto);

// UseEffect
useEffect(()=>{
  fetch("http://localhost:8080/listar")
  .then(retorno => retorno.json())
  .then(retorno_convertido => setProdutos(retorno_convertido));
}, []);

Acompanhe o vídeo para conseguir implementar nossa listagem de produtos em nosso projeto React.