Workshop
React na prática
Nível
57 aulas
5h57
Assistir agora
1. Fundamentos de React e Ferramentas
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.
- Fundamentos de React e Ferramentas
- Evolução do React
- Como funciona o React e SPA
- Renderização com React
- Primeiro Componente
- Hooks
- useState
- Configuração Vite com JSX
- Usando Prettier no Desenvolvimento
- Configurando ESLint e Prettier
- Configurando Vite e React
- HTML Mais Limpo com React
- Introdução ao JSX
- Revisão e organizando o código
- Componente React Editable
- React: Desestruturação e Radix UI
- Radix UI: Popover no React
- Aprimorando o Componente Editable
- Estilizando Popover no React
- Introduzindo `useContext` no React
- Utilizando `useContext` no React
- Automatizando Props em React
- Componente Controlado
- Chaves Únicas no React
- Desenvolvendo Componentes React
- SVGs em Componentes React
- Fundo Personalizado com React e CSS
- Rotas com React Router
- Parâmetros e Hooks no React Router
- Memoização em React: useMemo e useCallback
- Refatoração React com useEffect
- Integre Temas no VS Code
- React DevTools em Ação
- Hooks Personalizados no React
- Redesign de Botões Interativos
- Aprimorando o Design do Modal
- Aperfeiçoando a Lista de Temas
- Modal Automatizado
- Refatoração de Estilos CSS
- Encerramento