Dev JS para React - Pt 5 (Final)

 Fala galera, bora para a quarta parte parte.

⚠️ Se você não viu a quarta parte, comece por aqui ⚠️

Hoje vamos adicionar uma interatividade supimpa.

Vamos criar o Like.

E para isso vamos utilizar nosso último código e vamos primeiramente adicionar um botão de likezin, como abaixo.

<!-- ... --->
           function PostComponent(props) {
               return (
                    <div class="post-component">
                        <div class="post-header-component">
                            <div class="user-avatar">
                                <AvatarImage />
                            </div >
                            <div class="user-name-description">
                                <Username username={props.username} />
                                <UserDescription />
                            </div >
                        </div >
                        <div class="post-body-component">
                            <PostImage />
                        </div >
                        <button>❤️</button> <!-- AQUI --->
                        <div class="post-description-component">
                            <Username username={props.username} />: <PostDescription />
                        </div >
                    </div >
               )
            }
<!-- ... --->

Perfeito, agora se você abrir esse arquivo no browser você deve visualizar o seguinte:

E agora vem a hora legal, vamos criar nossa interatividade através de uma função que será chamada toda vez que ação for aciona.

Bora criar uma função antes da instrução return chamada handleClick():

Como o código abaixo:

<!-- ... --->
          
           function handleClick() {
             alert("I Like It");
           }

           function PostComponent(props) {
               return (
                    <div class="post-component">
                        <div class="post-header-component">
                            <div class="user-avatar">
                                <AvatarImage />
                            </div >
                            <div class="user-name-description">
                                <Username username={props.username} />
                                <UserDescription />
                            </div >
                        </div >
                        <div class="post-body-component">
                            <PostImage />
                        </div >
                        <button onClick={handleClick}>❤️</button> <!-- AQUI --->
                        <div class="post-description-component">
                            <Username username={props.username} />: <PostDescription />
                        </div >
                    </div >
               )
            }
<!-- ... --->

Agora se você rodar o código em seu browser e clicar no botão Like, você deve visualizar um alert com sua mensagem, como abaixo:

Agora vamos falar um pouco de Estados

O React tem um conjunto de funções chamadas hooks. E essas hooks permitem que você adicione lógica adicional, como estado, aos seus componentes. 

Você pode pensar em estado como qualquer informação que muda ao longo do tempo, geralmente acionada pela interação do usuário, como número de likes, comentários e etc.

Nós vamos usar o estado para armazenar e incrementar o número de vezes que um usuário clicou no botão ❤️. Vamos utilizr o useState() do React para gerenciar o estado.

E agora vamos passo a passo juntos, pois pode ser um pouco trick, por isso vou mostrar parte a parte e no final o código todo para rodarmos.

1- O useState() retorna uma array e você pode acessar e usar os valores do array dentro de nosso componente:

const [] =  React.useState();

2- O  primeiro item do array é o valor do estado, que pode ter qualquer nome. Em nosso caso vamos utilizar likes:

const [ likes ] =  React.useState();

3 - O segundo item do array é uma função para atualizar o valor. E podemos nomear a função de setLikes, pois é comum utilizarmos o set no React e já que estamos querendo dar um set para o likes:

const [ likes, setLikes ] =  React.useState();

4 -  E também podemos adicionar o valor inicial do estado de curtidas: 0.

const [ likes, setLikes ] =  React.useState(0);

Pronto e agora você so precisa colocar o estado na nossa função de post e adicionar um increment em nossa função que é acionada quando clicarmos no Like.

Simples simples, vai tudo ficar como aqui em baixo.

<!-- ... --->
           function PostComponent(props) {
                
               const [ likes, setLikes ] =  React.useState(0);
               
               function handleClick(){
                 setLikes( likes + 1 )
               }
                
               return (
                    <div class="post-component">
                        <div class="post-header-component">
                            <div class="user-avatar">
                                <AvatarImage />
                            </div >
                            <div class="user-name-description">
                                <Username username={props.username} />
                                <UserDescription />
                            </div >
                        </div >
                        <div class="post-body-component">
                            <PostImage />
                        </div >
                        <button onClick={handleClick}>❤️ ( {likes} ) </button>
                        <div class="post-description-component">
                            <Username username={props.username} />: <PostDescription />
                        </div >
                    </div >
               )
            }
<!-- ... --->

Parabéns você conseguiu e agora já pode seguir sozinho em sua jornada React

Por hoje é só pessoal, espero que tenham gostado, e nos próximos posts foi iniciar outra jornada para backend.

Github dos arquivos

Você conhece três conceitos essenciais do React: componentes, props e estado. 

E ter uma base sólida nisso ajudará você a começar a criar aplicativos React. 

E claro que se você quiser conhecer um pouco mais sobre o React, você nunca pode se esquecer de dar uma olhada na documentação oficial