React na prática
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
Desenvolvedor Web Full Stack.
Finalista do Mega Hack 3.0, alcançou o 2º lugar do ranking com uma solução escolhida pelo Mercado Livre. Trabalhou como instrutor em desenvolvimento web e produziu materiais para o YouTube.
Trabalha como Desenvolvedor, com ênfase em Front-End, utilizando React no dia a dia.
Aulas
- Introdução
- 1.
Fundamentos de React e Ferramentas
01:44 - 2.
Evolução do React
02:56 - 3.
Como funciona o React e SPA
10:20 - 4.
Renderização com React
02:41 Primeiro Componente
07:26Hooks
02:24useState
03:37- Configuração de Ambiente
Configuração Vite com JSX
03:21Usando Prettier no Desenvolvimento
05:57Configurando ESLint e Prettier
09:54Configurando Vite e React
06:32HTML Mais Limpo com React
03:12Introdução ao JSX
05:26Revisão e organizando o código
05:05- Iniciando o Projeto
Conhecendo o projeto
06:52Iniciando o Projeto
02:59Componente TitleBar
02:49- CSS Modules
CSS Modules no React
02:35Unidades CSS Acessíveis
01:42Organizando Projeto com CSS Modules
04:00- Radix UI e Componentes
Componente React Editable
04:04React: Desestruturação e Radix UI
03:41Radix UI: Popover no React
04:44Aprimorando o Componente Editable
04:53Estilizando Popover no React
04:20- Props
Componente React: Input de Cor
06:19- Hooks
Introduzindo `useContext` no React
05:55Utilizando `useContext` no React
09:16Automatizando Props em React
08:08Componente Controlado
08:05- Componentes
Chaves Únicas no React
02:06Desenvolvendo Componentes React
18:25SVGs em Componentes React
09:56Fundo Personalizado com React e CSS
11:15- React Router
Rotas com React Router
05:58- Configurando Tema
Salvando Temas com JSON
13:40Temas Dinâmicos em React
11:37Criando Componente ThemeListItem
04:40- Revisão
Configuração de Projetos React
01:31- Navegação
Navegação com React Router
05:12Barra Dinâmica em React
08:33- Mais Hooks
Parâmetros e Hooks no React Router
10:38Memoização em React: useMemo e useCallback
05:05Refatoração React com useEffect
08:52- Compartilhando o Tema
Compartilhando Temas no React
06:46Compartilhamento de Temas no React
10:22- useMemo e useCallback
Otimizando com useCallback e useMemo
11:24useMemo no React
04:47- Outros Tópicos
Integre Temas no VS Code
07:17React DevTools em Ação
04:32Hooks Personalizados no React
05:43Redesign de Botões Interativos
04:32Aprimorando o Design do Modal
09:56Aperfeiçoando a Lista de Temas
06:28Modal Automatizado
10:59Refatoração de Estilos CSS
04:11- Finalização
Encerramento
01:48