Workshop

React na prática

Nível
57 aulas
5h57

Assistir agora

1. Fundamentos de React e Ferramentas

Sobre o Workshop

Vamos além do básico neste workshop. O objetivo agora é que você consiga criar aplicações React modernas, performáticas usando as melhores práticas do mercado. Para isso vamos mergulhar em alguns conceitos mais avançados do framework frontend mais popular do mundo.

O que vamos aprender

Alguns dos tópicos que serão abordados nesse workshop:

  • Configuração do ambiente de desenvolvimento com Vite e ESlint
  • Configuração do ESLint para código limpo e eficaz
  • Introdução ao React: JSX e Componentes
  • Passando dados para componentes com Props
  • Gerenciamento de formulários: Controlados e não controlados
  • Hooks: Gerenciando estado e efeitos colaterais
  • useState: Gerenciamento de estado em componentes funcionais
  • useEffect: Lidando com efeitos colaterais
  • Configuração e navegação com React Router
  • Hooks customizados
  • Arquitetura de uma aplicação React
  • Estilização com TailwindCSS
  • Utilizando o DevTools para um desenvolvimento mais ágil
  • Outros tópicos

E, claro, tudo através de uma aplicação do mundo real.

Pré requisitos

É necessário conhecimento básico em JavaScript e desejável (mas não imprescindível) conhecimento básico em React.

Seu Instrutor

João Nascimento

TripleEpic

Aulas

  1. Introdução
  2. 1.

    Fundamentos de React e Ferramentas

    01:44
  3. 2.

    Evolução do React

    02:56
  4. 3.

    Como funciona o React e SPA

    10:20
  5. 4.

    Renderização com React

    02:41
  6. Primeiro Componente

    07:26
  7. Hooks

    02:24
  8. useState

    03:37
  9. Configuração de Ambiente
  10. Configuração Vite com JSX

    03:21
  11. Usando Prettier no Desenvolvimento

    05:57
  12. Configurando ESLint e Prettier

    09:54
  13. Configurando Vite e React

    06:32
  14. HTML Mais Limpo com React

    03:12
  15. Introdução ao JSX

    05:26
  16. Revisão e organizando o código

    05:05
  17. Iniciando o Projeto
  18. Conhecendo o projeto

    06:52
  19. Iniciando o Projeto

    02:59
  20. Componente TitleBar

    02:49
  21. CSS Modules
  22. CSS Modules no React

    02:35
  23. Unidades CSS Acessíveis

    01:42
  24. Organizando Projeto com CSS Modules

    04:00
  25. Radix UI e Componentes
  26. Componente React Editable

    04:04
  27. React: Desestruturação e Radix UI

    03:41
  28. Radix UI: Popover no React

    04:44
  29. Aprimorando o Componente Editable

    04:53
  30. Estilizando Popover no React

    04:20
  31. Props
  32. Componente React: Input de Cor

    06:19
  33. Hooks
  34. Introduzindo `useContext` no React

    05:55
  35. Utilizando `useContext` no React

    09:16
  36. Automatizando Props em React

    08:08
  37. Componente Controlado

    08:05
  38. Componentes
  39. Chaves Únicas no React

    02:06
  40. Desenvolvendo Componentes React

    18:25
  41. SVGs em Componentes React

    09:56
  42. Fundo Personalizado com React e CSS

    11:15
  43. React Router
  44. Rotas com React Router

    05:58
  45. Configurando Tema
  46. Salvando Temas com JSON

    13:40
  47. Temas Dinâmicos em React

    11:37
  48. Criando Componente ThemeListItem

    04:40
  49. Revisão
  50. Configuração de Projetos React

    01:31
  51. Navegação
  52. Navegação com React Router

    05:12
  53. Barra Dinâmica em React

    08:33
  54. Mais Hooks
  55. Parâmetros e Hooks no React Router

    10:38
  56. Memoização em React: useMemo e useCallback

    05:05
  57. Refatoração React com useEffect

    08:52
  58. Compartilhando o Tema
  59. Compartilhando Temas no React

    06:46
  60. Compartilhamento de Temas no React

    10:22
  61. useMemo e useCallback
  62. Otimizando com useCallback e useMemo

    11:24
  63. useMemo no React

    04:47
  64. Outros Tópicos
  65. Integre Temas no VS Code

    07:17
  66. React DevTools em Ação

    04:32
  67. Hooks Personalizados no React

    05:43
  68. Redesign de Botões Interativos

    04:32
  69. Aprimorando o Design do Modal

    09:56
  70. Aperfeiçoando a Lista de Temas

    06:28
  71. Modal Automatizado

    10:59
  72. Refatoração de Estilos CSS

    04:11
  73. Finalização
  74. Encerramento

    01:48