Aprenda React e Next.js do jeito que você sempre quis: com clareza, projeto real e um passo a passo fácil de seguir!

⌘    ·    Introdução

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

⌘    ·    Instalações

▶️  Como o Tailwind funciona? - 04:44

▶️  Rodando via CDN - 06:10

▶️  Adicionando em framework - 08:54

▶️  Adicionando em um projeto avulso - 10:39

▶️  Extensão para VSCode - 03:07

⌘    ·    Fundamentos

▶️  Usando a documentação - 09:10

▶️  Trabalhando com cores - 12:51

▶️  Cores personalizadas - 05:05

▶️  Espaçamentos e tamanhos 1 - 08:45

▶️  Espaçamentos e tamanhos 2 - 11:42

▶️  Manipulação de texto - 10:36

▶️  Trabalhando com bordas - 09:17

▶️  Exercício: Botão - 05:04

▶️  Exercício: Alerta de erro - 03:52

▶️  Exercício: Card de invite - 09:12

▶️  Tela de Login - 11:42

⌘    ·    Layout e Responsividade

▶️ Containers - 09:42

▶️ Tipos de Display - 06:09

▶️ Responsividade no Tailwind - 08:32

▶️ Flexbos no Tailwind - 11:42

▶️ GridCSS no Tailwind - 07:30

▶️ Propriedade de background - 08:45

▶️ Gradientes - 05:44

▶️ Animações no Tailwind - 09:15

▶️ Trabalhando com SVGs - 05:40

▶️ Exercício: Loading - 03:48

▶️ Exercício: Hero Card - 09:53

▶️ Exercício: Grid Responsivo 1 - 10:31

▶️ Exercício: Grid Responsivo 2 - 03:02

▶️ Exercício: Tabela Responsiva - 10:05

⌘    ·    Ações e Interações

▶️ Hover e estudos do elemento - 07:09

▶️ Group Hover - 05:14

▶️ Darkmode - Usando Color Scheme do sistema - 03:15

▶️ Usando estilos base - 05:21

▶️ Criando componentes - 03:25

▶️ Definindo um prefixo - 02:58

▶️ TailwindUI - 09:11

⌘    ·    Instalando e Entendendo

▶️ O que é Typescript - 04:35

▶️ Exemplo da necessidade do Typescript - 10:34

▶️ Instalando e usando Typescript (parte 1) - 12:54

▶️ Instalando e usando Typescript (parte 2) - 11:23

▶️ Aviso sobre o processo de compilação - 00:58

⌘    ·    Typescript Básico

▶️ Como não gerar o JS se tiver erro - 04:49

▶️ Os types primitivos - 09:34

▶️ Type em Arrays - 06:07

▶️ O type any (e quando usá-lo) - 07:41

▶️ Usando types nos parâmetros de uma função - 07:30

▶️ Usando types no retorno de uma função - 07:30

▶️ Contextual Typing em funções anônimas - 06:35

▶️ Types em Objetos - 07:34

▶️ Propriedades Opcionais - 03:53

▶️ Union Types (múltiplos types) - 06:31

▶️ Type e Interface: Como usar e diferenças - 11:14

▶️ Type Assertions - 05:01

▶️ Types literais - 10:15

▶️ Inferência literal - 07:12

▶️ Type para funções - 05:32

▶️ Retorno void - 08:54

⌘    ·    Configurações do Typescript

▶️ Usando o watchMode no arquivo - 06:14

▶️ Criando o arquivo tsconfig.json - 06:56

▶️ Escolhendo quais arquivos compilar - 09:18

▶️ Entendendo o Target - 04:59

▶️ Trabalhando com Libs no Typescript - 07:46

▶️ rootDir e outDir - 04:11

▶️ noComment, noEmit e noEmitOnError - 05:15

▶️ Configurações para Qualidade do código - 07:26

⌘    ·    Introdução e Instalação

▶️ O que é React? - 05:33

▶️ O que é DOM Virtual? - 08:04

▶️ Como usar o React - 19:15

▶️ Como pensar em reactês? - 15:16

▶️ O que é Next, Remix e Gatsby? - 07:48

▶️ Usando React via CDN - 07:35

▶️ Instalando o Node - 03:35

▶️ Iniciando um projeto com Next - 09:04

▶️ Iniciando um projeto com Vite - 04:58

⌘    ·    Primeiros Passos no React

▶️ Primeiro Componente - 09:20

▶️ Exportando e Importando um Componente - 14:52

▶️ Usando vários componentes - 08:22

▶️ Regras gerais do JSX - 09:45

▶️ JSX e variáveis, funções e objetos - 12:30

▶️ Passando props para um componente - 10:47

▶️ Definindo um padrão em props - 04:15

▶️ Children do componente - 08:27

▶️ Renderização Condicional - 07:21

▶️ Operador lógico && - 06:26

▶️ Renderizando Listas - 10:02

▶️ Filtrando Listas - 04:17

▶️ Exercício: Greeting condicional 1 - 09:53

▶️ Exercício: Greeting condicional 2 - 04:37

▶️ Exercício: Rating via emoji (fácil) - 12:54

▶️ Exercício: Rating via emoji (difícil) - 07:26

▶️ Exercício: Tabela de notas estudantis 1 - 10:56

▶️ Exercício: Tabela de notas estudantis 2 - 11:33

⌘    ·    Estados e Eventos

▶️ Adicionando evento de clique - 09:39

▶️ Forma errada de passar eventos - 10:20

▶️ Passando eventos via props - 07:57

▶️ Usando o preventDefault - 06:38

▶️ O que é um State? - 09:40

▶️ Trabalhando com States - 09:47

▶️ Usando states para auxiliar UI - 08:06

▶️ Usando states em campos - 09:03

▶️ States mudando no tempo - 12:09

▶️ State Updater - 08:40

▶️ Atualizando Objetos em States - 14:16

▶️ Arrays em States: Exibir - 07:51

▶️ Arrays em States: Adicionar - 07:35

▶️ Arrays em States: Excluir - 10:41

▶️ Arrays em States: Alterar - 08:50

▶️ Arrays em States: Usando ID - 07:04

▶️ Exercício: Galeria de Fotos 1 - 10:25

▶️ Exercício: Galeria de Fotos 2 - 10:15

▶️ Exercício: Galeria de Fotos 3 - 07:18

▶️ Exercício: Quiz 1 - 13:16

▶️ Exercício: Quiz 2 - 15:54

▶️ Exercício: Quiz Completo 1 - 13:04

▶️ Exercício: Quiz Completo 2 - 05:21

⌘    ·    Effect, Reducers e Context

▶️ O que são Effects? - 05:17

▶️ Definindo um Effect - 11:04

▶️ Usando o Effect da forma correta - 09:38

▶️ Exemplo real do Effect - 13:43

▶️ Usando o cleanUp - 10:54

▶️ O que são Reducers? - 08:19

▶️ Criando um Reducer 1 - 10:19

▶️ Criando um Reducer 2 - 12:37

▶️ Usando o Reducer 1 - 11:39

▶️ Usando o Reducer 2 - 08:46

▶️ Usando o Reducer 3 - 09:26

▶️ O que é Context? - 09:23

▶️ Criando um Context - 10:34

▶️ Alterando um Context - 10:18

▶️ Organizando um Context - 06:49

▶️ Exercício: Contexto para Usuário Logado - 10:13

▶️ Exercício: Contexto para Posts 1 - 11:56

▶️ Exercício: Contexto para Posts 2 - 11:57

▶️ Context com Reducers 1 - 11:32

▶️ Context com Reducers 2 - 08:56

▶️ Dica sobre Context e Reducer - 08:05

▶️ Criando hook para Context - 03:35

▶️ Persistindo Context em LocalStorage - 15:22

▶️ Exercício: Dark theme 1 - 10:20

▶️ Exercício: Dark theme 2 - 14:12

▶️ Dark theme via Context e Tailwind - 11:10

▶️ Exercício: Chat Simples com histórico 1 - 12:45

▶️ Exercício: Chat Simples com histórico 2 - 10:32

▶️ Exercício: Chat Simples com histórico 3 - 10:08

▶️ Exercício: Chat Simples com histórico 4 - 10:12

▶️ Exercício: Chat Simples com histórico 5 - 10:06

⌘    ·    Usando APIs

▶️ Introdução a requisições no React - 05:14

▶️ Métodos HTTP - 10:13

▶️ JSONPlaceholder - 09:46

▶️ Fazendo um Fetch GET - 10:45

▶️ Exibindo dados do Fetch - 09:15

▶️ Entendendo o Then/Catch/Finally - 12:16

▶️ Fazendo o Loading certinho - 07:48

▶️ Usando Async/Await - 08:28

▶️ Fazendo um Fetch POST - 12:30

▶️ Enviando arquivos via Fetch 1 - 11:45

▶️ Enviando arquivos via Fetch 2 - 10:56

▶️ Introdução ao Axios - 04:23

▶️ Fazendo GET com Axios - 10:50

▶️ Fazendo POST/PUT/DELETE com Axios - 06:11

▶️ Criando instância do Axios - 09:30

▶️ Envio de arquivos (FormData) com Axios - 06:24

▶️ Cancelando uma requisição com Axios - 10:40

▶️ Introdução ao TanStack Query - 06:33

▶️ Instalando e configurando o Provider - 07:48

▶️ Tanstack Devtools - 06:42

▶️ Fazendo uma query - 12:33

▶️ Montando uma API para usar - 07:35

▶️ Formas de organizar o código - 13:44

▶️ Entendendo o QueryKey - 11:42

▶️ Entendendo o QueryFunction - 10:14

▶️ Status de Internet - 10:16

▶️ Loading e Fetching - 05:56

▶️ Controlando StaleTime - 12:03

▶️ Configurações padrão no QueryClient - 06:08

▶️ Fazendo query sob demanda - 10:26

▶️ Fazendo paginação 1 - 12:17

▶️ Fazendo paginação 2 - 10:28

▶️ Dados iniciais e Placeholder de Query - 11:43

▶️ Prefetch no TanStack - 10:41

▶️ Pegar o QueryClient por hook - 01:27

▶️ Invalidando Query - 09:39

▶️ O que são Mutations? - 04:38

▶️ Fazendo uma mutation simples - 11:00

▶️ Status de uma mutation - 08:17

▶️ Resetando Mutation - 02:56

▶️ Side effects em Mutation - 06:53

▶️ Side effects no Mutate - 02:06

▶️ Mutate assíncrono - 06:14

▶️ Organizando mutations - 04:27

▶️ Invalidando pelo Mutation - 06:36

▶️ Atualizando Query pelo Mutation - 11:11

▶️ Introdução ao React Hook Form - 03:36

▶️ Fazendo um form básico - 10:33

▶️ Aplicando validação - 06:28

▶️ Lidando com erro de validação - 08:52

▶️ Criando inputs controlados via hook - 14:54

▶️ Definindo valor dinamicamente - 05:24

▶️ Integrando com bibliotecas UI - 11:26

▶️ Zod: Primitivos - 07:07

▶️ Zod: Opcionais - 02:40

▶️ Enviando dados para uma API - 09:49

▶️ Zod: Literais - 03:49

▶️ Introdução a Schema Validation - 04:01

▶️ Instalando o Zod e Resolvers - 04:57

▶️ Entendendo o básico do Zod - 11:03

▶️ Zod: Validações de Número - 09:06

▶️ Zod: Mensagens de erro - 07:18

▶️ Testando o Schema no Zod - 06:48

▶️ Zod: Enum - 04:32

▶️ Inferindo type pelo Zod - 04:47

▶️ Usando Zod no Formulário - 10:54

▶️ Zod: Interseção - 07:43

▶️ Zod: Unions - 03:52

▶️ Definindo mensagem de erro no Zod - 09:56

▶️ Zod: Aviso sobre as próximas aulas - 04:36

▶️ Zod: Promises - 04:38

▶️ Zod: Função Transform - 05:51

▶️ Zod: Função Default - 03:14

▶️ Zod: Array - 02:56

▶️ Zod: Validações de String - 12:35

▶️ Introdução ao Shadcn-UI - 08:11

▶️ Instalando em Projeto Next - 11:57

▶️ Instalando em Projeto Vite - 10:19

▶️ Adicionando um componente - 09:35

▶️ Olhando a documentação - 07:48

▶️ Adicionando DarkMode no Next - 07:16

▶️ Adicionando DarkMode no Vite - 07:38

▶️ Exercício: Card Team Members 1 - 09:35

▶️ Exercício: Card Team Members 2 - 08:04

▶️ Exercício: Card Team Members 3 - 09:30

▶️ Exercício: Card Team Members 4 - 07:32

▶️ Exercício: Card Team Members 5 - 13:38

▶️ Entendendo os Triggers - 08:42

▶️ Formulários com Hookform e Zod 1 - 07:33

▶️ Formulários com Hookform e Zod 2 - 12:39

▶️ Trabalhando com Temas - 11:13

▶️ Figma do shadcn-ui - 03:55

▶️ Exercício: Loja - Introdução - 08:42

▶️ Exercício: Loja - Imagens - 01:32

▶️ Exercício: Loja - Configurando Shadcn UI - 10:43

▶️ Exercício: Loja - Criando Home e Footer - 07:27

▶️ Exercício: Loja - Criando o Header - 07:15

▶️ Exercício: Loja - Criando o Sidebar - 08:59

▶️ Exercício: Loja - Criando Tab de Produtos 1 - 09:27

▶️ Exercício: Loja - Criando Tab de Produtos 2 - 09:13

▶️ Exercício: Loja - Erro de Hydration - 03:34

▶️ Exercício: Loja - Listando os Produtos 1 - 09:03

▶️ Exercício: Loja - Listando os Produtos 2 - 06:40

▶️ Exercício: Loja - Listando os Produtos 3 - 07:13

▶️ Exercício: Loja - Listando os Produtos 4 - 10:12

▶️ Exercício: Loja - Criando o Store 1 - 08:48

▶️ Exercício: Loja - Criando o Store 2 - 08:42

▶️ Exercício: Loja - Exibindo o carrinho 1 - 08:13

▶️ Exercício: Loja - Exibindo o carrinho 2 - 06:15

▶️ Exercício: Loja - Atualizando quantidade - 07:26

▶️ Exercício: Loja - Finalizar compra 1 - 09:26

▶️ Exercício: Loja - Finalizar compra 2 - 08:45

▶️ Exercício: Loja - Store de Checkout - 06:10

▶️ Exercício: Loja - Formulário dados pessoais - 12:58

▶️ Exercício: Loja - Formulário endereço - 11:59

▶️ Exercício: Loja - Enviando pro WhatsApp - 08:05

▶️ Exercício: Loja - Montando mensagem - 07:14

▶️ Introdução ao conceito de upload - 03:56

▶️ Criando um componente de upload simples - 08:50

▶️ Enviando o arquivo - 05:32

▶️ Mandando dados junto do arquivo - 03:14

▶️ Criando upload com barra de progresso - 12:50

▶️ Usando Dropzone no React - 16:21

▶️ Validando arquivos no upload - 06:51

▶️ Fazendo preview antes do upload - 07:41

▶️ Upload de múltiplos arquivos - 07:11

▶️ Criando o projeto - 05:32

▶️ Criando Estrutura Base - 11:51

▶️ Criando o leftside 1 - 10:15

▶️ Criando o leftside 2 - 07:59

▶️ Calculando o IMC - 12:21

▶️ Criando o Rightside - 09:21

▶️ Criando o GridItem - 10:16

▶️ Fazendo o sistema funcionar 1 - 11:20

▶️ Fazendo o sistema funcionar 2 - 07:51

▶️ Fazendo o Disabled - 04:31

▶️ Lidando com responsividade - 08:46

▶️ Inserindo projeto no Github - 07:13

▶️ Introdução ao Projeto - 05:07

▶️ Criando a estrutura 1 - 07:39

▶️ Criando a estrutura 2 - 09:12

▶️ Criando o componente InfoItem - 07:40

▶️ Criando o botão - 13:26

▶️ Fazendo os itens do jogo - 05:38

▶️ Criando o Grid 1 - 14:12

▶️ Criando o Grid 2 - 08:36

▶️ Criando o Grid 3 - 09:59

▶️ Exibindo Grid na tela 1 - 13:16

▶️ Exibindo Grid na tela 2 - 07:37

▶️ Fazendo timer funcionar - 10:55

▶️ Fazendo clique no grid - 08:33

▶️ Verificando movimentos 1 - 07:12

▶️ Verificando movimentos 2 - 13:50

▶️ Jogando projeto no Github - 04:28

⌘    ·    Layout e Responsividade

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

⌘    ·    Ações e Interações

▶️  Como o Tailwind funciona? - 04:44

▶️  Rodando via CDN - 06:10

▶️  Adicionando em framework - 08:54

▶️  Adicionando em um projeto avulso - 10:39

▶️  Extensão para VSCode - 03:07

▶️  Como o Tailwind funciona? - 04:44

▶️  Rodando via CDN - 06:10

⌘    ·    Layout e Responsividade

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️  O que é Tailwind? - 06:51

▶️  Isso é inline styles - 07:30

▶️  Abordagem mobile-first - 06:17

▶️  Suporte dos navegadores - 06:03

▶️ Lista de Tarefas - 01:11:40

▶️ Sistema de Finanças Pessoais - 02:03:48

▶️ Galeria de fotos - 01:30:55

▶️ Jogo RPG - 01:21:26

▶️ Formulário Multi-etapas - 02:11:41

▶️ Introdução ao Projeto - 07:57

▶️ Criando o Projeto - 06:35

▶️ Criando página de Login 1 - 12:22

▶️ Criando página de Login 2 - 13:40

▶️ Adicionando FontAwesome - 04:55

▶️ Criando o componente de Input - 17:53

▶️ Criando o componente de Botão - 07:14

▶️ Criando página de Cadastro - 04:16

▶️ Criando o layout principal - 13:22

▶️ Layout parte Esquerda 1 - 10:37

▶️ Layout parte Esquerda 2 - 04:48

▶️ Criando usuário fake - 06:56

▶️ Layout parte Esquerda 3 - 07:15

▶️ Layout parte Direita - 14:10

▶️ Criando Trends - 11:39

▶️ Criando Recomendações - 11:30

▶️ Criando o header Home - 09:23

▶️ Criando o menu Home - 07:06

▶️ Criando o componente de postar - 10:28

▶️ Criando um tweet fake - 04:06

▶️ Criando o feed de tweets 1 - 10:45

▶️ Criando o feed de tweets 2 - 07:59

▶️ Criando função de tempo - 04:56

▶️ Criando página do perfil 1 - 10:13

▶️ Criando página do perfil 2 - 08:06

▶️ Criando feed do perfil - 02:03

▶️ Criando página de editar perfil - 08:13

▶️ Criando o textarea - 04:15

▶️ Criando página de busca - 04:00

▶️ Criando página de um tweet individual - 05:05

▶️ Introdução ao Next - 06:34

▶️ Criando um projeto com Next - 10:37

▶️ Visão geral das pastas e arquivos - 07:57

▶️ Criando rotas no Next - 10:29

▶️ Entendendo Layout e Page - 10:47

▶️ Complementando o Layout - 06:26

▶️ Grupo de rotas - 08:27

▶️ Rotas dinâmicas - 12:42

▶️ Rotas dinâmicas: Pegando tudo - 07:54

▶️ Consultando dados de rota dinâmica - 09:55

▶️ Modificando o head da página - 10:46

▶️ Modificando o head dinamicamente - 05:49

▶️ Entendendo RSC (Server Componentes) - 14:22

▶️ Rotas dinamicamente estáticas - 09:33

▶️ Formas de mudar de rota - 10:17

▶️ Entendendo o hook useRouter - 11:35

▶️ Erro na rota - 08:01

▶️ O componente Image - 08:31

▶️ Aviso sobre Backend no Next - 01:44

▶️ Requisição em Server Components - 06:14

▶️ Requisição em Client Components - 10:23

▶️ Cache e Memorização de requisição - 09:17

▶️ Criando um Middleware no Next - 09:15

▶️ Introdução a ServerActions - 10:00

▶️ ServerActions em formulários - 08:38

▶️ ServerActions em formulários (recebendo retorno) - 11:19

▶️ ServerActions fora de formulários - 04:20

▶️ Criando APIs com Next - 10:47

▶️ Quando criar uma API ou utilizar ServerActions? - 03:50

Conteúdo liberado nos próximos dias ...

Não precisa ser especialista em Javascript não. Sabendo o básico, já vai conseguir acompanhar porque nós ensinamos tudo bem mastigado. Typescript por exemplo, não precisa saber, nós te ensinamos em aula.

Sim, durante o curso você recebe vários certificados, incluindo carga horária, integração direta ao LinkedIn, validação do certificado e tudo que tem direito. Você pode inclusive usar os certificados como carga complementar em faculdades.

Você tem acesso a todo o curso, com todos os materiais, suporte e atualizações por 12 meses a partir da sua inscrição. Isso inclui novos projetos também, tá?

Pode não, DEVE! Nós temos uma equipe de suporte pra te ajudar no 1-a-1 de forma personalizada, tanto via e-mail quanto na própria plataforma de ensino, além da nossa comunidade no Discord que o pessoal se ajuda o dia inteiro e nós também estamos lá. Somos referência em suporte de dúvidas no mercado.

SIM! Você vai fazer vários. Nós temos projetos em todos os módulos, desde coisas simples a projetos do mundo real. Além de vários projetos completões com uma infinidade de dicas que só a experiência real poderia te dar. Coisas que não tem em nenhuma "documentação".