TO-DO List em React.js

Um projeto simples feito para aprender conceitos e praticar o ReactJS. O projeto consiste em uma "To-do List", ou seja, uma lista de afazeres.

Preview do projeto:

Funções do projeto

O projeto conta com algumas funções:

• Adicionar afazeres
• Editar afazeres
• Remover afazeres

Tecnologias e coneitos usados no projeto

Foram utilizados diversos conceitos e tecnologias no projeto, tudo com intuito de aprendizado.

Organização

• Foi utilizado o conceito de organização em pastas deixando o projeto mais profissional e padronizado para possibilitar as manutenções e atualizações posteriores, seja por mim ou por outros desenvolvedores que possam contribuir com o projeto.

Components

• Outro conceito utilizado foi o conceito dos componentes no React, onde podemos separar cada componente em arquivos e depois importar todos no arquivo principal ou no arquivo em que seja necessário importar. Exemplo: Fazer o header e o footer separados, e depois importar eles separadamente no App.tsx (arquivo principal). Assim, mantém uma organização e um padrao melhor no projeto.

Modules

• Foi utilizado módulos no projeto, principalmente para os estilos CSS, que posteriormente foram importados em cada componente para a estilização.

State Hook

• Foi utilizado State Hooks no projeto para manter o nosso projeto dinâmico e ter uma produtividade maior.

Como iniciar o site

Foi utilizado o Node e o gerenciador de pacotes NPM, e o React nos possibilita iniciar o servidor para ligar o website. Para ligar, precisamos:

• Primeiramente, devemos instalar as dependências do projeto para que seja possível rodar: npm install
• Após instalar os pacotes necessários, podemos rodar o projeto: npm run start

Por padrão, o site será inicializado na porta 3000. Sendo o link padrão: http://localhost:3000/