Workshop

Typescript no React

Nível
28 aulas
2h28

Assistir agora

1. Introdução e Conteúdo do Workshop

Sobre o Workshop

Aplicações Typescript estão cada vez mais presentes. E a união de Typescript + React é uma combinação muito boa! Nesse workshop vamos trazer os principais macetes, dicas e procedimentos para que você consiga implementar TS em suas aplicações React (sejam elas novas ou já existentes). Dentre outros tópicos vamos ver:

  • Migração de uma aplicação JS para TS (incluindo o tsconfig)
  • Tipando props e children
  • Tipando Eventos e Event Handlers
  • Criando componentes flexíveis - inclusive inspirados em bibliotecas famosas
  • Tipando alguns hooks
  • Context API.

Não é necessária experiência prévia com Typescript para assistir a esse workshop - mas é recomendado uma base mínima de React.

Seu Instrutor

Roberto Cestari

Codante.io

Materiais

Aulas

  1. Introdução
  2. 1.

    Introdução e Conteúdo do Workshop

    08:41
  3. Migrando de JS para TS
  4. 2.

    Transformando uma Aplicação JS em TS

    08:18
  5. 3.

    O tsc init e o tsconfig.json

    03:06
  6. 4.

    Ajustando o projeto

    04:13
  7. 5.

    JavaScript x TypeScript: Migração Simples

    01:34
  8. 6.

    Migrando todo o projeto para TypeScript

    05:26
  9. 7.

    moduleResolution Bundler

    02:13
  10. 8.

    Migração para Typescript: Erros Comuns

    07:13
  11. 9.

    Brincando com TypeScript no TS Playground

    02:17
  12. Props, Children e Eventos
  13. 10.

    O Gerador de Frases Aleatórias

    07:00
  14. 11.

    Exercício - Props

    01:01
  15. 12.

    Explicação - Props

    14:16
  16. 13.

    Tipando o useState

    04:13
  17. 14.

    Exercício - Children

    01:30
  18. 15.

    Resolução - Children

    06:22
  19. 16.

    Exercício - Eventos

    01:24
  20. 17.

    Resolução - Eventos

    14:50
  21. 18.

    Exercício - Eventos II

    00:28
  22. 19.

    Resolução - Eventos II

    06:27
  23. Componentes Flexíveis
  24. 20.

    Exercício - Componentes Flexíveis

    01:46
  25. 21.

    Resolução - Componentes Flexíveis

    11:36
  26. 22.

    Foco no primeiro botão

    07:21
  27. 23.

    Exercício - Componentes Flexíveis II

    00:31
  28. 24.

    Resolução - Componentes Flexíveis II

    10:05
  29. 25.

    Exercício e Resolução - Hooks

    01:16
  30. Finalização
  31. 26.

    Exercício - Context

    00:32
  32. 27.

    Resolução - Context

    14:16
  33. 28.

    Finalização

    00:28