React Avançado: Crie aplicações com NextJS, GraphQL e mais
4.9 (349 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,049 students enrolled

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!
Bestseller
4.9 (349 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,049 students enrolled
Last updated 8/2020
Portuguese
Price: $144.99
30-Day Money-Back Guarantee
This course includes
  • 18.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 130 lectures 18:24:34
+ Introdução Teórica
8 lectures 02:14:41
Introdução ao GraphQL
17:57
Introdução ao GraphQL Clients
14:25
Introdução ao Strapi - Headless CMS
22:19
Introdução ao CSS-in-JS
13:38
Introdução a Testes de Software
26:24
+ Criando nosso Boilerplate do NextJS
21 lectures 03:28:12
Requisitos para o projeto
02:43
Criando o boilerplate com create-next-app
10:22
Configurando o TypeScript no NextJS
09:35
Configurando o .editorconfig
02:44
Configurando o Eslint
13:10
Configurando o Prettier com o Eslint
07:25
Configurando um git hook com Husky e Lint-Staged
09:59
Instalando e configurando o Jest com TypeScript
10:29
Instalando o React Testing Library e escrevendo primeiros testes
21:32
Usando o findRelatedTests para rodar somente testes necessários
01:36
Instalando o Styled Components e configurando o SSR
08:25
Criando estilos globais com createGlobalStyle
13:03
Criando estilos no primeiro componente
14:35
Melhorando snapshots com Jest-styled-components
03:44
Configurando o Storybook e escrevendo stories
26:23
Migrando Storybook para versão 6.x
13:11
Configurando o PWA
08:53
Iniciando um projeto através do nosso boilerplate
06:38
Extra: PR - corrigindo cobertura de testes
02:08
Extra: Servindo estáticos corretamente no build do Storybook
03:24
Extra: Mantendo o boilerplate com atualizado usando Dependabot e Github Actions
18:13
+ Iniciando com Strapi
9 lectures 01:43:09
Strapi por debaixo dos panos
12:09
Requisitos para o Strapi
06:34
Comandos do PostgreSQL
09:34
Iniciando o Strapi local
08:02
Iniciando o Strapi com Docker (opcional)
18:41
Apresentação do CMS do Strapi
15:58
Arquivos iniciais do Strapi
12:01
Fields do Strapi
11:53
+ Criando estrutura de dados para o CMS da Landing Page
15 lectures 01:48:23
Criando logo e componente de Header
22:48
Criando Section About Project - Rich Text
04:11
Criando Section Tech - Repeatable Component
06:47
Criando Section Concepts
04:03
Criando Section Modules
03:31
Criando Agenda e Pricing Box - reutilizando componente já criado
06:43
Criando Collection Type para Authors
06:30
Adicionando campo faltante em Authors
00:46
Criando relations (has many)
03:48
Criando Section Reviews
03:01
Criando Section FAQ
03:07
Atualizando Strapi para 3.0.6 (se já possuir essa versão ou maior, ignore)
03:59
Adicionando um plugin customizado (CKEditor)
18:23

Comandos do PostgreSQL para import/export:


Para exportar os dados (backup)
pg_dump -c --if-exists --exclude-table=strapi_administrator -h 127.0.0.1 -U strapi -d strapi -W > strapi.sql


Para importar os dados
psql -h 127.0.0.1 -U strapi -d strapi -W < strapi.sql


Importando e Exportando dados no PostgreSQL
12:18
Permissões para rotas de Rest API
08:28
+ Introdução ao GraphQL
9 lectures 50:57
Transformando API em GraphQL
05:37
Criando primeiras queries do GraphQL
09:14
Escrevendo Queries parametrizadas com variáveis
04:26
Utilizando Fragments no GraphQL
07:13
Aliases no GraphQL
01:20
Criando primeira mutation para atualizar dados (updateAuthor)
09:57
Criando mutations parametrizadas
03:31
Criando primeira mutation para criar dados (createAuthor)
05:19
Deletando dados com mutation
04:20
+ Trabalhando com GraphQL no Frontend
16 lectures 02:12:44
Vendo o código da Landing Page e clonando o projeto
06:36
Criando o GraphQLClient
05:07
Criando a primeira query no Frontend
04:43
Fazendo o fetch dos primeiros dados (Data Fetching - getStaticProps)
13:58
Criando Types para a API e mostrando primeiros dados em tela
11:20
Criando variáveis de ambiente
10:47
Tornando o header dinâmico
11:10
Tornando o SectionAboutProject dinâmico
10:28
Tornando o SectionTech dinâmico
08:16
Tornando o SectionConcepts dinâmico
05:54
Tornando o SectionModules dinâmico
04:38
Tornando o SectionAgenda dinâmico
03:28
Tornando o PricingBox dinâmico
06:45
Tornando o SectionAboutUs dinâmico
14:45
Tornando o SectionReviews dinâmico
08:42
Tornando o SectionFaq dinâmico
06:07
+ Colocando a Landing Page em produção
6 lectures 01:18:14
Sobre os serviços utilizados
04:41
Configurando e subindo o projeto no Heroku
18:36
Fazendo dump de local para produção (OPCIONAL)
14:03
Instalando um provider de estáticos (AWS S3)
13:10
Subindo o estático Next para o Netlify
10:46
Criando um webhook para trigger de deploy no Netlify
16:58
+ Strapi - Atualizações e Migrações
2 lectures 21:59
Migrando o Strapi da 3.0.x para 3.1.x (a versão com permissões de usuário!)
07:39
Configurando permissões de usuário (Super Admin, Author, Editor)
14:20
+ Criando a API para o Ecommerce (Won Games)
10 lectures 46:00
Inicializando o Strapi
06:25
Criando a primeira Collection Type - Categories
05:47
Criando Collection Type - Platforms
03:01
Criando Collection Type - Developers
01:07
Criando Collection Type - Publishers
00:57
Criando Collection Type - Games
07:25
Entendendo e criando Relations - One to Many, Many to Many...
12:01
Configurando o plugin de GraphQL
01:13
Configurando o editor para CKEditor
03:45
+ Customizando o Admin do Strapi para a Won Games
13 lectures 01:11:35
Documentação do Strapi sobre Customização
05:49
Customizando a Logo da página de Login/Password/Register
12:25
Editando o favicon
01:04
Removendo ícone de tutoriais
02:13
Mudando a logo do menu esquerdo
07:29
Themes do Strapi e mudando o background color do LeftMenuHeader
04:36
Refatorando o styled component para uma forma mais organizada
03:40
Customizando o background de todo o LeftMenu
04:50
Customizando o LeftMenuLinkSection e identificando elementos com React DevTools
03:29
Customizando o hover dos links do menu
05:53
Customizando o MenuLeftFooter
04:07
Customizando a Home Page
14:03
Requirements
  • Conhecimento básico de JavaScript
  • Conhecimento básico de React
Description

Esse é um curso em andamento! Leia abaixo sobre todos os detalhes, módulos ou acesse ao site do React Avancado.

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.

---

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.

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