React: ciclo de vida dos componentes

Deletando um card - Introdução

Tudo bom? Eu sou o Ricardo Bugan e esse é mais um curso de react aqui na Alura para você. Nesse curso vamos continuar nosso projeto do Google seep, ou da Alura seep, aquele sistema de gerenciamento de notas que a gente está criando no react. No final, a gente vai ter mais ou menos esse projeto aqui. A gente está com uma cara bem parecida, de layout não vamos mudar muita coisa, mas vamos adicionar novas funcionalidades, porque agora tenho mais categorias que posso adicionar na hora que for criar o card.

Por exemplo, posso criar aqui uma categoria de game, posso criar outra categoria de trabalho, posso criar categorias dinamicamente, quantas categorias eu quiser. Essas categorias vão ser adicionadas dinamicamente aqui no nosso formulário para criar uma nota, porque cada nota vai estar associada a uma categoria.

Se cada uma está associada a uma categoria, tenho que ter um lugar onde vou fazer qual é a categoria para cada nota. Aqui, por exemplo, tem a categoria games, tenho trabalho, posso criar mais uma música, se eu criar, apertei o enter, ele criou, e já vem atualizando dinamicamente. A gente tem uma ligação entre dois elementos da nossa tela, começando a dar mais interatividade e de comunicação entre os diferentes componentes da nossa aplicação.

Uma vez que tenho minha categoria aqui posso criar então um game, um card de God of War, e aí posso colocar um texto é um jogo de ps4, e vou criar uma nova. Ele colocou God of War na categoria game, também consigo deletar esse card agora. Vamos deletar esse card. E é um jogo de ps4. Posso criar de novo com meu formulário aqui, não foi limpo na hora que criei o card, ele ainda está aqui e posso criar quantas notas eu quiser da mesma maneira que a gente tinha antes. Essas notas vão sendo adicionadas aqui e a gente pode também deletar essas notas porque é a funcionalidade de gerenciamento de notas.

Uma vez que a gente terminou o que precisávamos da nota, que a informação não é mais relevante posso apagar então. Essa é a aplicação que a gente vai chegar no final desse curso com o react.

Vamos dar uma olhada no código para a gente ter uma ideia de como vai ficar nosso código no final desse curso. Nesse curso a gente vai separar uma camada de dados. A gente pode ver que nosso app que tinha aquele estado que a gente estava criando não tem mais um estado interno dele. A gente vai ver também por que seria legal não ter esse estado, quais são os benefícios dele não ter o estado interno com aquela variável this.state. Aquela variável, aquele atributo especial dos componentes do react.

Como não tem mais esse state, a gente pode criar aqui categorias, atributos, que são as categorias e as notas, que são os dados da nossa aplicação. Você pode ver na lateral que tenho uma nova pasta de dados, onde tenho minhas categorias e minhas notas. Onde a gente vai fazer o gerenciamento de todas as informações para esse sistema que a gente está criando.

E nossos componentes também vão ter novos componentes já que agora a gente tem nossa lista de categorias e essa lista de categorias também é um componente do nosso react. Aí sim aquela classe de componente.

E já que ela estende a classe componente do react, você pode reparar que tem alguns métodos diferentes. Componente did mount, componente will unmount, que é uma coisa que vem do próprio react. A gente vai entender durante esse curso também o ciclo de vida dos componentes do react e quando as funções que são funções que vem do componente, coisas que a gente está sobrescrevendo, métodos que a gente está sobrescrevendo quando vão ser chamado e por que a gente precisa desses métodos para fazer esse inscrever-se e desinscrever-se que a gente vai entender durante esse curso. Como estamos gerenciando todas as informações e passando as informações para os nossos componentes do react, já que são coisas separadas.

Esse é nosso curso, a gente vai tratar com bastante detalhes de como o react funciona por trás dos panos e se aprofundar ainda mais nessa tecnologia. Vamos estudar?

Deletando um card - Importando SVGs

Vamos começar nosso curso de react. A segunda parte do nosso curso onde a gente vai falar um pouco mais da nossa aplicação do react. A gente acabou a primeira parte do curso nessa parte aqui. A gente tinha nosso formulário de cadastro, posso escrever várias notas, e tenho aqui o texto que eu quiser, como mostrei em um parágrafo. Se eu der um criar nota vai criar uma nova nota aqui para baixo. Ele vai sempre colocar no final porque estou fazendo dinamicamente então as notas vão vir sempre dinamicamente também aparecendo e sempre vai numa fila, vai jogando lá para o final.

Foi aqui que a gente parou o último curso, a gente está com nossa aplicação, nossa base inicial. E o que a gente quer fazer agora é uma vê que tenho nossa lista de notas aqui, tenho que conseguir deletar ela, porque se estou gerenciando notas, se estou pegando e usando como se fosse um Google keep ou notas adesivas do Windows, ou qualquer coisa do tipo, em algum momento vou escrever uma nota, quero que fique salva do jeito que a gente está fazendo aqui e quando deixar de ser relevante para mim vou querer deletar ela. Vou precisar de alguma maneira deletar essa nota.

Para deletar essa nota então como vou fazer? Preciso de algum lugar, algum botão para clicar e apagar essa nota. No nosso card, no nosso projeto, inclusive esse projeto você pode achar nos exercícios do curso, no exercício anterior você vai ter o projeto inicial divulgador curso para você baixar e ir acompanhando o curso junto comigo.

E a gente tem nosso app.js, que é o ponto de entrada, é o componente pai de todos os componentes customizados que a gente está criando. Dentro da minha pasta components tenho alguns componentes. Tenho minha lista de notas, meu formulário de cadastro, e tenho o card que representa uma nota.

Eu poderia vir no meu card de notas e vir no final dele, no final da section e adicionar um botão. Mas não quero fazer isso, quero colocar um ícone pequeno de uma lata de lixo. Vou buscar esse ícone de algum lugar.

Para esse ícone na real vou usar o material design. O material design é essa biblioteca aberta, a gente pode pegar os ícones aqui, filtrei a parte de ícones, ela tem outras coisa também, inclusive tem ícones animados, componentes, uma série de coisas. É um recurso bem legal de você usar enquanto estiver fazendo layout, e a gente tem uma série de ícones que posso baixar daqui. São ícones que são usados em muitos lugares.

O que vou fazer aqui é procurar o de deletar, por delete, "Ctrl + F + delete” e se eu vier aqui embaixo vai ter a lata de lixo, a lata com x ou só o contorno dela. No meu caso vou pegar ela preenchida. Vou clicar nessa lata de lixo e ele vai aparecer embaixo para mim para baixar o svg.

Consigo abrir esse menu para abrir, se eu expandir posso ter a opção de baixar um png ou um svg. Como vou fazer? No nosso caso vou usar um svg para a gente ver como a gente carrega svg dentro do react. Tem algumas formas que a gente tem para baixar svg. Fora que o svg também se eu tivesse construído para muitas resoluções ele é vantajoso, porque como é escalável não preciso ter várias versões dele como a gente teria que ter se tivesse um png, que é uma imagem fixa que reduzindo e aumentando ela posso deixar pixelado, posso usar uma resolução muito maior do que preciso para um tamanho de imagem muito pequeno.

Vou baixar o svg aqui e vou trazer para o meu projeto e colocar numa pasta do meu projeto chamada assets. O que vou fazer é vir na minha pasta assets que a gente já tem o app.css do nosso index.js e vou colocar o svg. Volto com esse ícone já no projeto.

A gente voltou aqui, já estou com o ícone no meu projeto, criei dentro da minha pasta de assets e criei uma pasta de imagens, dentro dessa pasta de imagens aí sim tenho o delete Black 18dp svg. No final vou renomear isso aqui só para delete svg. Todo esse final vou apagar, deixar só como delete.svg. Tirei o nome original que veio do site.

Você pode ver que é um arquivo com uma tag svg. Ele tem todas as informações de como desenhar esse vetor que representa aquela lixeira. E aí como uso então esse svg dentro do meu card? Vou fechar ele aqui, vou abrir meu card da nota. Vou fechar a lateral também que não preciso usar por enquanto. Quero usar o svg dentro desse card.

Como posso fazer? No final, no meu cabeçalho, no topo do meu card, no meu cabeçalho, vou vir aqui e vou colocar ele como se fosse uma imagem. Essa é uma das maneiras que a gente tem de usar o svg. Vou trazer uma imagem e nessa imagem o source dela, a fonte que ela vai buscar, a imagem que vai ter que desenhar, essa tag imagem vai ter que desenhar, vai ter que ser um svg. Então, a gente pode ver que o src, o source dela, a fonte dela, vai ser nosso svg.

Como a gente normalmente colocaria se fosse uma imagem? A gente colocaria como direto o caminho. Poderia colocar direto o caminho. E aí vou caminhando até o svg.

Mas no caso do react posso importar as coisas aqui. Posso importar o svg aqui em cima e usar só a versão importada dele, porque aí tenho separado onde estou lendo o arquivo que preciso e onde vou usar ele, fora que o web pack no final vai conseguir pegar através dos imports e vai otimizar para a gente, se jogar o source não vai funcionar.

Vou vir aqui, dar um import o meu svg, quero importar meu delete svg, quero importar ele do meu caminho, então do ../, estou na app, quero ir para assets imagem delete. Dessa forma, estou importando meu svg no react. Para isso, tenho que vir aqui, para usar ele vou usar como source na minha imagem, vou trazer aqui entre chaves, porque a partir do momento em que importo aqui como esse delete virou uma variável. A informação desse arquivo está salva nessa variável, e ela está salva nessa variável, é uma variável JavaScript, para usar a variável no JavaScript tenho que por o entre chaves.

Nesse momento posso fechar nossa tag. Vou fechar nossa tag. Ele está com essa lista amarela que estou com um inter aqui, então deve estar reclamando de alguma coisa. Vou fechar minha lateral, voltar na minha aplicação.

Na hora que eu criei uma nota, se eu der um criar nota vai ter nosso svg funcionando. Essa é uma das maneiras que a gente tem de criar um svg, de usar um svg. Trazer ele como imagem.

A outra maneira se você não quiser adicionar uma tag de imagem, você quer que a tag de svg venha para cá, se eu abrir e inspecionar esse cartão, você pode ver que tem um tag de imagem, estou usando uma tag de imagem e a gente está vindo do source static media delete. Ele pegou a imagem svg.

Mas não quero vir em uma tag de imagem. Quero que use a tag svg mesmo. Para usar a tag svg vou pegar nosso import do delete svg e trazer ele como um react component. Vou escrever react component as delete svg.

Quero um react component como se ele fosse um delete svg. E aí esse delete svg vira uma tag para mim. Dessa maneira não preciso da imagem, posso por o delete svg como se fosse uma tag direto. Se eu fizer isso então vou voltar na minha criação de cards, vamos criar um card só para a gente ter aqui, e ele não veio para mim. Por que não veio para mim? Vamos ver se faltou alguma coisa.

Se eu vier aqui a gente pode ver que ele não está reconhecendo que não estou usando esse svg, ele está meio escuro a letra. O que acontece é que preciso dele em letras maiúsculas. Se eu vier e colocar em letras maiúsculas, aí agora ele reconheceu. Para usar o react component como um delete svg tem que estar com letra maiúscula, senão o react não vai entender.

Se eu voltar e der um criar nota crio uma nota sem nada, ele veio para o nosso lixo com nosso ícone de deletar. Se eu criar uma nota com texto agora também ele vai vir com nosso ícone de deletar já adicionado no nosso cabeçalho.

É dessa maneira que a gente consegue carregar svgs. Posso carregar a partir do react component como delete svg ou posso usar a tag de imagem e importar através de uma imagem. Também posso vir aqui, lembrando que o svg como é uma tag do no html, existe essa tag aqui, poderia copiar todo o svg aqui e jogar dentro de um componente meu que chamaria de delete e chamar esse componente no método render. A gente poderia chamar diretamente aqui. Posso vir aqui, copiar, tirar e colar esse svg, deve funcionar da mesma maneira.

Vamos criar um card e agora está aqui, porque a gente copiou o arquivo de svg para dentro dessa tag. Ela também vai funcionar. Mas o mais interessante talvez seja você usar como componente ou jogar como uma imagem mesmo para ficar mais interessante de você utilizar.

Deletando um card - Deletando cards

Agora que a gente tem nosso ícone de deletar, nossa lixeira para jogar o card fora, preciso adicionar uma funcionalidade nele. Preciso que quando eu clicar nele aconteça alguma coisa. Atualmente, se eu abrir meu inspetor e meu console, se eu clicar nele a gente não vê nada acontecendo.

Para interpretar esse clique e saber que ele está acontecendo, vamos para o console.log para aparece alguma coisa quando eu clicar no svg. Vou voltar no meu código e estou dentro do meu card de nota. Esse card de nota a gente tem o delete svg que é o nosso elemento que a gente tinha importado aqui. Então, import react component as delete svg from e nosso arquivo svg.

Detalhe que deixei passar no último vídeo é que para fazer isso aqui funcionar, para essa declaração funcionar, preciso ter criado minha aplicação com o create react app, porque se eu não tivesse criado com ele vai faltar uma ferramenta que vem por padrão com o create react app que faz essa importação para mim.

Essa ferramenta você pode importar na mão, pode instalar depois se você criou sua aplicação de react na mão, mas é o SVGR. Ela transforma arquivos svg em componentes do react. Você consegue aqui fazer de uma maneira que ele consiga fazer esse tipo de importação ao invés de criar um componente seu e copiar o svg para dentro daquele componente. Esse tipo de importação só vai funcionar porque essa ferramenta está funcionando por trás dos panos.

Essa ferramenta vem por padrão quando dou o npx create react app e passo nosso nome do aplicativo. Mas se você não tiver isso instalado ou não estiver funcionando é por esse motivo e você pode usar nossa imagem como tínhamos visto, nossa tag de imagem com o source, o src sendo igual ao delete svg.

O que eu quero fazer é quando esse svg for clicado, quero exigir o console.log. Vou chamar o evento de onClick, já que ele existe na maioria dos elementos do html. Em todos os elementos de html, porque faz parte do dom, o dom tem esse elemento em todos os filhos dele. O onClick vai funcionar aqui e vou chamar uma função. Para chamar uma função vou abrir nossas chaves para escrever JavaScript e vou chamar uma função anônima por enquanto onde só quero fazer um console.log, vou aqui colocar o deletar.

Nesse onClick console.log ele deve executar. Se eu voltar para minha aplicação, vamos fechar o SVGR que já expliquei por que precisava dele, vamos voltar, criar uma nota qualquer e se eu clicar na lixeira ele está vindo como deletar, está entendendo o clique. Por padrão vai entender.

Se eu clicar em qualquer outra parte do card não está fazendo. Já tenho nosso deletar, nosso evento funcionando. Como faço para linkar esse evento de onClick para nossa fonte de dados? Porque lembra que esse card, toda essa classe quando é criada na nossa aplicação recebe esses dados, título, texto, através de alguém que tem esses dados, essas informações. Esse componente que tem essas informações é nosso app.

Lembra que nosso app quando a gente cria uma nova nota salvamos no estado dele, aquela propriedade especial que ele tem, que é o state, que quando é atualizada faz esse componente renderizar de novo e renderizar os filhos dele. Nesse set.state temos todo nosso array de notas, e nesse array de notas que precisaria deletar aquela nota específica. Para esse card sumir preciso apagar ele desse state do nosso app, porque esse card é criado a partir da lista de notas, ele vai vir na lista de notas, vai criar um novo card a partir dos elementos que estão no array de notas que a gente está passando como propriedade, que estamos recebendo como propriedade desse lista de notas.

Preciso apagar desse array para quando ele passar por esse map não renderizar mais aquele elemento, não criar um card referente à nota específica que deletei. Como faço então essa comunicação entre um objeto filho que tem um evento que tem que ser disparado, só que esse evento tem que chamar uma função do meu pai, do meu app?

A gente já fez isso, não fez? Na hora de criar um novo card no meu formulário de cadastro vou vir aqui e na hora de dar um criar nova nota chamei a propriedade criar nota, então chamei uma função que recebi como propriedade. E aí se chamei uma função que recebi como propriedade no meu formulário de cadastro posso então chamar uma função aqui que vou receber como propriedade.

Para o nosso delete svg, o onClick dele não vai ser essa função só com console.log que eu fiz. Vai ser uma função que vou receber como propriedade desse elemento. Ele vai chamar o this.props.deletarNota.

Nesse onClick quero deletar uma nota e estou chamando a propriedade direto. Deletar uma nota, vamos chamar a propriedade, só que tenho que receber essa propriedade. Vou no meu app.js além de criar uma nota ter um deletar nota, vamos criar ele aqui, subir um pouco nosso texto, deletar nota, ele por enquanto não vai receber nada e por enquanto continua sendo só um console.log para a gente ver funcionando, quero ver esse fluxo passando.

Console.log.deletar. Estou deletando minhas notas, e para deletar essa nova, minha lista de notas vai ter que receber essa propriedade. Vou criar uma nova propriedade que vou chamar de apagar nota, esse apagar nota vai ser igual nosso método. This.deletarNota e vou fazer já um bind que a gente viu no último curso para eu poder chamar aqui se precisar chamar o this.deletarNota ele já vai saber quem é esse this.

Como a gente vai ter que mexer no estado desse componente no deletar nota já vou fazer o bind para não ter problemas mais para frente. Vamos salvar esse arquivo. Deletar notas está aqui, apagar notas está passando pelo lista de notas, só que agora esse lista de notas, F12 para navegar até ele, tenho que vir para cada um desses cards notas vai ter que receber também o apagar nota. Ele vai ter que receber que vai ser o this.props.apagarNota.

Vamos fechar aqui, e a gente tem então o nosso card que vai receber três propriedades, sendo que é um título, um texto e nossa função de apagar nota, e nossa apagar nota como nosso lista de notas também recebeu como propriedade do pai a gente está passando através das propriedades dele.

Estou pegando a propriedade do meu pai, passando para o meu filho, pegando a propriedade do meu pai, passando para o meu filho, e assim consigo levar uma propriedade, uma função ou um valor, uma variável até o elemento filho onde realmente vou suar esse valor.

Agora que tenho o apagar nota vamos conferir os nomes, porque tem que bater. Aqui chamei de deletar nota, vamos trocar para apagar nota. Na hora que eu clicar ele vai chamar o this.props.apagarNota que está referenciando aquela função deletar nota do nosso app.js.

Vamos salvar esse componente também e vamos voltar para o nosso card. Vou clicar em deletar. Você pode ver que está no nosso app.js linha 26. Já estou conseguindo fazer com que esse card aqui chame uma função do nosso deletar nota lá em cima. Ele já sabe quem é a função, quem vai ser nosso elemento. Aliás, quem é a função que ele tem que chamar.

Se eu tenho que deletar uma nota, agora que já está sendo chamado o deletar nota no nosso app, nossa classe de app, como faço para mudar o estado, o array de notas? Se quero deletar uma nota preciso mudar um valor nesse array. Para mudar um valor nesse array preciso receber esse array e alterar ele. Então, vou pegar nosso array let array de notas, vai ser igual this.state.notas.

Estou recebendo, não estou fazendo nada de mais. Estou pegando nosso array de notas que tenho como meu estado e trazendo para essa variável para conseguir manusear essa variável sem ficar digitando isso o tempo inteiro.

A partir do momento que quero alterar e deletar um item no meio dessa lista preciso vir aqui, fazer um array de notas splice. O splice é um método que vai deletar o nosso item. Para deletar vai precisar saber de algumas informações. Ele vai precisar saber o item que quero deletar, onde começo a deletar itens.

Por enquanto só vou falar que ele vai deletar sempre o índice 0, vai sempre deletar a partir do começo do meu array. E a quantidade de itens que ele vai deletar sempre vai ser 1, porque estou sempre deletando um item de cada vez.

Se eu tiver dessa maneira, nosso array de notas como splice, consigo também uma vez que alterei esse array de notas, o splice é uma função que altera o próprio array, então não preciso atribuir isso em lugar nenhum, vou poder agora uma vez que tenho esse array de notas chamar o set state, nosso novo estado para a gente ter o novo estado a partir desse array de notas.

Vou vir aqui, dar um this.setState, e quero um novo estado, e nosso novo estado vai ser nosso array de notas, nosso notas vai ser um objeto, notas array de notas. O nosso notas aqui, nosso elemento notas vai receber o valor desse array que a gente acabou de deletar o item, e o set state vai fazer com que esse elemento renderize.

Vamos fazer isso, vamos voltar para o nosso card. Se eu escrever card 1, card 2, vamos colocar em sequência, card 3, se eu deletar o primeiro, cliquei nele, deletou, já está deletando. Agora, se eu vier aqui tenho o 12 e 123, se eu deletar o 123 ele deletou o 12, porque o que a gente fez foi que estou deletando sempre o primeiro índice do array. Não quero deletar sempre o primeiro índice, quero deletar o índice que representa aquele card.

No caso aqui, se eu colocar 123 e clicar nesse card aqui, ele é o índice 2, ele é 0, 1, 2, quero deletar a partir do índice 2 do meu array, e não a partir do índice 0, que seria o primeiro card. Como a gente vai fazer isso?

Para isso preciso receber aqui qual o índice que quero deletar. Esse deletar nota vai receber o index. Ou índice. E esse índice a gente vai usar no nosso splice. A partir do momento que sei quem é o índice que vou chamar vou ter que usar isso de fato a meu favor.

Para vir aqui e deletar uma nota preciso passar um índice agora. E meu card, na hora que for chamar essa função de onClick vai precisar saber quem é o índice dele. Como a gente vai receber para esse card qual o índice?

Lembra quando a gente fez a nossa lista de notas no nosso map, a gente tinha que por aqui o índice na nossa key para nossa lista, e essa key por acaso usou o index do nosso array. Então 0, 1, 2, 3, porque é um jeito fácil da gente trabalhar. Mas outra vantagem de ter esse index aqui é que consigo passar esse index para nosso card nota, então, se eu pegar nosso índice e falar que ele é igual ao index que a gente chamou, nossa propriedade index índice do card nota vai ser igual index que ele recebeu do map, ele vai saber quem é o índice dele e vai conseguir passar essa informação lá para cima, para o app.js.

No meu card notas tenho uma propriedade que chama índice e na hora que for chamar meu onClick, ao invés de chamar dessa maneira vou criar um método para ele separado. Apagar vai ser um método e vai chamar o this.props.apagarNota, e esse apagar nota vai ter que receber o índice. Esse índice só vou jogar em outra variável, então const índice vai ser igual this.props.indice.

Estou pegando na propriedade que chamei de índice, que recebi, minha lista de notas está passando essa propriedade e estou atribuindo essa variável, porque quando chamo minha função de apagar nota consigo passar esse índice para ele saber quem é o card e apagar só o card certo.

Dessa maneira, no meu onClick ao invés de chamar o this.props.apagarNota vou chamar o this.apagar e aí só faço um bind, porque a gente está lidando com evento, chamando o this ali em cima, então para não ter erro nenhum vou chamar o bind, fazer a associação em tempo de execução de quem é o this que ele tem que chamar na hora que for executar essa função.

Se eu fizer isso e voltar lá, de novo vamos criar nosso card 1, 12 e 123, e se eu apagar o 12 agora sim ele apagou exatamente o card 12. O 1 e 123 que eram cards que não queria mexer continuaram lá. Se eu criar mais um e deletar o primeiro está aqui. Se eu deletar o último está aqui. O 123 continua, se eu deletar ele está tudo certo, não tenho mais quem deletar. Dessa maneira a gente consegue deletar elementos do nosso array de notas e fazer essa transferência de informações entre vários níveis de hierarquia da nossa aplicação.

Sobre o curso React: ciclo de vida dos componentes

O curso React: ciclo de vida dos componentes possui 145 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso: