Loading repository data…
Loading repository data…
brunoCabralSilva / repository
Décimo primeiro projeto da trybe com o objetivo de ler o estado de um componente e usá-lo para alterar o que exibimos no browser, inicializar um componente dando a ele um estado pré-definido e atualizando-o, capturar eventos utilizando a sintaxe do React, criar formulários e transmitir informações de componentes filhos para componentes pais.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Neste projeto, verificamos se voce é capaz de:
Ler o estado de um componente e usá-lo para alterar o que exibimos no browser
Inicializar um componente, dando a ele um estado pré-definido
Atualizar o estado de um componente
Capturar eventos utilizando a sintaxe do React
Criar formulários utilizando sintaxe JSX com as tags: input, textarea, select, form, checkbox
Transmitir informações de componentes filhos para componentes pais via callbacks
Neste projeto você vai desenvolver um jogo no estilo Super Trunfo! Ao utilizar essa aplicação uma pessoa usuária deverá ser capaz de:
Criar um baralho, com o tema livre;
Adicionar e remover uma carta do baralho;
Visualizar todas as cartas que foram adicionadas ao baralho;
Jogar com o baralho criado.
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub no Course sempre que precisar
Você pode acessar um protótipo no link abaixo:
Você deve desenvolver uma aplicação em React com manipulação de estados em classes. Essa aplicação simulará um jogo de Super Trunfo, desde a criação das cartas do seu baralho até a funcionalidade de jogar.
Na renderização das cartas, sua aplicação deverá possuir três filtros de listagem de cartas: filtro por nome, por raridade e por Super Trunfo. Os filtros nome e raridade são acumulativos. O filtro Super Trunfo funciona de forma independente.
O tema do seu baralho é livre, então explore a sua criatividade! Mas use seu bom senso para a criação do seu baralho. Lembre-se das normas de conduta e ética no Manual de Estudante.
Projeto individual.
Serão dois dias de projeto.
Data de entrega para avaliação final do projeto: 20/05/2022 14:00.
Em alguns requisitos será necessária a utilização de renderização condicional. Você pode verificar a documentação do React Renderização Condicional.
Este comportamento é utilizado no React para renderizar, ou não, determinado componente de acordo com uma condição booleana.
No exemplo abaixo, o estado isActiveButton começa como false, e ao clicar no botão Clique em mim!, mudamos esse estado para true.
Na condição da renderização, quando o estado for false, renderizamos o paragrafo Não está ativo! e quando for true, renderizamos o paragrafo Está ativo!.
import React from "react"
class Componente extends React.Component {
constructor() {
super();
this.state = {
isActiveButton: false,
};
}
render() {
const { isActiveButton } = this.state;
return (
<div>
<button onClick={() => this.setState({isActiveButton: true})}>Clique em mim!</button>
{
isActiveButton ? <p>Está ativo!</p> : <p>Não está ativo!</p>
}
</div>
)
}
}
No caso acima, temos duas possibilidades, ativo ou não, ou seja, duas renderizações. Mas se for de apenas uma renderização, como por exemplo, renderizar somente se o tamanho do array for maior do que 0, podemos utilizar o &&:
...
{
array.length > 0 && <p>Array não vazio!</p>
}
...
git clone git@github.com:tryber/sd-021-a-project-tryunfo.git.cd sd-021-a-project-tryunfonpm installnpm start (uma nova página deve abrir no seu navegador com um texto simples)npm test (os testes devem rodar e falhar)mastermaster
git branchmaster
git checkout masterFaç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 o push de uma nova branch)git push (para enviar o commit para o repositório remoto após o passo anterior)Para "entregar" seu projeto, siga os passos a seguir:
students, selecione o time tryber/students-sd-00Para garantir a qualidade do código, vamos utilizar neste projeto 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 no projeto, 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.
⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos checks dos linters.
Vamos utilizar React Testing Library para execução dos testes unitários.
Esse framework de testes utiliza algumas marcações no código para verificar a solução proposta, uma dessas marcações é o atributo data-testid e faremos uso dele aqui.
Na descrição dos requisitos (logo abaixo) será pedido que seja feita a adição de atributos data-testid nos elementos HTML. Vamos a um exemplo para deixar claro 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 criar:
<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 e dessa forma, conseguiremos realizar testes unitários focados no comportamento da aplicação.
Em alguns requisitos, utilizamos o getByRole para poder selecionar os elementos de forma semântica. Portanto atente-se às instruções de cada requisito. Por exemplo, se o requisito pedir explicitamente um button, você deverá utilizar exatamente esse elemento.
Afim de verificar a solução proposta, você pode executar todos os testes unitários 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:
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.
Você também pode rodar apenas um arquivo de teste, por exemplo:
npm test 01.Form.test.js
ou
npm test 01.Form
Uma 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();
});
O Super Trunfo é um jogo de cartas que ficou muito popular no Brasil entre as décadas de 80 e 90, mas que faz bastante sucesso até hoje. Suas regras são bastante simples, por isso ele é considerado um jogo fácil de jogar. Apesar de ter regras simples, cada baralho de Super Trunfo pode ter um tema diferente, o que o torna um jogo bastante divertido.
Originalmente, o jogo de