Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eliasmcastro/rocketseat-ignite-reactjs-desafio-conceitos-do-react
Desafio 01 (Conceitos do React) do Ignite [Trilha ReactJS] da Rocketseat
https://github.com/eliasmcastro/rocketseat-ignite-reactjs-desafio-conceitos-do-react
reactjs rocketseat typescript
Last synced: 17 days ago
JSON representation
Desafio 01 (Conceitos do React) do Ignite [Trilha ReactJS] da Rocketseat
- Host: GitHub
- URL: https://github.com/eliasmcastro/rocketseat-ignite-reactjs-desafio-conceitos-do-react
- Owner: eliasmcastro
- Created: 2024-11-13T01:30:18.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-14T01:12:41.000Z (3 months ago)
- Last Synced: 2024-11-14T02:20:57.666Z (3 months ago)
- Topics: reactjs, rocketseat, typescript
- Language: TypeScript
- Homepage:
- Size: 195 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Desafio: Conceitos do React
Criação de uma aplicação para gerenciar tarefas (todos) utilizando o ReactJS
Como executar o projeto |
Sobre o Desafio
Front-end
## Como executar o projeto
### Clonar este repositório
```bash
git clone https://github.com/eliasmcastro/rocketseat-ignite-reactjs-desafio-conceitos-do-react.git
```
### Requisitos
- [Node.js](https://nodejs.org) na versão 20.16.0
- [Yarn](https://yarnpkg.com) na versão 1.22.5
### Passos para a execução
**1. Executar aplicação**
Instalar as dependências do projeto
```bash
yarn
```
Iniciar o servidor de desenvolvimento
```bash
yarn dev
```
A aplicação começará a ser executada em http://localhost:8080
**2. Executar testes unitários**
Para executar os testes unitários
```bash
yarn test
```
## Sobre o desafio
### Funcionalidades
- Adicionar uma nova tarefa
- Remover uma tarefa
- Marcar e desmarcar uma tarefa como concluída
### TaskList.tsx
Você deve criar as funcionalidades para as três funções presentes nesse arquivo, que são:
- **handleCreateNewTask**: Deve ser possível adicionar uma nova task no estado de `tasks`, com os campos `id` que deve ser gerado de forma aleatória, `title` que deve ser um texto e `isComplete` que deve iniciar como false.
- **handleToggleTaskCompletion:** Deve alterar o status de `isComplete` para uma task com um ID específico que é recebido por parâmetro.
- **handleRemoveTask:** Deve receber um ID por parâmetro e remover a task que contém esse ID do estado.
### Específicação dos testes
#### Teste TaskList.spec.tsx
- **should be able to add a task**
Para que esse teste passe, você deve permitir que task seja criada e com isso, exibida em tela. As taks criadas devem conter os atributos seguindo o padrão da interface, que é:
```tsx
interface Task {
id: number;
title: string;
isComplete: boolean;
}
```
- **should not be able to add a task with an empty title**
Para que esse teste passe, antes de criar uma nova task, você deve validar se algo foi digitado no input e não permitir a criação da task caso o valor seja vazio, caso o valor digitado seja vazio, você deve impedir a criação da task.
- **should be able to remove a task**
Para que esse teste passe, você deve permitir que ao clicar no botão com ícone de uma lixeira, a task relacionada a esse botão seja removida do estado da aplicação, consequentemente sendo removida da tela.
- **should be able to check a task**
Para que esse teste passe, você deve permitir que ao clicar no checkbox ao lado da task, ela seja marcada como concluída ou não concluída de acordo com seu estado atual, alterando seu valor de `isComplete` de `false` para `true` ou ao contrário, de `true` para `false`.