Ou pague apenas US$ 12,68/mês e tenha acesso a todos os cursos do Magenteiro.
Assinar o Clube MagenteiroVocê já comprou este curso.
Este curso inclui:
Neste curso você aprenderá o básico sobre React e muito sobre Next.js.
Ao final do curso você estará apto para criar sites e estupidamente rápidos, usando o que há de mais moderno em tecnologia front end.
Ao reutilizar blocos e componentes, você poderá construir um site inteiro em menos de 3,5 horas e já colocá-lo em produção.
Ao se inscrever neste curso (ou no Clube Magenteiro) você terá acesso ao nosso grupo secreto de alunos.
E também terá acesso ao código-fonte das aulas e do módulo Magenteiro que permite oferecer uma experiência híbrida de compra, tendo o checkout dentro do Magento, desacoplado do restante da sua loja feita em Next.js.
Veja o que você precisa para usar Next e React em sua máquina
Veremos como usar o Visual Studio Code e seus plugins, e onde encontrar links e o código-fonte criado nas aulas.
Vamos ver como o navegador enxerga elementos DOM e como manipular estes elementos com JavaScript puro.
Passaremos a manipular nossos elementos DOM com React.
Uma boa introdução sobre Components e Props do React, que também serão úteis no NextJs.
Veremos como inserir um componente dentro do outro, reaproveitando código.
Vamos ver como listar os componentes de um array usando map()
Vamos ver como os eventos e state(estado) funcionam no React e para que servem.
Desafie-se com o que aprendeu até aqui
Veja como iniciar um projeto Next.js
Veja como começar um projeto next a partir de um branch do github ou resumir o aprendizado da aula anterior em poucos segundos.
Convertemos nossa última página feita em React para NextJs em apenas alguns segundos.
Correção dos Warnings de algumas propriedades que criamos na aula anterior.
Veremos como usar o componente Link para navegar entre páginas e como prefetch funciona
Veremos como o NextJs trabalha com rotas simples
Como podemos criar rotas que possuem partes dinâmicas
Veja como gerar páginas estáticas com NextJs. Falaremos sobre getStaticProps e getStaticPaths.
Como criar rotas pre-definidas usando getStaticPaths.
Vamos consumir uma API externa e listar seu retorno em uma página usando getServerSideProps.
Como usar e abreviar declaração de functions
Vamos ver como usar fetch para buscar dados de uma API externa e como as promises funcionam.
Veja como os ... podem te ajudar com o resto do aprendizado
Vamos iniciar um novo projeto nextjs para começar a brincar com css.
Como aplicar um CSS em todas as páginas
Como podemos ter uma folha de estilo por componente
Como usar CSS inline no Nextjs
Como adicionar CSS livremente dentro de páginas e componentes mantendo as alterações somente ali.
Veremos como simplificar CSS com uso de Sass.
Veja como usar useEffect para escutar alterações nas páginas.
Exemplo prático de atualização dinâmica usando useEffect
Palavras de motivação. :)
Vamos iniciar nosso projeto de e-commerce com NextJs e Tailwindcss.
Vamos ver algumas classes básicas do tailwind e como tirar melhor proveito das documentações disponíveis.
Vamos ver alguns sites com componentes prontos e como utilizá-los em nossas aplicações.
Veja como definir a expiração de um conteúdo estático
Veja como criar pontos de interrupção e inspecionar variáveis de forma profissional em sua aplicação NextJS
Pages agora é App. Veja o que ganhamos com isso.
Veja o que mudou nas rotas dinâmicas no Next.js 13
Veja como este INCRÍVEL componente pode mudar sua vida e a performance de suas aplicações. SURREAL!
Vamos começar de novo nosso projeto sem suporte a typescript e instalar o tailwind nele.
Vamos montar nossa home com componentes existentes. Você pode criar ao seu estilo.
Vamos organizar os arquivos de template da nossa loja e criar um layout para ser reaproveitado.
Vamos começar a simular as chamadas para API GraphQl do Magento para extrair os dados que precisamos para nossa loja.
Vamos ver como se faz para permitir que chamadas às APIs GraphQL e Rest do Magento sejam feitas à partir de outras URL’s.
Etapas e ajustes comuns na importação de componentes HTML de terceiros
Vamos iniciar a migração do nosso projeto pro Next.js 13.
Começaremos a organizar nossa loja dentro do diretório app e usar o recurso de layout para não repetir componentes.
Vamos resolver problemas comuns ao usar useEffect, useState e outros recursos que só deveriam ser usados em componentes client-side. Também resolveremos e navegaremos por problemas de hidratação.
Um recurso básico e essencial. Saiba usá-las com segurança.
Vamos usar o fetch para realizar uma query graphQL e popular as categorias do nosso menu a partir daquelas cadastradas no Magento.
Vamos ver como usar componentes de login e tailwindcss/forms para criar a página de login da nossa loja.
Vamos fazer a chamada de login e salvar os dados em cookie usando o componente cookies-next.
Vamos simplificar nossas chamadas fetch graphql com um helper. Também entenderemos as opções de cache disponíveis no novo fetch do next.js 13.
Vamos usar o useState pra atualizar o avatar do usuário após o login e gerar o hash do e-mail do cliente com md5. Também veremos 2 formas sobre renderização condicional.
Vamos ver como o Authorization Header e rotas de API para revogar a sessão do usuário.
Vamos começar a criação da rota dinâmica da categoria e entender alguns conceitos básicos dela.
Vamos consumir as APIs do Magento e listar os produtos. Vamos falar sobre caches do Magento, do novo generateMetatada() e muito mais.
Criamos nossa página de produto em Next.js, corrigimos bugs, e preparamos nosso Magento para exibir o carrinho e checkout com os produtos adicionados no next.js.
Algumas alternativas mais completas para integrar Magento e Next.js
Vamos fazer depoy da nossa loja em produção e conseguir uma nota A em testes de performance sem nenhum esforço?
