https://github.com/gustavo-p0/react-typescript-alura

App desenvolvido junto ao curso 'React: escrevendo com Typescript' da Alura.
https://github.com/gustavo-p0/react-typescript-alura

alura alura-studies cssmodules reactjs sass typescript

Last synced: 29 days ago
JSON representation

App desenvolvido junto ao curso 'React: escrevendo com Typescript' da Alura.

• Host: GitHub
• URL: https://github.com/gustavo-p0/react-typescript-alura
• Owner: gustavo-p0
• License: mit
• Created: 2024-02-20T19:02:33.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-02-21T20:11:52.000Z (9 months ago)
• Last Synced: 2024-10-02T07:01:44.385Z (about 1 month ago)
• Topics: alura, alura-studies, cssmodules, reactjs, sass, typescript
• Language: TypeScript
• Homepage: https://react-typescript-alura.vercel.app
• Size: 55.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React: Escrevendo com Typescript

[🌐 Live Demo](https://react-typescript-alura.vercel.app/)

![preview](https://github.com/gustavo-p0/react-typescript-alura/assets/83771792/dbb32f8a-418c-4fa7-a89f-e73923b56584)

Aplicação prática chamada "Alura Studies", combina React e Typescript para criar um ambiente web onde poderá adicionar tarefas de estudo junto com o tempo dedicado a cada uma. Por exemplo, você poderá adicionar uma tarefa "React" com 1 hora de tempo e outra "Typescript" com 50 minutos.

Estas tarefas serão exibidas em uma lista, onde poderão ser selecionadas. Ao selecionar uma tarefa, o tempo associado será exibido em um cronômetro. Por exemplo, selecionando "React", o cronômetro mostrará "60:00". Posteriormente, ao adicionar "Typescript", o cronômetro mudará para "00:50".

Além disso, será possível iniciar o cronômetro com o botão "Começar", o que ativará o temporizador. Quando o tempo de uma tarefa chegar a zero, ela será marcada como completada e não poderá mais ser clicada.

## Tecnologias usadas

- NPM

- React

- Typescript

- CSS Modules

- SASS

## Como Executar o Projeto

1. Clone o repositório.

2. Navegue até o diretório do projeto.

3. Execute `npm install` para instalar as dependências.

4. Execute `npm run dev` para iniciar a aplicação localmente.

5. Acesse a aplicação em `localhost:5173`

---

## Sobre o curso

Autores do Curso: Alura e Luiz Fernando Ribeiro.

[Página do curso](https://cursos.alura.com.br/course/react-modernizando-escrever-typescript)

**Ementa do Curso:**

- **Componentização e Estado:** Entenda os conceitos fundamentais de React, incluindo componentização, props e state, e saiba como aplicá-los em conjunto com Typescript.

- **Gestão de Estilos:** Evite sobreposições de CSS com CSS Modules e SASS, garantindo uma estilização mais organizada e eficiente para seus componentes React.

- **Utilização de Hooks:** Explore o uso dos hooks `useState` e `useEffect`, compreendendo como eles eram utilizados em class components e como podem ser aplicados de forma mais eficaz com Typescript.

- **Boas Práticas e Clean Code:** Aprenda a deixar seu código mais limpo e documentado, aplicando conceitos como DRY (Don't Repeat Yourself) e SRP (Single Responsibility Principle) para um código mais legível e fácil de manter.