Aula 14 – React – Card Grid – Listando os Users

More videos
   

Aula 14 – React – Card Grid – Listando os Users

Tutorial React

Tutorial React

Voltar para página principal do blog

Todas as aulas desse curso

Aula 13                        Aula 15

Meus Canais

Toti:

https://www.youtube.com/channel/UCUEtjLuDpcOvR3mIUr-viOA

Backing track / Play-along:

https://www.youtube.com/channel/UCT3TryVMqTqYBjf5g5WAHfA

Código Fluente

https://www.youtube.com/channel/UCgn-O-88XBAwdG9gUWkkb0w

Putz!

https://www.youtube.com/channel/UCZXop2-CECwyFYmHbhnAkAw

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB

Códigos da aula

https://github.com/

Link da documentação oficial:

https://reactjs.org/tutorial/

Aula 14 – React – Card Grid – Listando os Users

O que vamos fazer nessa aula é modificar o nosso projeto, para que ao invés de mostrar um usuário específico, mostre uma lista com todos.

A gente vai pegar todos os usuários no endpoint /users do jsonplaceholder: https://jsonplaceholder.typicode.com/users

Depois de pegar essa lista de usuários, vamos fazer um map() nela, para mostrar algumas informações de cada um dos usuários na lista, em cards espalhados em linhas e colunas no browser.

Dentro da pasta components vamos criar uma subpasta chamada UsersGallery.

Dentro dela, um arquivo chamado usersGallery.component.jsx e um outro chamado usersGallery.css, que vai formatar o grid.

Então, para começar, já deixa o projeto executando, entrando na pasta src e digitando:

npm start

O projeto fica disponível em:

http://localhost:3000/

Então bora lá!

src/components/UsersGallery/usersGallery.component.jsx 


import React  from  'react';
import useFetch from '../../effects/use-fetch.effect';
import User from '../User/user.component';
import './usersGallery.css';

function UsersGallery(){

  const users = useFetch(
      `https://jsonplaceholder.typicode.com/users`
  );
  return (   
    <div className='container'>
        {Array.isArray(users) && users.map((user) => <User user={user} key={user.id} />)}
    </div>
 )
}
export default UsersGallery;

OBS. EXPLICAÇÃO DO MAP (ESQUECI DE EXPLICAR NO VÍDEO)

A parte Array.isArray(users) && é para informar que só é pra renderizar quando, e se users tiver preenchido.

Faça o teste, tire essa parte e dê um refresh na página e veja o que acontece.

O resto do map não tem mistério, ele renderiza um user de cada vez passando o user e o id do user por props.

src/components/UsersGallery/usersGallery.css


.container{
  display: grid;  
  grid-template-columns: repeat(3, minmax(auto-fit, 1fr));
  grid-template-areas: "card card card"
                       "card card card";

  grid-gap: 40px;
  margin: 0 3rem 0;
}

@media(max-width: 1000px){
    .container{
       
        grid-template-columns: repeat(1, minmax(auto-fit, 1fr));

        grid-template-areas:    "card card"
                                "card card"
                                "card card";
    }      
}

@media(max-width: 700px){
    .container{
       
        grid-template-columns: repeat(1, minmax(auto-fit, 1fr));

        grid-template-areas:    "card"
                                "card"
                                "card"
                                "card"
                                "card";
    }      
}

A gente vai alterar o src/App.css.

src/App.css


.App {
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.App > .card {
  margin-top: 25px;
}

Vamos modificar o component User e inserir mais informações do usuário


import React from 'react';
import Card from '../Card/card.component';

const User = ({ user }) => {
  return (
    <Card id={user.id}>
       user ? (
      <div>
        <h3>Username: Name {user.username}</h3>
        <p> Name: {user.name}</p>
        <p> E-mail: {user.email}</p>
        <p> City: {user.address.city}</p>
      </div>
    ) : (
      <p>Usuário não encontrado</p>
    )}
    </Card>
  );
};

export default User;

E no src/App.js podemos remover o <Post postId={15} /> e os imports do User e do Post, já que não vamos utilizar.

src/App.js


import React from 'react';
import UsersGallery from './components/UsersGallery/usersGallery.component';
//import User from './components/user/user.component';
//import Post from './components/Post/post.component';

import './App.css';

const App = props => {
  return (
    <div className='App'>
      <UsersGallery />
      {/* <Post postId={15} /> */}
    </div>
  );
};
export default App;

Poderíamos também remover o componente Post já que não estamos utilizando ele, mas, vou manter ele, de repente a gente pode trabalhar com o endpoint posts em outras aulas.

Os posts tem o id do usuário que fez o post, então, a gente pode, por exemplo, fazer uma listagem de todos os posts de um determinado usuário.

Voltando a essa aula, o que podemos fazer é melhorar a organização do código.

Vamos separar a lógica do map() em uma função a parte, só para ficar mais legível.

Refatorando

src/components/UsersGallery/usersGallery.component.jsx 


import React, { memo } from  'react';
import useFetch from '../../effects/use-fetch.effect';
import User from '../User/user.component';
import './usersGallery.css';

function UsersGallery(){

  const users = useFetch(
      `https://jsonplaceholder.typicode.com/users`
  );
  const renderUsers = (user) => {
      return(<User user={user} key={user.id} />)
  }

  return(   
    <div className='container'>
        {Array.isArray(users) && users.map(renderUsers)}
    </div>
 )
}
export default memo(UsersGallery);

Memo

Para finalizar, vou falar rapidamente do memo, ele é usado para evitar renderizações desnecessárias.

Isso é bom para componentes que só renderiza apresentação.

O memo evita que se o componente pai for atualizado, o componente filho seja renderizado novamente, mesmo se as suas props não mudarem.

Acesse e veja se tá rodando certinho:

http://localhost:3000/

Aula 13                        Aula 15

Todas as aulas desse curso

Voltar para página principal do blog

Toti:

https://www.youtube.com/channel/UCUEtjLuDpcOvR3mIUr-viOA

Backing track / Play-along:

https://www.youtube.com/channel/UCT3TryVMqTqYBjf5g5WAHfA

Código Fluente

https://www.youtube.com/channel/UCgn-O-88XBAwdG9gUWkkb0w

Putz!

https://www.youtube.com/channel/UCZXop2-CECwyFYmHbhnAkAw

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Códigos da aula

https://github.com/

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Link do código fluente no Pinterest

Obrigado, até a próxima e bons estudos. 😉

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>