Você vai desenvolver uma lista com filtros de planetas do universo de Star Wars usando Context API e Hooks para controlar os estados globais.
Segue o link do deploy de um modelo do projeto: http://trybe-starwars-exemplo.surge.sh/
- Front - Aula 9.1 - React Hooks - useState e useEffect - Tribo A | Tribo B
- Front - Aula 9.2 - React Hooks - context API - Tribo A | Tribo B
- Front - Aula 9.3 - React Hooks - custom Hooks - Tribo A | Tribo B
- Academia de Front - Hooks customizados e ContextApi - Emerson Saturnino
- Academia de Front - Lidando com Filtros - Henrique Jensen
- Manipulação de Arrays nos Estado - Arthur Procópio
- Como aumentar a minha cobertura de testes no teste de coverage?
- Esquenta do projeto com Summers - Tribo A | Tribo B - Caren Pontes
- Entendendo as peças da Context API - Tribo A | Tribo B
- Como se tornar uma pessoa caçadora de bugs? Confira aqui as 15 dicas preparadas pelo Blog da Trybe de como fazer um bom Code Review.
- No AMA da turma 29 com o Rafael Luiz, um dos fundadores da Trybe, ele indicou a leitura do livro "TED Talks - O Guia Oficial do TED Para falar em Público". Confira aqui a thread que o Lívio Lopes (tribo A) postou sobre o livro no canal da turma.
- Estamos chegando à reta final de Front-end e você se desenvolveu bastante desde o início do módulo. Que tal ler este artigo da Forbes, divulgado na penúltima edição do Trybe News, sobre os processos de mudança como empurrões para o nosso crescimento?
- Checklist do Context API
- Mapa Mental - Context API - Thalles Leite (Tribo B)
- Abrir o PR para esse projeto
- Criar seu cronograma de planejamento, use como base a seção 9 de Frontend
-
1. Faça uma requisição para o endpoint /planets da API de Star Wars e preencha uma tabela com os dados retornados. Remova a coluna residents quando for exibir a tabela.
-
2. Crie um filtro de texto para a tabela
-
3. Crie um filtro para valores numéricos
-
4. Implemente múltiplos filtros numéricos
-
5. Desenvolva testes para atingir 30% de cobertura total da aplicação
-
6. Não utilize filtros repetidos
-
7. Apague um filtro de valor numérico ao clicar no ícone X de um dos filtros e apague todas filtragens numéricas simultaneamente ao clicar em outro botão de Remover todas filtragens
-
8. Desenvolva testes para atingir 60% de cobertura total da aplicação
-
9. Ordene as colunas de forma ascendente ou descendente
- 10. Desenvolva testes para atingir 90% de cobertura total da aplicação
O projeto possui 09 requisitos obrigatórios, para ser aprovado dentro do prazo regular vai ser necessário fazer no mínimo 8 dos 9 requisitos obrigatórios.
- Dúvidas comuns - Se outras pessoas tiveram, é possível que você também tenha!
- Ao rodar o
npm install
,npm start
,npm test
, ter certeza que entrou na pasta correta do projeto; - Lembrar de definir os
propTypes
em cada componente que estiver recebendoprops
; - Colocar a
key
sempre que estiver renderizando uma lista de elementos HTML no React;
- Ao rodar o
Ao final desse projeto, você vai ter uma aplicação muito estruturada usando boas práticas de desenvolvimento e que pode (e deve) ser compartilhado com muito orgulho no seu Linkedin. Portanto, vamos com tudo para esse projeto!