ReactJS Elevação de Estados e CRUD - Guia Completo para Frontend

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 Aborda a técnica de elevação de estados no react e manipulação de eventos através do encapsulamento de entradas REACTJS ELEVAÇÃO DE ESTADOS REACTJS ELEVAÇÃO DE ESTADOS As vezes é necessário que a alteração no estado de um componente implique na alteração do estado de outros componentes O React no entanto não permite que essa alteração seja realizada diretamente Por isso sempre que consideramos o fluxo dos dados do topo para baixo precisamos elevar o estado dos dados para o componente pai que controle o conjunto de componentes afetados Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Observe os componentes abaixo Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Observe os componentes abaixo Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Observe os componentes abaixo Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Temos uma classe chamada Blackjack que renderiza dois componentes Jogador e Mesa Pelo estado atual dessas três classes é impossível para o jogador saber quais são as cartas da mesa e vice versa Nem mesmo a classe Blackjack pode determinar quem foi o ganhador da partida já que todos os dados de que precisa para determinar o resultado estão encapsulados dentro do estado de cada uma dos dois componentes filhos Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Dessa forma a melhor solução é Elevar o estado de ambos componentes filhos fazendo com que a classe Blackjack tenha acesso aos dados de Jogador e Mesa Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Elevando o estado de ambos os componentes centralizamos os dados no componente pai Blackjack que agora é capaz de determinar o vencedor da partida Dessa forma o papel dos componentes Jogador e Mesa agora é simplesmente renderizar suas respectivas cartas que são recebidas através de um atributo na classe pai A elevação de estado tem papel fundamental dentro do React porque com frequência uma modificação de um dado tem que ser refletida em vários componentes Componentes Fechados no React REACTJS ELEVAÇÃO DE ESTADOS Dado a natureza do state privado de cada componente recomendase sempre elevar o state compartilhado ao elemento pai comum mais próximo Outra função importante dessa estratégia é permitir que componentes sejam renderizados novamente apenas se sofrerem alterações Nesse caso caso as cartas da mesa mudem apenas o componente Mesa será modificado Componentes Fechados no React REACTJS ENCAPSULAMENTO DE ENTRADAS Por padrão elementos de entrada HTML possuem seu próprio estado interno De forma a manter o React como fonte única dos dados podemos encapsular as entradas criando os chamados componentes controlados Estados dos Inputs no React REACTJS ENCAPSULAMENTO DE ENTRADAS Considere o exemplo abaixo Estados dos Inputs no React REACTJS ENCAPSULAMENTO DE ENTRADAS Para garantir que o conteúdo do input usuario será o mesmo encapsulado dentro do state do componente vamos encapsular todas as alterações nesse campo usando uma função manipuladora de eventos Estados dos Inputs no React REACTJS ENCAPSULAMENTO DE ENTRADAS As modificações realizadas no componente foram Uma função chamada handleUsuario que atualiza o estado do componente de acordo com o valor do evento O valor do evento pode ser acessado através de targetvalue O input foi setado com o atributo onChange chamando a função manipuladora toda vez que o usuário altera o input O input foi setado com o atributo value garantindo que o valor dele será sempre o valor presente no state Estados dos Inputs no React REACTJS ENCAPSULAMENTO DE ENTRADAS Este encapsulamento pode ser feito com diferentes tipos de entradas como checkbox e textarea Entradas do tipo file por exemplo não podem ser encapsuladas pois não podem ser acessadas programaticamente O uso de componentes controlados é incentivado na maioria dos casos Para exceções podemos usar componentes nãocontrolados onde os dados de formulário são controlados pelo próprio DOM Estados dos Inputs no React REACTJS ENCAPSULAMENTO DE ENTRADAS Quando temos formulários com grande quantidade de inputs pode ser tedioso criar uma função manipuladora para cada um deles Para resolver isso podemos usar um truque e criar uma função manipuladora que atende todos os input Múltiplo Encapsulamento no React REACTJS ENCAPSULAMENTO DE ENTRADAS Múltiplo Encapsulamento no React Também podemos substituir o eventtargetid por eventtargetname caso as entradas possuam essa propriedade definida REACTJS ENCAPSULAMENTO DE ENTRADAS Como já vimos até então o React possui regras bastante restritas para o acesso a dados entre componentes O mesmo vale para os métodos da classe Um componente pai pode passar informações à um componente filho através das props mas o inverso não é possível Para que um componente filho envie informações ou realize alterações na classe pai é necessário injetar métodos através das propriedades Manipulando Eventos no React REACTJS ENCAPSULAMENTO DE ENTRADAS Considere o exemplo Manipulando Eventos no React REACTJS ENCAPSULAMENTO DE ENTRADAS De forma a permitir que o componente Personagem altere o valor do estado dono da classe Trono vamos precisar injetar um método nos componentes filhos Manipulando Eventos no React REACTJS ENCAPSULAMENTO DE ENTRADAS Manipulando Eventos no React REACTJS ENCAPSULAMENTO DE ENTRADAS Agora que é possível para a classe Personagem acessar o método mudar Dono podemos chamálo Repare que o nome da propriedade para a classe personagem será revindicarTrono que será um alias para o método Criamos um novo método na classe personagem chamado tomarTrono Esse método é chamado por um botão que chama o método no evento onClick Ou seja ao clicar no botão o dono do Trono será atualizado com nome do personagem daquele componente Manipulando Eventos no React REACTJS OUTROS TÓPICOS O uso do JSX permite o uso integrado de estruturas de seleção e repetição Podemos por exemplo criar uma função que retorna um elemento diferente dependendo da sua entrada Renderização Condicional REACTJS OUTROS TÓPICOS Os elementos podem ser armazenados em variáveis dessa forma podemos usálos de forma simplificada na renderização Renderização Condicional REACTJS OUTROS TÓPICOS Por fim também podemos usar essa técnica para concatenar elementos Renderização Condicional REACTJS OUTROS TÓPICOS Como já citado o resultado do render deve ser sempre um único elemento não importando quantos filhos ele possui Isso nos obriga a criar um elemento raiz sempre que desejamos retornar mais de um elemento na renderização por exemplo Fragmentos no React REACTJS OUTROS TÓPICOS No entanto essa estratégia pode ser inconveniente já que pode exigir a criação de elementos desnecessários ou que não possuem boa acoplagem à outros componentes Em alguns casos essa estrutura poderia tornar um componente completamente disfuncional Fragmentos no React REACTJS OUTROS TÓPICOS Acompanhe o exemplo abaixo Fragmentos no React REACTJS OUTROS TÓPICOS Continuação Fragmentos no React REACTJS OUTROS TÓPICOS O uso de um elemento como div na renderização acima é necessário já que não é possível retornar a dupla de td diretamente no render No entanto isso faz com que a tabela não seja renderizada corretamente já que a sua estrutura deve ficar assim Fragmentos no React REACTJS OUTROS TÓPICOS Para resolver este problema podemos usar o ReactFragment uma espécie de pseudocomponente que não é renderizado no DOM Sua função é apenas encapsular elementos Outra opção é utilizar simplesmente os elementos e que é uma forma reduzida de especificar um fragmento Fragmentos no React REACTJS OUTROS TÓPICOS Para produzir listas de elementos podemos utilizar função map Geralmente criamos uma estrutura para receber e gerar os elementos a partir de um vetor muito parecido com isto Listas no React REACTJS OUTROS TÓPICOS No exemplo anterior os componentes renderizados devem ser Executar esse código causa um aviso de chave no console Iremos verificar o uso de chaves em listas a seguir Listas no React REACTJS OUTROS TÓPICOS Ao renderizar uma lista de componentes o React realiza sua alteração de forma única como um único elemento Para que possamos atualizar elementos de uma lista de maneira individual vamos utilizar um atributo chamado key que é usado pelo React apenas para identificar itens alterados ou removidos de uma lista Chaves em Listas no React REACTJS OUTROS TÓPICOS Chaves em Listas no React REACTJS OUTROS TÓPICOS Recomendase o uso de um ID estável para cada item de uma lista Isso garante que o React terá controle total sobre a atualização da lista realizando novamente a renderização apenas de itens únicos alterados Em casos onde não existe nenhum tipo de identificador único uma última alternativa é usar o índice do vetor como key no entanto essa alternativa não é recomendada Outro ponto importante é que o atributo key não será inserido no DOM sendo usado apenas no controle interno do React Chaves em Listas no React EXERCÍCIO VAMOS TRABALHAR PWII 1 Exercício Baralho de cartas em React Utilizando a API Deck of Cards construa uma interface usando React que tenha as seguintes características Deve permitir ao usuário gerar um novo baralho Deve permitir ao usuário reiniciar o baralho gerado Deve permitir retirar uma nova carta do baralho A cada nova carta retirada um componente deve renderizar a imagem da carta atual retirada Um outro componente deve manter uma lista das cartas que foram retiradas httpsdeckofcardsapicom BOM TRABALHO