Aula 14 - React - Card Grid - Listando os Users
Meus Canais
Toti:
Backing track / Play-along:
Código Fluente
Putz!
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:
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
Link da documentação oficial:
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:
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:
Toti:
Backing track / Play-along:
Código Fluente
Putz!
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:
Códigos da aula
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. ;)
