Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Avançado: Crie aplicações com NextJS, Strapi e mais
Rating: 4.9 out of 5(2,002 ratings)
12,844 students

React Avançado: Crie aplicações com NextJS, Strapi e mais

Aprenda a criar um e-commerce real do zero, indo do backend ao frontend até o deploy para produçao!
Last updated 9/2023
Portuguese

What you'll learn

  • Criar APIs rapidamente com o Strapi
  • Boas práticas em ReactJS
  • Boas práticas com Styled Components
  • Boas práticas com Testes
  • Server Side Rendering (SSR)
  • Static Site Generation (SSG)
  • Rotas simples e dinâmicas no NextJS
  • Funcionamento do GraphQL
  • Criar componentes ReactJS do zero
  • Utilizar componentes third-party
  • Utilizar Storybook

Course content

57 sections676 lectures94h 8m total length
  • Introdução3:54

    Curso com suporte finalizado.

  • Dinâmica do curso, módulos e perguntas3:02
  • Introdução ao NextJS33:02
  • Introdução ao GraphQL17:57
  • Introdução ao GraphQL Clients14:25
  • Introdução ao Strapi - Headless CMS22:19
  • Introdução ao CSS-in-JS13:38
  • Introdução a Testes de Software26:24

Requirements

  • Conhecimento básico de JavaScript
  • Conhecimento básico de React

Description

O curso não possui mais suporte! Muito do material continua ainda relevante, porém podem haver mudanças em bibliotecas/frameworks.


Iremos criar um e-commerce de jogos, incluindo toda a parte de pagamentos e área do cliente. Os clientes poderão fazer buscas, filtrar, adicionar ao carrinho e comprar seus jogos favoritos.

Teremos também um CMS completamente customizado para que os administradores possam adicionar produtos, categorias, plataformas, criar promoções, editar partes do site, além de emails automatizados para às vendas de cada produto.

Para criar tudo isso, iremos utilizar ferramentas muito famosas no mercado de trabalho, como ReactJS, Next, Apollo e outras coisas mais. Sempre prezando pela qualidade do código, ou seja, teremos testes em tudo!


Introdução e Arquitetura do Projeto

Iremos conhecer a Stack utilizada no curso, tendo explicação de cada uma das escolhas, assim como mostrando os prós e contras de cada uma delas

Iremos construir nosso boilerplate do zero, aprendendo a configurar as ferramentas de qualidade de código, como Eslint, Prettier, Git hooks e TypeScript. Assim como também configurar o Styled Components para funcionar com SSR e PWA.


Strapi e GraphQL

Vamos iniciar nosso backend/CMS com o Strapi, aprender mais sobre sua API, como o content type builder, single types, custom components. Além de aprender a criar controllers customizados, serviços, instalar plugins de documentação e também do GraphQL, onde iremos aprender como funciona, como criar queries, filtros, mutations e mais.

Para finalizar, aprenderemos como customizar o CMS para que ele tenha a cara da loja e se torne uma solução mais interessante para o cliente.

NextJS, Storybook, Testes e Apollo

Essa que será uma das maiores etapas, é onde vamos aprender a pegar um layout diretamente do Figma e vamos transformá-los em diferentes componentes e estilos.

Faremos todos os componentes com styled components, com testes, cenários no Storybook e pensando na responsividade. Com os componentes prontos, construiremos as páginas, ajustando o que for necessário para que tudo se encaixe perfeitamente.

Testes E2E e Cypress

Neste módulo iremos aprender a importância dos testes de integração e como garantir ainda mais qualidade no nosso projeto. Vamos criar testes para todos os fluxos que um usuário normal pode executar em nosso site, desde a navegação normal até uma compra efetuada.



CI e Deploy

Normalmente a maioria dos cursos termina na criação do projeto, mas nunca ensina como fazer para realmente deixar em produção.

Aqui nós iremos aprender quais as necessidades do projeto e quais as soluçoes que podemos utilizar. Além disso, iremos criar uma pipeline em um CI para que tenhamos todo o processo de deploy o mais automatizado possível

Who this course is for:

  • Desenvolvedores que desejam ir além de um simples ToDo
  • Desenvolvedores que desejam aprender a criar APIs de forma rápida
  • Desenvolvedores que desejam ter um ecommerce