|
1 | | -# Desafio 01 - Conceitos do React |
| 1 | +<p align="center">Ignite Challenge</p> |
| 2 | +<h1 align="center"> |
| 3 | + to.do |
| 4 | +</h1> |
2 | 5 |
|
3 | | -## 💻 Sobre o desafio |
| 6 | +<div aling="center" id="top"> |
4 | 7 |
|
5 | | -Nesse desafio, você deverá criar uma aplicação para treinar o que aprendeu até agora no ReactJS |
6 | | -Essa será uma aplicação onde o seu principal objetivo é uma pequena aplicação de atividades a fazer, para treinar um pouco mais sobre manipulação do estado no React. |
| 8 | + <p align="center"> |
| 9 | + <img alt="Version" src="https://img.shields.io/github/v/tag/ignite-projects/todo-ignite"> |
| 10 | + <img alt="Stars" src="https://img.shields.io/github/stars/ignite-projects/todo-ignite"> |
| 11 | + <img alt="Issues" src="https://img.shields.io/github/issues/ignite-projects/todo-ignite?logoColor=1DA1F2"> |
| 12 | + </p> |
7 | 13 |
|
8 | | -- Adicionar uma nova tarefa |
9 | | -- Remover uma tarefa |
10 | | -- Marcar e desmarcar uma tarefa como concluída |
| 14 | + <p align="center"> |
| 15 | + <a href="#about">About</a>   |   |
| 16 | + <a href="#technologies">Technologies</a>   |   |
| 17 | + <a href="#requirements">Requirements</a>   |   |
| 18 | + <a href="#installation">Installation</a>   |
| 19 | + </p> |
| 20 | +</div> |
11 | 21 |
|
12 | | -A seguir veremos com mais detalhes o que e como precisa ser feito 🚀 |
| 22 | +<p align="center"> |
| 23 | + <img alt="project cover" src=".github/images/screen-home-todo-ignite.png"> |
| 24 | +</p> |
13 | 25 |
|
14 | | -## Template da aplicação |
| 26 | +## About |
15 | 27 |
|
16 | | -Para realizar esse desafio, criamos para você esse modelo que você deve utilizar como um template do GitHub. |
| 28 | +Small to-do web app developed using react.js. |
17 | 29 |
|
18 | | -O template está disponível na seguinte URL: |
19 | | -https://github.com/rocketseat-education/ignite-template-reactjs-conceitos-do-react |
| 30 | +## Technologies |
20 | 31 |
|
21 | | -Dica: Caso não saiba utilizar repositórios do GitHub como template, temos um guia em [nosso FAQ](https://www.notion.so/FAQ-Desafios-ddd8fcdf2339436a816a0d9e45767664). |
| 32 | +- React.Js |
| 33 | +- TypeScript |
| 34 | +- Scss |
22 | 35 |
|
23 | | -## O que devo editar na aplicação? |
| 36 | +## Requirements |
24 | 37 |
|
25 | | -Com o template já clonado, as depêndencias instaladas, você deve completar onde não possui código com o código para atingir os objetivos de cada teste. Nesse desafio, você deve editar apenas o seguinte arquivo para completar as funcionalidades da aplicação: |
| 38 | +- [Git](https://git-scm.com/) |
| 39 | +- [Node.js](https://nodejs.org/en/) |
| 40 | +- [Yarn](https://yarnpkg.com/) |
26 | 41 |
|
27 | | -- [src/components/TaskList.tsx;](https://github.com/rocketseat-education/ignite-template-reactjs-conceitos-do-react/blob/main/src/components/TaskList.tsx) |
| 42 | +## Installation |
28 | 43 |
|
29 | | -## components/TaskList.tsx |
| 44 | +To make it run on your machine, follow the steps below |
30 | 45 |
|
31 | | -Esse é o componente responsável por todas as funcionalidades da aplicação, é um componente simples, mas onde botaremos em prática várias partes da manipulação do estado. |
| 46 | +```bash |
| 47 | +# Clone the repository in some folder on your machine |
| 48 | +$ git clone git@github.com:ignite-projects/todo-ignite.git |
32 | 49 |
|
33 | | -Você deve criar as funcionalidades para as três funções presentes nesse arquivo, que são: |
| 50 | +# Enter the repository |
| 51 | +$ cd todo-ignite |
34 | 52 |
|
35 | | -- **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. |
36 | | -- **handleToggleTaskCompletion:** Deve alterar o status de `isComplete` para uma task com um ID específico que é recebido por parâmetro. |
37 | | -- **handleToggleTaskCompletion:** Deve alterar o status de isComplete para uma task com um ID específico que é recebido por parâmetro. |
| 53 | +# Install the dependencies by typing in the terminal |
| 54 | +$ yarn install |
38 | 55 |
|
39 | | -## Especificação dos testes |
40 | | - |
41 | | -Em cada teste, tem uma breve descrição no que sua aplicação deve cumprir para que o teste passe. |
42 | | - |
43 | | -> 💡Caso você tenha dúvidas quanto ao que são os testes, e como interpretá-los, dê uma olhada em [nosso FAQ](https://www.notion.so/FAQ-Desafios-ddd8fcdf2339436a816a0d9e45767664) |
44 | | -
|
45 | | -Para esse desafio, temos os seguintes testes: |
46 | | - |
47 | | -## Teste TaskList.spec.tsx |
48 | | - |
49 | | -- should be able to add a task |
50 | | - 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 é: |
51 | | - |
52 | | -```ts |
53 | | -interface Task { |
54 | | - id: number; |
55 | | - title: string; |
56 | | - isComplete: boolean; |
57 | | -} |
| 56 | +# Run the application |
| 57 | +$ yarn dev |
58 | 58 | ``` |
59 | 59 |
|
60 | | -- should not be able to add a task with an empty title |
61 | | - |
62 | | -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. |
63 | | - |
64 | | -- should be able to remove a task |
65 | | - |
66 | | -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. |
67 | | - |
68 | | -- should be able to remove a task |
69 | | - |
70 | | -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. |
71 | | - |
72 | | -- should be able to check a task |
73 | | - |
74 | | -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`. |
75 | | - |
76 | | -## Como deve ficar a aplicação ao final? |
77 | | - |
78 | | -Está com dúvidas (ou curioso 👀) para ver como deve ficar a aplicação ao final do desafio? Deixamos abaixo um vídeo mostrando as principais funcionalidades que você deve implementar para te ajudar (ou matar sua curiosidade 👀). |
79 | | - |
80 | | -## 📅 Entrega |
| 60 | +<div align="right"> |
| 61 | +Connect with me |
81 | 62 |
|
82 | | -Esse desafio deve ser entregue a partir da plataforma da Rocketseat. Envie o link do repositório que você fez suas alterações. Após concluir o desafio, além de ter mandado o código para o GitHub, fazer um post no Linkedin é uma boa forma de demonstrar seus conhecimentos e esforços para evoluir na sua carreira para oportunidades futuras. |
| 63 | +[](https://www.linkedin.com/in/robsonnatanael) |
| 64 | +[](https://twitter.com/robsonnatanael) |
| 65 | +[](https://app.rocketseat.com.br/me/robsonnatanael) |
83 | 66 |
|
84 | | -Link oficial do [desafio](https://www.notion.so/Desafio-01-Conceitos-do-React-51e4099a6e2f4d4bae94f9fe75bb769d). |
| 67 | +</div> |
0 commit comments