Aula 14 – React – Card Grid – Listando os Users
Aula 14 – React – Card Grid – Listando os Users
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:
https://digitalinnovation.one/
https://impulser.me/
https://developers.google.com/community/gdg
https://comunidades.tech/
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.
