Udemy

Platform

Português

Language

Web Development

Category

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

Aprenda a criar um e-commerce real do zero, indo do backend ao frontend até o deploy para produçao!

4.83 (1063 reviews)

Students

88.5 hours

Content

May 2021

Last Update
Regular Price

BLUE HOST
Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
$2.95/month

What you will learn

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

Criar APIs rapidamente com o Strapi


Description

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

---

Esse será um curso vivo, onde iremos ter lives e discussões a cada módulo. Para que você possa ter autonomia em seus projetos futuros e consiga criar qualquer tipo de projeto com ReactJS.


Screenshots

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

Content

Introdução Teórica

Introdução

Dinâmica do curso, módulos e perguntas

Introdução ao NextJS

Introdução ao GraphQL

Introdução ao GraphQL Clients

Introdução ao Strapi - Headless CMS

Introdução ao CSS-in-JS

Introdução a Testes de Software

Criando nosso Boilerplate do NextJS

Requisitos para o projeto

Criando o boilerplate com create-next-app

Configurando o TypeScript no NextJS

Configurando o .editorconfig

Configurando o Eslint

Configurando o Prettier com o Eslint

Configurando um git hook com Husky e Lint-Staged

Instalando e configurando o Jest com TypeScript

Instalando o React Testing Library e escrevendo primeiros testes

Usando o findRelatedTests para rodar somente testes necessários

Instalando o Styled Components e configurando o SSR

Criando estilos globais com createGlobalStyle

Criando estilos no primeiro componente

Melhorando snapshots com Jest-styled-components

Configurando o Storybook e escrevendo stories

Configurando o PWA

Iniciando um projeto através do nosso boilerplate

Extra: PR - corrigindo cobertura de testes

Extra: Servindo estáticos corretamente no build do Storybook


Reviews

I
Isaias29 September 2020

Esse curso é realmente muito bom. O conteúdo foi muito bem organizado, e bem pensado. Pra quem ja conhece React e tem uma base de web vai ajudar muito a criar um projeto real com boas práticas, TDD, etc..

G
Guilherme6 September 2020

O curso está excelente até o momento, muito bem explicado e de fácil compreensão. Com certeza, o melhor curso que já fiz. Nota 10!

M
Marcelo5 September 2020

Já nas primeiras aulas consegui (finalmente) entender as diferenças entre SSG, SPA e SSR e quando melhor utilizar.

J
João2 September 2020

Sim! E as explicações até então estão bem claras sobre os porquês de cada tecnologia e como aplicá-las

L
Leonardo1 September 2020

Nem terminou o curso ainda, mas sinto a satisfação de avaliar. Sempre busco avaliar um curso antes de terminar, mas com esse já me surpreendi demais. Interagindo com o Professor nas mídias sociais, só tenho a esperar por boas surpresas. Recomendo à todos, está sendo um excelente curso '-'

L
Lucas7 July 2020

Podem comprar todos os cursos do Willian de olhos fechados que vocês não vão se arrepender. Só conteúdo de extrema qualidade. O cara é fera!

M
Milton7 July 2020

Excelente curso. Boa didática, abordagem simples e direta além da humildade do professor. Fico ansiosamente no aguardo do próximo módulo.

L
Luiz7 July 2020

A didática do Willian é incrível, o material é de extrema qualidade, com explicações, porquês de utilizar determinada abordagem em comparação à outra, tecnologias que estão frescas no mercado e na minha opinião o destaque vai para o suporte que ele presta aos alunos, é quase que um websocket ?, mandou, respondeu. Sem contar a toda a interação. Valeu muito a pena. Recomendo

A
Anderson4 July 2020

O curso é excelente, e contém o que se espera de um curso de React Avançado. A parte inicial possui muitas configurações que devem ser feitas com atenção, chega a ser um pouco cansativo, em especial para quem é ainda muito iniciante, mas o professor é bastante didático, explica tudo de forma clara e detalhada.

P
Patric4 July 2020

Sensacional, ensinou muita coisa com pouco tempo, sem enrolacao e deu dicas muito boas. Parabens cara.

N
Nathalia4 July 2020

O Willian se preocupa em explicar as coisas como um todo, muito completo e possui uma excelente didática. Por enquanto, superando minhas expectativas!

P
Pablo4 July 2020

5 estrelas logo de cara, pois já conheço o trabalho do Willian através de outros cursos que fiz e também pelo seu blog. Sempre com a didática excelente.

E
Emmanuel4 July 2020

Estou adorando todo o conteúdo. Confesso que estou muito ansioso para a parte de strapi. Parabéns a todos os envolvidos, estão fazendo um ótimo trabalho.

Y
Yuri3 July 2020

Absolutely! The course is not fast-paced and the materials are being release in a timely manner so I feel more confidence in keeping up with it and completing.

M
Marcos3 July 2020

Curso muito acima do que eu esperava! Ótima organização de conteúdo e explicações que acoberta todos os detalhes necessários para compreensão.


Coupons

DateDiscountStatus
12/10/202022% OFFExpired

3210857

Udemy ID

6/6/2020

Course created date

7/15/2020

Course Indexed date
Bot
Course Submitted by