Dev JS para React - Pt 4

Fala galera, bora para a quarta parte parte.

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

Hoje vamos criar nossos posts através de listas.

E para isso vamos utilizar nosso último código e criar ele através de uma lista, então agora você deve estar se perguntando, como assim uma lista?

Vamos imaginar que você precisa carregar uma lista de posts que vieram de seu banco de dados e precisa criar isso de maneira dinâmica, utilizando um loop para criar os posts.

Para realizar isso nosso código ficaria como abaixo

<html>
       <head>
         <style>
            .post-component{
                text-align: center;
            }
            .post-header-component{
                display: flex;
                justify-content: center;
            }
            .user-name-description,.post-description-component{
                padding-left: 9px;
                padding-top: 9px;
            }
         </style>
       </head>
      <body>

        <div id="instagramPostApp"></div>

        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <!-- Babel Script -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="text/jsx">

           const instagramPostApp = document.getElementById("instagramPostApp")

           function AvatarImage() {
               return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/256-512.webp" width="75" />
           }

           function Username() {
               return <span><strong>Nome do Usuário</strong></span>
           }

           function UserDescription() {
               return <p><small>Lorem ipsum summet</small></p>
           }

           function PostImage() {
               return <img src="https://posts-decriptando.s3.amazonaws.com/post-instagram-component/istockphoto-1226328537-170667a.jpeg" />
           }

           function PostDescription() {
               return <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus...</span>
           }

           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 >
                        <div class="post-description-component">
                            <Username username={props.username} />: <PostDescription />
                        </div >
                    </div >
               )
            }
           
            function BodyComponent() {
               const aPosts = [
                   {
                       username: "José da Silva"
                   },
                   {
                       username: "Roberto Pereira"
                   },
                   {
                       username: "Manuel Martins"
                   }
               ];

               return (
                    <div class="body-component">
                        {
                            aPosts.map(oPost => (
                                <PostComponent username={oPost.username} />  
                            ))
                        }
                    </div >
               )
            }

            ReactDOM.render(<BodyComponent/>, instagramPostApp)

        </script>

      </body>
</html>
Perfeito, agora se você abrir esse arquivo no browser você deve visualizar o seguinte:


Porém Olha o que apareceu no nosso Console.




Como você pode ver o React nos trouxe esse aviso sobre a falta de uma chave prop. Isso ocorre porque o React precisa de algo para identificar os itens de um array, para que ele saiba quais elementos deve atualizar no DOM.

E por enquanto, podemos usar os nomes pois eles são exclusivos no momento, mas é recomendável usar algo garantido como exclusivo, como uma ID.


Simples simples, apenas adicionar um novo prop chamada key e passar para ela sua chave, como abaixo:
  <!-- ... --->
               return (
                    <div class="body-component">
                        {
                            aPosts.map(oPost => (
                                <PostComponent key={oPost.username} username={oPost.username} />  
                            ))
                        }
                    </div >
               )
  <!-- ... --->

Pronto você conseguiu, avançou mais um passo no seu caminho de conhecimento do React.

E se quiser que tal enviar todos os outros dados para seu post e tornar ele dinâmico ao ponto de ser criado completamente com os dados da lista, eu se que você consegue!

Por hoje é só pessoal, espero que tenham gostado, na próxima parte vamos criar algumas interações.

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Função para Formatar CEP, CPF, CNPJ e TELEFONE

Imagem
Pessoal estou atualiando o Post, graças a correção do  Fernando Serejo , e aos pedidos do pessoal para possuir formatação para o novo padrão de 9 digitos. Muito obrigado Fernando pela ajuda .( 05/12/2016 ) Hi Folks, ultimamente trabalhando pacas, mas vamos la fiz uma função simples só para deixar com a galera aqui, uma func para formatar CPF, CNPJ, CEP e Telefone.. UHUUUUUUUUUUUUUUUUULLLLLLLLLLLLLL Vamos la galera ela é bem simples.... 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <?php /** * Função para formatar Telefone, CEP, CPF, CNPJ e RG * * Escolher tipo de formatação ( fone, cep, cpf, cnpj ou rg) * Lembrar de colocar em lowercase * @param $tipo string * * Enviar string que para ser formata ex: 13974208014; * @param $string string * * Quantidade de caracteres a serem formatados, * só serve para o...
Leia mais

Sem som no Ubuntu. Resolvido!

Imagem
Bom dia Pessoal, como estão todos? Faz uma semana que venho enfrentando problemas com o SOM do meu Ubuntu, fiquei meio triste pois tentei varios e varios tutoriais para fazer funcionar e não obtive sucesso. Então vamos la vou dar uma dica para o pessoal e uma solução também, primeiramente pessoal veja se os seus videos do YouTube não estão passando super rapidos e ai travando e novamente rapidos, caso isto esteja ocorrendo verifique nas suas configurações de som se não está ativo para o som sair por HDMI, afinal esta saida é para o Video rsrs. Eu tive este problema também. Agora para o Problema de som o que fazer? UHUUUUUUUUUUUUUUUUUUUU Só rodar os comando abaixo: sudo apt-get remove --purge alsa-base sudo apt-get remove --purge pulseaudio sudo apt-get install alsa-base sudo apt-get install pulseaudio sudo alsa force-reload Simples né! rsrsrs Pessoal se não funcionar podem comentar ou me mandar uma mensagem que eu ajudo vocês a resolverem.
Leia mais

Definir / Midificar / Resetar senha root no MySQL

Imagem
Primeiramente eu vou dizer, você vai conseguir alterar sua senha em apenas 4 passos =D Você duvida neh ???? Testado em - Ubuntu Linux 12.04.1 MySQL 5.5.29 - Ubuntu Linux 7.10 MySQL 5.0.45.  - Ubuntu Linux 6.06 MySQL 4.1.15. Primeiramente vamos entrar no terminal =D Pause o MySQL Server. sudo /etc/init.d/mysql stop Inicicie esta configuração mysql sudo mysqld --skip-grant-tables & Efetue o login no MySQL as root. mysql -u root mysql Altera SUASENHAAQUI para o seu novo password. UPDATE user SET Password=PASSWORD(' SUASENHAAQUI ') WHERE User='root'; FLUSH PRIVILEGES;
Leia mais