EXERCICIO PASSADO PELA TRYBE QUE CONSISTIA EM CRIAR UMA POKEDEX POR MEIO DE REACT, SEGUEM AS INSTRUÇÕES PASSADAS:
Para realizar o exercício, atente-se a cada passo descrito a seguir e, se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu exercício a partir deste repositório, utilizando uma branch específica e um Pull Request (PR) para colocar seus códigos.
Ao iniciar este exercício, você concorda com as diretrizes do Código de Conduta e do Manual da Pessoa Estudante da Trybe.
🤷🏽♀️ Como entregar
Para entregar o seu exercício você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub e nosso Blog - Git & GitHub sempre que precisar!
👨💻 O que deverá ser desenvolvido
Neste exercício, você vai implementar de forma simplificada uma Pokédex!
Para as pessoas que não estão familiarizadas com o universo Pokémon, a Pokédex é uma enciclopédia de todos os pokémons da natureza.
Aviso: Você pode usar sua imaginação e estilizar a aplicação como desejar.Entretanto, é obrigatório que você implemente pelo menos estes dois componentes:
- Pokedex: esse componente representa a enciclopédia de pokémons. Ele recebe como entrada uma lista de pokémons para serem mostrados na tela. Para cada um desses pokémons recebidos, Pokedex chama o componente citado abaixo (Pokemon).
-
Pokemon: como o próprio nome diz, esse componente representa um Pokémon. Ele recebe como entrada um objeto que contém informações referentes a um Pokémon específico. Esse componente precisa retornar as seguintes informações obrigatórias que serão mostradas para quem usar a aplicação, essas informações devem ser validadas utilizando PropTypes:
- nome do Pokémon;
- tipo do Pokémon;
- peso médio do Pokémon, acompanhado da unidade de medida usada;
- imagem do Pokémon.
📝 Habilidades
Neste exercício, verificamos se você é capaz de:
-
Criar componentes React reutilizáveis;
-
Renderizar as informações contidas em um array em forma de componente;
-
Fazer as validações de PropTypes corretamente.
‼️ Antes de começar a desenvolver
- Clone o repositório
- Use o comando:
git clone git@github.com:tryber/sd-025-b-exercise-pokedex
. - Entre na pasta do repositório que você acabou de clonar:
cd sd-025-b-exercise-pokedex
- Instale as dependências
npm install
.
- Crie uma branch a partir da branch
main
- Verifique que você está na branch
main
- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
main
- Exemplo:
git checkout main
- Exemplo:
- Agora crie uma branch à qual você vai submeter os
commits
do seu exercício- Você deve criar uma branch no seguinte formato:
nome-de-usuario-nome-do-exercicio
- Exemplo:
git checkout -b joaozinho-sd-025-b-exercise-pokedex
- Você deve criar uma branch no seguinte formato:
- Adicione as mudanças ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status
(deve aparecer listada a pasta joaozinho em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .
(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status
(deve aparecer listado o arquivo joaozinho/README.md em verde)
- Exemplo:
- Faça o
commit
inicial- Exemplo:
git commit -m 'iniciando o exercício x'
(fazendo o primeiro commit)git status
(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commit
ao repositório remoto
- Usando o exemplo anterior:
git push -u origin joaozinho-sd-025-b-exercise-pokedex
- Crie um novo
Pull Request
(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Coloque um título para a sua Pull Request
- Exemplo: "Cria tela de busca"
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
⌨️ Durante o desenvolvimento
-
Faça
commits
das alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commits
atualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status
(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add
(para adicionar arquivos ao stage do Git)git commit
(para criar um commit com os arquivos que estão no stage do Git)git push -u origin nome-da-branch
(para enviar o commit para o repositório remoto na primeira vez que fizer opush
de uma nova branch)git push
(para enviar o commit para o repositório remoto após o passo anterior)
🤝 Depois de terminar o desenvolvimento (opcional)
Para sinalizar que o seu exercício está pronto para o "Code Review", faça o seguinte:
-
Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas:
-
No menu à direita, clique no link "Labels" e escolha a label code-review;
-
No menu à direita, clique no link "Assignees" e escolha o seu usuário;
-
No menu à direita, clique no link "Reviewers" e digite
students
, selecione o timetryber/students-sd-025-b
.
-
Caso tenha alguma dúvida, aqui tem um video explicativo.
🕵🏿 Revisando um pull request
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
🎛 Linter
Para garantir a qualidade do código, vamos utilizar neste exercício os linters ESLint
e StyleLint
.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente, execute os comandos abaixo:
npm run lint
npm run lint:styles
Em caso de dúvidas, confira o material do course sobre ESLint e Stylelint.
🛠 Testes
Para avaliar o exercício, iremos utilizar React Testing Library (RTL) na execução dos testes.
Na descrição dos requisitos,logo abaixo, será solicitado que seja feita a adição de atributos data-testid nos elementos HTML.
Vamos a um exemplo de modo a deixar evidente essa configuração: se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action, você pode escrever:
<button data-testid="my-action"></button>
ou
<a data-testid="my-action"></a>
Ou seja, o atributo data-testid="my-action"
servirá para o React Testing Library(RTL) identificar o elemento, dessa forma conseguiremos realizar testes focados no comportamento da aplicação.
Para verificar a solução proposta, você pode efetuar todos os testes localmente, basta executar:
npm test
Especialmente no início, quando a maioria dos testes está falhando, a saída após executar os testes é extensa. Você pode desabilitar temporariamente um teste utilizando a função skip
junto à função it
. Como o nome indica, esta função "pula" um teste. Veja um exemplo:
it.skip("Será validado se o campo de filtro por nome renderiza na tela", () => {
render(<App />);
const filterNameInput = screen.getByTestId(/name-filter/i);
expect(filterNameInput).toBeInTheDocument();
});
Uma estratégia é pular todos os testes no início e ir implementando um teste de cada vez, removendo dele a função
skip
.
Como uma segunda proposta, você também pode rodar apenas um arquivo de teste, por exemplo:
npm test
Outra forma para contornar esse problema é a utilização da função .only
após o it
. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.
it.only("Será validado se o campo de filtro por nome renderiza na tela", () => {
render(<App />);
const filterNameInput = screen.getByTestId(/name-filter/i);
expect(filterNameInput).toBeInTheDocument();
});
🗂 Compartilhe seu portfólio!
Você sabia que o LinkedIn é a principal rede social profissional e compartilhar o seu aprendizado lá é muito importante para quem deseja construir uma carreira de sucesso? Compartilhe esse exercício no seu LinkedIn, marque o perfil da Trybe (@trybe) e mostre para a sua rede toda a sua evolução.
Este componente deverá renderizar um título e uma ul
-
Este componente deverá:
-
ser criado dentro da pasta
src/components
. -
conter uma tag
h1
com o textoPokédex
. -
conter uma tag
ul
. Por enquanto, essa lista estará vazia.
-
-
Renderize esse componente dentro do
App.js
.
O que será verificado
- Será validado se:
-
uma tag
h1
com o textoPokédex
é renderizado dentro do componente<Pokedex />
. -
uma tag
ul
é renderizada dentro do componente<Pokedex />
. -
o componente
<Pokedex />
é renderizado dentro doApp.js
.
-
Este componente deverá renderizar as informações de um pokémon
-
Ele deve ser criado dentro da pasta
src/components
. -
Este componente deverá :
- receber uma
prop
chamadapokemon
, que será um objeto com as informações de um Pokémon, como o exemplo mostrado abaixo:
{ id: 25, name: 'Pikachu', type: 'Electric', averageWeight: { value: 6.0, measurementUnit: 'kg', }, image: 'https://cdn2.bulbagarden.net/upload/b/b2/Spr_5b_025_m.png', moreInfo: 'https://bulbapedia.bulbagarden.net/wiki/Pikachu_(Pok%C3%A9mon)', }
- conter uma tag
li
que envolva todo seu conteúdo.
- receber uma
-
Este componente deverá renderizar as seguintes informações (que estão dentro do objeto recebido via
props
chamadapokemon
):- o nome do Pokémon;
- o tipo do Pokémon;
- o peso médio do Pokémon, acompanhado da unidade de medida usada. Por exemplo: "20 kg";
- a imagem do Pokémon.
-
A imagem deve conter o atributo
alt
com o valor do nome do Pokémon.
O que será verificado
-
Será verificado se o:
-
componente possui a tag
li
envolvendo seu conteúdo. -
nome do Pokémon passado via
props
é renderizado. -
tipo do Pokémon passado via
props
é renderizado. -
peso médio do Pokémon e a unidade de medida passados via
props
serão renderizados.
-
-
Será validado se a imagem do pokémon passado via
props
é renderizada. -
Será validado se a imagem do pokémon possui o atributo
alt
com o nome do pokémon passado viaprops
.
Renderize uma lista com as informações dos Pokémon dentro do componente <Pokedex />
- O componente
<Pokedex/>
deve receber a lista de Pokémon através de umaprops
chamadapokemonList
.
Adicione essa
props
ao componente, caso ainda não tenha a criado.
-
Você encontrará a lista com as informações dos Pokémon no arquivo
src/data.js
. -
Cada Pokémon da lista deverá ser renderizado por um componente
Pokemon
. Passe as informações do Pokémon através daprops
que já existe nesse componente.
💡dicas
- Dependendo da sua implementação, o teste do requisito 1 pode começar a falhar quando você adicionar a lógica de renderizar a lista, a qual é recebida por
props
no componente<Pokedex />
.
Pense em um jeito de garantir um valor padrão para esse
props
, mesmo que nenhum valor seja passado.
- Lembre-se de que, quando você está renderizando uma lista no React, é necessário adicionar um atributo
key
em cada elemento. Você pode usar oid
do Pokémon comokey
.
O que será verificado
-
Se o componente
<Pokedex />
renderiza a quantidade correta de elementos. -
Se todos os elementos da lista são renderizados.
Estilize a aplicação adicionando classes que vão aprimorar seus componentes, de modo que cada conteúdo listado seja um card