---
# System prepended metadata

title: curso-fullstack-devinvestidor-react

---

# curso-fullstack-devinvestidor-react

<img src="https://i.imgur.com/1fSiK8h.png" width="150" />
<img src="https://i.imgur.com/5wl4uSk.png" height="250" /> 

### [Repositório Versão Final](https://github.com/thiagocordeirooo/curso-fullstack-devinvestidor-react/tree/final)

## Aula 1 - Iniciando ambiente
- [x] [CRA](https://pt-br.reactjs.org)
    - [x] [prettier](https://prettier.io/)
    - [x] [jsconfig](https://code.visualstudio.com/docs/languages/jsconfig)
- [x] [material-ui](https://material-ui.com/)
    - [x] CssBaseline
    - [x] [Theming](https://material-ui.com/customization/theming/#api)
    - [x] [Colors](https://material-ui.com/customization/color/#color)
    - [x] [JSS](https://cssinjs.org/?v=v10.7.1)    
- [x] [React Router](https://reactrouter.com/web/guides/quick-start)
    - [x] lazy

[Código da aula](https://github.com/thiagocordeirooo/curso-fullstack-devinvestidor-react/commit/50948b06fa46d8c5491deedb8b1afcce3e849feb)

## Aula 2 - Criando `Layout` e o `Header`
[Imagem Exemplo](https://i.imgur.com/U6TFW7i.png)


- [x] [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
- [x] PageHeader Component
- [x] [Generate Component From Template](https://marketplace.visualstudio.com/items?itemName=thiagocordeirooo.generate-component-from-template)
- [x] MainLayout
    - [x] [Icons](https://material-ui.com/getting-started/installation/#font-icons)
    - [x] Header
        - [x] [AppBar](https://material-ui.com/components/app-bar/#app-bar)

[Código da aula](https://github.com/thiagocordeirooo/curso-fullstack-devinvestidor-react/commit/339b5dbb4fb6170b3fc78c071ac564211c9065f9)

## Aula 3 - Criando `Sidebar` e finalizando `Layout`
- [x] [Context](https://pt-br.reactjs.org/docs/context.html)
- [x] Concluir Header
- [x] Sidebar
    - [x] clsx

[Código da aula](https://github.com/thiagocordeirooo/curso-fullstack-devinvestidor-react/commit/bed47c1861dab07116055f440cc77a6eb44a02ef)

## Aula 4 - Criando estrutura cadastros
- [x] Backend
    - [x] [CURSO FULL-STACK 100% JAVASCRIPT](https://devinvestidor.com.br/portfolio/curso-full-stack-completo/)
    - [x] [Reposiório Backend](https://github.com/karanalpe/curso-fullstack-back-aulas)
---
- [x] Acicionar dependencias
    - [x] yarn add axios formik yup react-lottie
- [x] .env
- [x] _common/services
    - [x] api
- [x] [hooks](https://pt-br.reactjs.org/docs/hooks-intro.html) 
    - [x] [useHooks](https://usehooks.com/)
        - [x] useDebounce
- [x] [lotties](https://lottiefiles.com/)
    - [x] _common/lotties
- [x] [yup](https://github.com/jquense/yup)
    - [x] utils/YupValidator
- [x] [Snackbar](https://material-ui.com/pt/components/snackbars/#snackbar)
    - [x] SnackbarContext
    - [x] useSnackbar
- [x] ConfirmationDialog

[Código da aula](https://github.com/thiagocordeirooo/curso-fullstack-devinvestidor-react/commit/bf253e0b63b5ca33fffe0ea92e116e1cccb2668b)

## Aula 5 - Listando `Usuários`
- [x] userService
- [x] UsersList
    - [x] UsersListFilter
    - [x] UsersListTable
      - [x] [Table](https://material-ui.com/components/tables/#basic-table)
     - [x] UsersListContext
    
## Aula 6 - Incluindo `Usuários`
- [x] UserDialog
  - [x] [Dialog](https://material-ui.com/components/dialogs/#dialog)
  - [x] [formik](https://formik.org/)
- [x] UsersListContext


## Aula 7 - Editando `Usuários`
- [x] [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
- [x] [Intl.NumberFormat](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)

## Aula 8 - Excluindo `Usuários`

## Aula 9 - Listanto `Tarefas`
- [x] TasksList
  - [x] TasksListFilter
  - [x] TasksListTable
  - [x] TasksListContext
- [x] Constants
  - [x] LOGGED_USER_ID
  - [x] STATUS_TASK_ROUTE
  - [x] STATUS_TASK
- [x] taskService

## Aula 10 - Incluindo `Tarefas`
- [x] TaskDialog
  - [x] [Dialog](https://material-ui.com/components/dialogs/#dialog)
  - [x] [formik](https://formik.org/)
- [x] TasksListContext

## Aula 11 - Editando `Tarefas`
- [ ] TaskDialog
  - [ ] [Dialog](https://material-ui.com/components/dialogs/#dialog)
  - [ ] [formik](https://formik.org/)
- [ ] TasksListContext


## Aula 12 - Excluindo `Tarefas`