Música

Overview: Esta seção não contém informações relevantes para a transcrição.

Quinto dia da imersão

Overview: Nesta seção, o apresentador começa a falar sobre o quinto dia da imersão e convida os espectadores a se inscreverem no evento oficial. Ele também menciona as atividades que ocorrerão durante a semana, incluindo desafios e vídeos sobre tecnologias como GS go leng Kafka docker.

Inscrições para a imersão

• As inscrições para o evento oficial estão abertas.

• O link de inscrição está disponível na descrição do vídeo.

• Aqueles que se inscreverem receberão todas as novidades que ocorrerão na semana seguinte.

Atividades durante a semana

• Haverá lives com grandes empresas.

• Os espectadores podem participar de desafios no grupo do Discord.

• Os vídeos serão disponibilizados na plataforma de entrega construída com arquitetura de micro serviços usando tecnologias como GS go leng Kafka docker.

Implementando um carrossel em React

Overview: Nesta seção, o apresentador fala sobre implementar um carrossel em React e mostra como isso pode ser feito usando Next JS. Ele também incentiva os espectadores a assistirem às outras lives disponíveis no canal.

Implementando um carrossel em React

• O apresentador mostra como implementar um carrossel em React usando Next JS.

• Ele incentiva os espectadores curiosos sobre essa implementação a assistirem à live completa.

Lives disponíveis no canal

• Todas as lives ficarão disponíveis no canal.

• Os espectadores podem assistir às lives anteriores para aprender mais sobre tecnologias como React e Next JS.

Canal Full Stack

Overview: Nesta seção, o apresentador fala sobre o canal Full Stack e seu objetivo de ensinar tecnologias usadas por grandes empresas. Ele incentiva os espectadores a se inscreverem no canal e a deixarem um joinha nos vídeos.

Objetivo do canal

• O objetivo do canal é ensinar tecnologias usadas por grandes empresas.

• Os espectadores podem aprender o que acontece dentro dessas empresas e quais ferramentas são utilizadas lá.

Inscrições no canal

• Os espectadores são incentivados a se inscreverem no canal.

• Eles também são incentivados a deixarem um joinha nos vídeos para valorizar o conteúdo e ajudar na distribuição do vídeo pelo YouTube.

Informações sobre as Lives e o Next.js

Visão geral da seção: Nesta seção, Luiz Carlos fala sobre onde encontrar as gravações das lives e apresenta o Next.js.

Gravações das Lives

• Todas as lives ficam disponíveis no canal.

• As informações sobre a agenda podem ser encontradas no Instagram do canal.

• As gravações são disponibilizadas assim que a live termina.

Apresentação do Next.js

• O Next.js é um framework React para trabalhar com SSR (Server-Side Rendering).

• Ele permite trabalhar com o lado front-end e back-end juntos.

• O conceito de Single Page Application (SPA) pode ser complicado para posicionar páginas em buscadores como Google, Yahoo e Bing.

• O uso de SPA também pode exigir mais recursos do cliente, tornando inviável em alguns casos.

• Manter os dados da navegação pode ser complicado em SPA.

Trabalhando com Single Page Applications

Visão geral da seção: Nesta seção, Luiz Carlos explica como funciona uma Single Page Application (SPA).

Funcionamento de uma SPA

• Os componentes visuais são renderizados no browser após o download do Index HTML e JavaScript.

• Todo o roteamento e páginas estão presentes no JavaScript baixado pelo usuário.

• A renderização acontece diretamente no browser sem precisar de um servidor para buscar as páginas.

Problemas ao trabalhar com SPA

• Posicionar páginas em buscadores pode ser difícil já que eles consideram apenas uma página única.

• Pode exigir mais recursos do cliente, tornando inviável em alguns casos.

• Manter os dados da navegação pode ser complicado em SPA.

Introdução ao Next.js

Visão geral da seção: Nesta seção, Luiz Carlos apresenta o Next.js com mais detalhes.

O que é o Next.js?

• É um framework React para trabalhar com SSR (Server-Side Rendering).

• Permite trabalhar com o lado front-end e back-end juntos.

• Resolve problemas de SEO e performance em SPA.

• Possui recursos como pré-renderização, geração estática e dinâmica de páginas.

Vantagens do uso do Next.js

• Melhora a indexação em buscadores.

• Reduz a carga no cliente.

• Facilita a manutenção dos dados da navegação.

Problemas de memória e indicadores de carregamento

Visão geral da seção: Nesta seção, o palestrante discute problemas comuns que podem ocorrer ao navegar em um site e como eles podem ser causados por problemas de memória ou falta de indicadores de carregamento. Ele também menciona tecnologias concorrentes do React, como Diesella.

Problemas comuns ao navegar em um site

• Problemas podem ser causados por problemas de memória ou falta de indicadores de carregamento.

• É difícil manter estados quando se trabalha com aquisição HTTP por debaixo dos panos.

• Empresas que não precisam de posicionamento no SEO ou sistemas administrativos são exemplos onde essas tecnologias ricas em frontend são usadas.

Tecnologias concorrentes do React

• Tecnologias concorrentes incluem Diesella.

• O Next.js é uma tecnologia que permite renderização do lado servidor para melhorar o desempenho e evitar travamentos na memória do sistema operacional.

Vantagens do Next.js

Visão geral da seção: Nesta seção, o palestrante discute as vantagens do uso do Next.js, incluindo sua facilidade de adaptação a aplicações existentes, zero setup e configuração, retrocompatibilidade com browsers antigos e deploy simples.

Adaptação a aplicações existentes

• O Next.js pode ser adaptado a aplicações existentes sem a necessidade de criar uma nova aplicação do zero.

• O Next.js é fácil de usar e já vem com um projeto do zero para trabalhar.

Retrocompatibilidade com browsers antigos

• O Next.js permite retrocompatibilidade com browsers antigos, incluindo o Internet Explorer.

Deploy simples

• O deploy do Next.js é muito simples e pode ser feito em qualquer hospedagem que tenha um node.

• Para fazer o deploy de uma aplicação Next.js, você só precisa ter o Node.js instalado.

Tipos de Páginas e Introdução ao Next.js

Visão Geral da Seção: Nesta seção, o palestrante apresenta os três tipos de páginas que existem e explica a diferença entre elas. Ele também introduz o Next.js e explica como será a dinâmica da live.

Tipos de Páginas

• Existem três tipos de páginas: estáticas, dinâmicas e dinâmicas incrementais.

• É importante conhecer o conteúdo para saber qual tipo de página usar.

Introdução ao Next.js

• O palestrante irá criar um exemplo usando o Next.js.

• Ele irá abordar problemas de design que podem surgir quando certas camadas não são separadas no desenvolvimento.

• Será utilizado Clean Architecture para resolver esses problemas.

• O comando "npx" será usado para baixar o cliente do Next.js.

• Para rodar a aplicação, é necessário ter instalado o Node.js e as dependências React, React-DOM e Next.js.

Estrutura do Projeto com Next.js

Visão Geral da Seção: Nesta seção, o palestrante mostra como é a estrutura do projeto criado com o Next.js.

Estrutura do Projeto

• A estrutura do projeto criado com o Next.js é semelhante à de uma aplicação Node convencional.

• A pasta ".next" contém a compilação do JavaScript.

• As páginas são componentes React que ficam na pasta "pages".

• Os estilos CSS ficam na pasta "styles".

Rodando a Aplicação

• Para rodar a aplicação, basta executar o comando "npm run dev".

• O servidor Node.js será iniciado e as páginas serão servidas.

• As modificações feitas nos arquivos são automaticamente reconhecidas pelo Next.js.

Páginas e Componentes com Next.js

Visão Geral da Seção: Nesta seção, o palestrante explica como as páginas e componentes funcionam no Next.js.

Páginas e Componentes

• Uma página é um componente React que é renderizado do lado do servidor.

• As páginas ficam na pasta "pages" e têm extensão ".tsx".

• Os componentes podem ter lógica antes de serem renderizados.

• Os elementos HTML ou outros componentes que serão renderizados são decididos no final da função.

Organização do Projeto

• É recomendável criar uma pasta "src" para organizar melhor os arquivos.

• A pasta "styles" pode ser movida para dentro da pasta "src".

Rodando a Aplicação

• Para rodar a aplicação, basta executar o comando "npm run dev".

• As modificações feitas nos arquivos são automaticamente reconhecidas pelo Next.js.

Introdução ao Projeto

Visão geral da seção: Nesta seção, o palestrante apresenta a ideia do projeto e explica como criar um exemplo simples de carrinho de compras usando Next.js.

Criando uma aplicação com React no servidor

• Para transformar uma aplicação que renderiza o React do lado do cliente em uma aplicação que renderiza o React do lado do servidor, é necessário instalar o Net.

• O objetivo é criar um exemplo simples de carrinho de compras com produtos, carrinho e pagamento.

• A intenção é usar esse exemplo para falar sobre alguns conceitos do Next.js e depois adicionar a funcionalidade de checkout.

Trabalhando com páginas de produtos

• Para trabalhar com uma página de produtos, é preciso listar os produtos.

• É possível criar uma lista simples usando HTML e CSS básicos.

• Cada produto deve ter um nome e um link para outra página onde será possível ver mais detalhes sobre ele.

Listando produtos a partir de um arquivo externo

• É possível criar uma lista fake de produtos usando um arquivo JSON.

• O Jason Server pode ser usado para criar essa lista fake.

• Ao listar os produtos na página, cada produto deve ter seu próprio ID, nome, preço e descrição.

Renderização do lado do servidor

Visão geral da seção: Nesta seção, o palestrante explica como a renderização do lado do servidor funciona no Next.js e como isso pode ser usado para tornar as páginas dinâmicas.

Requisições HTTP e renderização de produtos

• Para fazer uma requisição HTTP no topo da página, é necessário usar uma biblioteca de HTTP.

• O Next.js permite que as páginas sejam pré-renderizadas no servidor para melhorar o desempenho e a indexação.

• A renderização do lado do servidor é útil para tornar as páginas dinâmicas e permitir que elas sejam indexadas pelos mecanismos de pesquisa.

• É possível criar uma função chamada getServerSideProps para retornar dados que serão usados na renderização da página.

Exemplo prático

• A função getServerSideProps é executada apenas no servidor e retorna os dados necessários para a renderização da página.

• Os dados são passados ​​para o componente como propriedades.

• Quando a página é carregada, ela já está pré-renderizada com os dados fornecidos pela função getServerSideProps.

• A pré-renderização permite que o HTML seja gerado antecipadamente pelo servidor, melhorando o desempenho e facilitando o acesso à página.

Requisições HTTP com Axios

• O Axios é uma biblioteca que permite fazer requisições HTTP.

• É possível criar uma instância do Axios para reutilizar as configurações em diferentes partes do código.

• A função getServerSideProps pode ser usada para fazer uma requisição HTTP e retornar os dados necessários para a renderização da página.

Renderização de Produtos

Visão Geral da Seção: Nesta seção, o palestrante demonstra como renderizar produtos em uma página web usando Next.js.

Interação com a Lista de Produtos

• O palestrante usa um map para iterar sobre cada produto e renderizá-lo em um elemento li.

• É importante fechar a chave corretamente para evitar problemas no futuro.

• A estratégia usada ajuda o React a entender quando deve ou não renderizar novamente.

Renderização dos Produtos na Página

• O palestrante resolve um problema que poderia causar erros futuros ao retirar uma imagem desnecessária.

• Os produtos são renderizados corretamente na página.

Requisições Ajax e Renderização do Servidor

• Não há requisições Ajax sendo feitas, pois os produtos já estão presentes na página, que foi renderizada no servidor.

• O Next.js ajuda a entender como os produtos serão renderizados na página.

Criação de Página de Detalhes do Produto

Visão Geral da Seção: Nesta seção, o palestrante explica como criar uma nova página para exibir detalhes de um produto específico.

Roteamento Simples com Next.js

• O roteamento é feito pelo nome do arquivo.

• É necessário exportar o componente como "full".

Criação da Página de Detalhes

• O palestrante cria uma nova página para exibir detalhes de um produto específico.

• É possível acessar a página usando "/products/[id].js".

• A nova página é do tipo Next.js.

Renderização no Servidor e Comportamento Otimizado

• A nova página pode ser renderizada no servidor, mas com comportamento otimizado.

Acessando um produto específico

Visão geral da seção: Nesta seção, o instrutor mostra como acessar um produto específico e explica a diferença entre páginas estáticas e dinâmicas.

Acessando um produto específico

• O ID do produto é obtido do contexto.

• Em uma página estática, não há acesso à requisição e resposta.

• É possível desconstruir o objeto do produto para obter informações específicas.

• Um botão de adicionar ao carrinho é adicionado à página.

Páginas Estáticas vs Dinâmicas

• Para páginas estáticas com parâmetros, é necessário declarar um método getStaticPaths().

• É possível fazer consultas no banco de dados para gerar apenas as páginas mais acessadas em vez de todas as páginas.

• O fallback permite que o Next.js saiba quais páginas devem ser renderizadas estaticamente.

• Quando uma página estática não existe, ela é gerada em tempo de execução.

Página Estática e Checkout

Visão Geral da Seção: Nesta seção, o instrutor explica como criar uma página estática usando o Next.js e como criar a página de checkout.

Criando uma Página Estática

• É possível mostrar um loading enquanto a página estática é gerada.

• O comportamento blocking faz com que a página só seja mostrada quando ela terminar de ser renderizada.

• A escala de acesso é melhor com páginas estáticas, pois o servidor não precisa processá-las novamente.

Criando a Página de Checkout

• Será criada uma pasta chamada "check-out" para armazenar as páginas relacionadas ao checkout.

• A página do checkout será chamada "index.tsx".

• A página de sucesso será chamada "success".

• Um formulário será adicionado à página do checkout com um campo para digitar o número do cartão de crédito e um botão para comprar.

• Uma função onsubmit será preparada para lidar com o envio do formulário.

Criando um Componente MyCart

• Será criado um componente reutilizável chamado MyCart que mostrará os itens adicionados ao carrinho, bem como o total e o número de itens.

Trabalhando com Contexto no React

Visão geral da seção: Nesta seção, o palestrante explica como trabalhar com contexto no React para permitir que dois componentes diferentes se comuniquem. Ele cria um provedor de contexto e uma função para adicionar produtos a um carrinho de compras.

Criando um contexto

• O palestrante explica como usar o conceito de contexto do React para permitir que dois componentes diferentes se comuniquem.

• Ele cria uma pasta chamada "context" e um arquivo chamado "cart.js".

• Ele decide criar uma página para exibir o carrinho de compras.

• Ele cria uma função para adicionar e remover produtos do carrinho, bem como limpar todo o carrinho.

• Ele define o estado inicial do contexto como vazio.

Criando um provedor de contexto

• O palestrante usa o createContext do React para criar um provedor de contexto.

• Ele usa useReducer para gerenciar as alterações no estado do carrinho.

• Ele armazena a lista de produtos no estado do componente usando useState.

• Quando ele adiciona um produto ao carrinho, ele concatena a nova lista com a antiga usando setProducts.

• Para remover um produto, ele filtra todos os produtos que não correspondem ao ID do produto selecionado.

• Para calcular o total do carrinho, ele usa reduce para somar os preços de todos os produtos.

• Ele usa uma função memoizada para calcular o total sempre que a lista de produtos muda.

Usando o provedor de contexto

• O palestrante envolve toda a árvore de componentes com o provedor de contexto usando <CartProvider>.

• Ele usa <Link> do Next.js para criar um link dinâmico para a página de detalhes do produto.

Armazenando o carrinho de compras localmente

Visão geral da seção: Nesta seção, o palestrante explica como armazenar o carrinho de compras localmente no navegador do usuário.

Armazenando o carrinho de compras localmente

• Na primeira renderização, é necessário armazenar o carrinho de compras vazio no Local Storage do navegador.

• É possível vigiar os produtos adicionados ou removidos do carrinho e armazená-los no Local Storage.

• É importante lembrar que a lista de produtos inicialmente é vazia, então é preciso verificar se há algum produto antes de fazer qualquer operação com ele.

Adicionando produtos ao carrinho

Visão geral da seção: Nesta seção, o palestrante explica como adicionar produtos ao carrinho de compras.

Adicionando produtos ao carrinho

• Para adicionar um produto ao carrinho, basta pegar o evento do clique do botão e passar o produto para a função que lida com a adição.

• O número total de produtos adicionados deve ser exibido no ícone do carrinho.

Listando os produtos no checkout

Visão geral da seção: Nesta seção, o palestrante explica como listar os produtos adicionados no checkout.

Listando os produtos no checkout

• Para listar os produtos adicionados, é necessário acessar o contexto onde eles estão armazenados e usar a função map para percorrer a lista de produtos.

• É possível remover um produto do carrinho, mas isso não é abordado nesta seção.

Fazendo uma requisição para salvar produtos

Visão geral da seção: Nesta seção, o palestrante mostra como fazer uma requisição para salvar produtos em uma fake API.

Fazendo a requisição

• Para salvar os produtos, é necessário fazer uma requisição para a fake API.

• A rota utilizada é "/orders".

• É possível adicionar os produtos e o cartão de crédito na requisição.

• O número do cartão de crédito deve ser passado como parâmetro.

• Após passar o cartão de crédito, é feita uma ordem de acesso à página de sucesso.

Redirecionando para a página de checkout

Visão geral da seção: Nesta seção, o palestrante mostra como redirecionar para a página de checkout após processar um pedido.

Redirecionando manualmente

• Para redirecionar manualmente, é utilizado um carinha do Net chamado "push".

• É necessário passar a rota desejada como parâmetro.

• No exemplo dado pelo palestrante, as rotas utilizadas são "/checkout/order" e "/checkout/success".

Criando a página "criark"

Visão geral da seção: Nesta seção, o palestrante começa a criar a página "criark", que será responsável por renderizar os detalhes do produto comprado.

Renderizando os detalhes do produto

• Para renderizar os detalhes do produto comprado, é necessário importá-lo na página "criark".

• Também é necessário importar a ordem correspondente ao produto.

• A propriedade que a página "criark" irá receber é do tipo "Order".

Corrigindo erros na fake API

Visão geral da seção: Nesta seção, o palestrante corrige um erro na fake API que estava impedindo a visualização dos produtos salvos.

Corrigindo o erro

• O erro ocorreu porque faltou passar o ID associado à ordem.

• Para corrigir o erro, foi criado um novo ID e adicionada uma nova ordem.

Utilizando o Next.js

Visão geral da seção: Nesta seção, o palestrante explica como utilizar o Next.js para criar uma aplicação web.

Utilizando o Next.js

• É necessário adicionar um Array com objeto.

• O objeto precisa ser um Array e não um objeto único.

• Ainda há problemas de acesso.

• É preciso adicionar o ID para que a criação seja automática.

• Agora é possível voltar para a página 3.000 recaute/1/.

• O uso do Next.js pode acelerar a entrega de páginas estáticas.

• Para atualizar uma página estática, é possível utilizar a função "revalidate".

• Há duas formas de renovar uma página: por tempo ou por demanda (on demand).

• Na versão 12 do Next.js, é possível utilizar a função "on demand static generation" para ativar a renovação da página.

Armazenamento em memória com React

Visão geral da seção: Nesta seção, o palestrante explica como armazenar dados em memória utilizando React.

Armazenamento em memória com React

• O componente "Kart" é utilizado para armazenar dados em memória.

• Existem diversas maneiras de armazenar um carrinho de compras, como cookies ou requisições externas.

• É possível utilizar o Next.js para armazenar um carrinho de compras via HTTP.

• A decisão de armazenamento deve ser separada das regras de apresentação (React).

• O contexto do React não tem relação com o local storage.

Separando a lógica do carrinho

Visão geral da seção: Nesta seção, o palestrante discute a importância de separar a lógica do carrinho da lógica de armazenamento do carrinho para melhorar o desenvolvimento no React. Ele menciona que isso pode ser feito usando conceitos de microfrontend e arquitetura limpa.

Benefícios da separação das responsabilidades

• Separar as responsabilidades traz benefícios, como permitir que o carrinho seja separado das decisões de negócio dentro do front-end.

• A Clear é uma abordagem que ajuda na separação das camadas e permite que as regras principais do software sejam separadas das outras camadas.

• A dependência deve sempre apontar para dentro, ou seja, as outras camadas devem depender das regras principais.

• A Clean Architecture não deve ser aplicada em todas as aplicações e não é uma bala de prata.

Arquitetura Limpa

Visão geral da seção: Nesta seção, o palestrante fala sobre a Arquitetura Limpa e como ela pode ser aplicada ao desenvolvimento front-end.

Implementação com Clean Architecture

• O exemplo usado será a listagem de produtos.

• A Clear é basicamente um desenvolvimento em camadas que permite melhorar as implementações no front-end.

• É possível criar textura com front-end usando a Clean Architecture, seja com React, Angular, Vue ou JavaScript puro.

• A Clear é uma mistura de outros conceitos, como Solid, Onion Factor e arquitetura hexagonal.

Desenvolvimento de software

Visão geral da seção: Nesta seção, o palestrante discute os princípios básicos do desenvolvimento de software e como eles são semelhantes em diferentes tipos de aplicativos.

Princípios básicos do desenvolvimento de software

• O desenvolvimento de software tem princípios básicos semelhantes em diferentes tipos de aplicativos.

• Mesmo que a Clean Architecture não tenha sido pensada para front-end, seus conceitos podem ser aproveitados para melhorar as implementações no front-end.

• A ideia da Clean Architecture é trabalhar com camadas e separar as responsabilidades.