ReactJS CRUD - Desenvolvimento Frontend com Componentes e Elevação de Estados

PROFESSOR ANDRÉ FARIA RUARO UNESC CIÊNCIA DA COMPUTAÇÃO PROGRAMAÇÃO WEB II Conteúdo 09 Desenvolvimento Frontend Introdução ao ReactJS Elevação de Estados CRUD com ReactJS Tópicos Especiais React CRUD Create Read Update Delete é um acrônimo para as maneiras de se operar em informação armazenada São as quatro funções básicas que geralmente os sistemas que manipulam banco de dados devem poder executar REACTJS CRUD REACTJS CRIANDO O CRUD Para o exemplo que usaremos vamos fazer um backend contendo o recurso herois com os atributos id nome numero e url Os métodos definidos para esse recurso são GET POST PUT e DELETE Para o frontend usaremos como base 3 componentes FormularioHeroi que renderiza o formulário para inserir e atualizar ListaHeroi que renderiza a listagem de heróis Heroi que renderiza o formulário e listagem Modelo de CRUD React REACTJS CRIANDO O CRUD Vamos iniciar a criação do nosso frontend gerando nosso pacote react através do comando Em seguida vamos alterar o arquivo Appjs para renderizar nosso primeiro componente Iniciando CRUD React REACTJS CRIANDO O CRUD Todos os nossos componentes citados anteriormente serão criados dentro da pasta componentes Dentro do arquivo componentsHeroijs vamos criar a estrutura geral da página Iniciando CRUD React REACTJS CRIANDO O CRUD Inserindo CRUD React REACTJS CRIANDO O CRUD Repare que temos dentro da classe Heroi a inicialização do estado que vai armazenar uma lista de Herois Isso garante que é este componente que fará o gerenciamento dos dados repassandoos aos filhos FormularioHeroi e ListaHeroi Neste caso ListaHeroi já recebe o thisstateHerois para renderizar a lista de itens posteriormente Em seguida temos a definição do componente componentsFormularioHeroijs Iniciando CRUD React REACTJS CRIANDO O CRUD Em seguida temos a definição do componente componentsFormularioHeroijs Inserindo CRUD React REACTJS CRIANDO O CRUD Repare que aqui já encapsulamos o estado das nossas entradas dentro do estado do componente Dessa forma os inputs usarão o método handleInput para alterar o estado a cada mudança no estado interno do input E por fim do componente componentsListaHeroijs Iniciando CRUD React REACTJS CRIANDO O CRUD Aqui fazemos a iteração da lista recebida pelo props e realizamos sua impressão Mais adiante também adicionaremos dois botões para deletar e selecionar itens dessa lista Inserindo CRUD React REACTJS CRIANDO O CRUD Nosso frontend já está preparado para renderizar os itens do thisstateHerois no entanto ainda não temos nenhum dado Vamos criar uma nova função que atualiza o estado a partir do backend usando o Axios Listando CRUD React REACTJS CRIANDO O CRUD Em seguida vamos chamar esse método por meio de um dos métodos do ciclo de vida do React o componentDidMount Esse método é chamado apenas quando o componente é montado no DOM fazendo dele um momento ideal para atualizar os dados da lista Listando CRUD React REACTJS CRIANDO O CRUD Após a listagem de dados vamos permitir que o formulário da página chame um novo método que criaremos no Heroijs que resultará na inserção de um novo item no backend Primeiro vamos criar o método principal Inserindo CRUD React REACTJS CRIANDO O CRUD A verificação de espostastatus 200 anteriormente serve para atualizar toda a lista caso haja sucesso na inserção do novo item Agora vamos dar acesso à este método ao componente filho FormularioHeroi para que ele possa chamálo Inserindo CRUD React REACTJS CRIANDO O CRUD Inserindo CRUD React REACTJS CRIANDO O CRUD Por fim vamos atualizar nosso FormularioHeroijs adicionando um botão e criando um novo método Nesse caso temos um novo método interno para FormularioHeroijs que além de chamar o método pai thispropsadd também limpa o estado das entradas logo em seguida Esse método interno é chamado sempre que clicamos no botão Inserir eventoonChange Inserindo CRUD React REACTJS CRIANDO O CRUD Por fim vamos atualizar nosso FormularioHeroijs adicionando um botão e criando um novo método Inserindo CRUD React REACTJS CRIANDO O CRUD Agora que já somos capazes de inserir e listar itens vamos implementar também a deleção Para isso necessitaremos de um novo método e de um botão ao lado de cada item da nossa lista Vamos começar com o método principal que será implementado em Heroijs Deletando CRUD React REACTJS CRIANDO O CRUD Agora que já somos capazes de inserir e listar itens vamos implementar também a deleção Para isso necessitaremos de um novo método e de um botão ao lado de cada item da nossa lista Vamos começar com o método principal que será implementado em Heroijs Deletando CRUD React REACTJS CRIANDO O CRUD Novamente criamos um método e repassamos seu ponteiro através das propriedades do objeto como havíamos feito anteriormente com addHeroi Repare que ao contrário de addHeroi nosso método deleteHeroi recebe um id Esse id será repassado pela ListaHeroi pois é este componente que conhece qual item será excluído e vai chamar que o método principal Observe ainda que a construção da URL é diferente em ambos os casos já que a toda de DELETE precisa do id Vamos agora atualizar nosso ListaHeroijs com um novo botão Deletando CRUD React REACTJS CRIANDO O CRUD Deletando CRUD React REACTJS CRIANDO O CRUD Observe que atentamente não criamos nenhum método interno para o componente filho ListaHeroi O uso de onClick thispropsdeleteitemid foi suficiente já que na prática estamos criando uma arrow funcion diretamente no valor do atributo onChange Deletando CRUD React REACTJS CRIANDO O CRUD Para editar os itens podemos utilizar de várias estratégias diferentes Neste exemplo iremos alterar o componente FormularioHeroi para permitir que além de inserir ele possa também alterar itens da nossa lista Para isso vamos implementar uma forma de selecionar e identificar itens selecionados para que nosso componente saiba exatamente quando inserir e quando deve editar um item previamente inserido Este método exigirá que façamos alterações nos três componentes Atualizando CRUD React REACTJS CRIANDO O CRUD Vamos iniciar com a alteração do componente principal Heroijs Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Nesta primeira parte realizamos 3 adições no nosso código Inserimos um novo atributo no state chamado selecionado Essa variável irá controlar qual dos elementos está selecionado e será nulo caso não haja seleção Um método que permite selecionar um elemento gravandoo no estado Caso o elemento selecionado já esteja selecionado vamos atribuir o valor null deselecionando o item Passamos por props o método anterior para que a nossa ListaHeroi possa controlar a seleção de itens Atualizando CRUD React REACTJS CRIANDO O CRUD Vamos aproveitar e adicionar também um método para atualizar um item no backend repassando a prop para o FormularioHeroi Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Basicamente essa função utiliza o id que está armazenado em thisstateselecionado para realizar a atualização mas usa um objeto contendo os dados atualizados que é recebido por parâmetro Também não podemos esquecer de após a atualização resetar o valor do item selecionado Agora vamos alterar nosso ListaHeroijs para criar um botão de seleção para cada item Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Repare que assim como anteriormente criamos um arrow function para chamar o método pai thispropsselect porém agora passando o objeto inteiro ao invés apenas doid de volta para o componente principal Por fim vamos realizar as alterações no FormularioHeroijs Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Neste componente pra finalizar a função de edição fizemos a seguintes alterações Redefinimos o construtor para inicializar o estado das entradas de acordo com o item selecionado e se não houver inicialize com valores padrão Alteramos a função setHeroi para chamar thispropsput caso haja algum Heroi selecionado Na renderização testamos novamente se há algum Herói selecionado e mostramos o id dele Essa alteração é apenas estética para sabermos se há algum item selecionado Atualizando CRUD React REACTJS CRIANDO O CRUD Após todas essas alterações você pode notar que é possível editar inserir e deletar os itens No entanto o formulário não atualiza automaticamente quando um novo item é selecionado Isso acontece pois definimos os valores das entradas do formulário em seu construtor Como o componente não é recriado devido ao fato de não saber quando o houve uma nova seleção vamos usar uma espécie de truque para forçar a recriação do componente vamos inserir o atributo key no formulário Atualizando CRUD React REACTJS CRIANDO O CRUD Atualizando CRUD React REACTJS CRIANDO O CRUD Agora o componente formulário será recriado por completo a cada atualização da chave E enfim temos o nosso CRUD completo para o recurso Atualizando CRUD React EXERCÍCIO VAMOS TRABALHAR PWII 1 Exercício Implementar o CRUD visto em aula usando MongoDB e mongoose BOM TRABALHO