Gatsby: Crie um site PWA com React, GraphQL e Netlify CMS
4.9 (617 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,754 students enrolled

Gatsby: Crie um site PWA com React, GraphQL e Netlify CMS

Crie e coloque no ar um site extremamente rápido, utilizando boas práticas e as ferramentas mais utilizadas no mercado.
Highest Rated
4.9 (617 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,754 students enrolled
Last updated 7/2020
Portuguese
Current price: $22.99 Original price: $29.99 Discount: 23% off
30-Day Money-Back Guarantee
This course includes
  • 9 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
  • Como usar o Gatsby para criar sites extremamente rápidos
  • Como pegar informações do GraphQL
  • Como configurar os melhores plugins do Gatsby
  • Como criar posts em Markdown e transformá-los em dados no GraphQL
  • Como utilizar o gatsby-image para otimizar imagens e fazer lazy loading
  • Como criar uma boa estrutura de componentes em React
  • Como utilizar o styled components
  • Como criar um site PWA e com o SEO perfeito
Course content
Expand all 83 lectures 08:58:48
+ Gatsby e sua estrutura
6 lectures 33:35
Entendendo a estrutura
05:58
Organizando os arquivos
04:40
Criando a página de About
01:58
Entendendo como o gatsby-link funciona
07:08
Criando um componente e compartilhando entre páginas
06:55
+ Gatsby e GraphQL
5 lectures 31:59
Uma introdução ao GraphQL
09:50
Conhecendo o GraphiQL e escrevendo nossa primeira query
06:52
Utilizando o Prisma Playground ao invés do GraphiQL
04:16
Renderizando dados com `StaticQuery`
07:11
Refatorando para o novo hook `useStaticQuery`
03:50
+ Trabalhando com Imagens no Gatsby
4 lectures 28:18
Conhecendo as maravilhas do gatsby-image
04:52
Configurando o gatsby-image
06:28
Criando a primeira query para imagens
12:00
Entendendo os 2 tipos de imagem responsiva (fluid e fixed)
04:58
+ Layout e Styled Components
14 lectures 01:23:56
Introdução ao Styled Components
04:10
Instalando e configurando o Styled Components
02:01
Criando o Layout Component
06:20
Criando estilos globais com `createGlobalStyle`
04:13
Refatorando o styled component para uma forma mais organizada
03:27
Criando o Avatar Component
02:32
Criando o Profile Component
03:34
Criando a Sidebar Component
04:09
Criando o SocialLinks Component - Parte 1
07:14
Criando o SocialLinks Component - Parte 2
09:44
Criando o MenuLinks Component
08:18
Criando a MenuBar Component
09:25
Criando o PostItem Component
12:11
Estruturando os dados do PostItem
06:38
+ GraphQL + Remark
9 lectures 57:48
Criando posts em Markdown
08:16
Configurando o gatsby-transformer-remark
03:41
Pegando os dados do Markdown usando GraphQL
03:58
Tratando datas no GraphQL
02:59
Passando os dados do GraphQL para a página
08:10
Adicionando fields com o `onCreateNode`
08:25
Usando o createPages da Gatsby Node API
08:20
Filtrando dados no GraphQL usando variáveis
07:22
Criando o template para o Blog Post
06:37
+ Estruturando a Home
5 lectures 38:28
Ordenando os posts pela data
04:06
Entendendo o limit e skip para criar uma paginação
05:18
Usando o Gatsby Node API para criar a paginação
09:29
Criando o template para a home
06:10
Criando um componente de paginação
13:25
+ Estruturando a Página de Post
7 lectures 45:43
Integrando o Layout ao Blog Post
01:22
Adicionando estilos bases para o post
05:57
Configurando as imagens dentro do post com gatsby-remark-images
11:04
Configurando o PrismJS para highlight de código
04:28
Criando contextos de post anterior e próximo post
04:23
Criando o RecommendedPosts component
10:29
Configurando o Disqus para comentários
08:00
+ Criando a página de Search
9 lectures 53:58
Conhecendo o Algolia
03:22
Criando o primeiro App e configurando indices
03:21
Instalando o plugin do Algolia e salvando as chaves da API
06:15
Configurando o plugin dentro do Gatsby
15:24
Configurando o searchable attributes e custom ranking do Algolia
04:17
Criando a página de Search
02:44
Criando o Search Component
06:36
Configurando o Input de busca e stats
05:30
Configurando os itens de resultados
06:29
+ Criando Light/Dark Theme e Modo de Visualização
6 lectures 49:06
As diferentes soluções para Light/Dark Theme
03:59
Criando CSS Variables
08:48
Criando um html.js customizável para o Gatsby
04:01
Criando o método para a troca dos temas
13:35
Criando o método para troca de visualização
07:05
Estilizando com CSS Grid
11:38
Requirements
  • Básico de HTML, CSS e JS
  • Editor de Texto (VSCode preferencialmente)
  • Node 8+
  • Git
Description

Já pensou em ter um site PWA para suas necessidades e utilizando as tecnologias de ponta?

Com esse curso, você aplicará conceitos atuais do mercado e botará em prática ferramentas em alta demanda como: React e GraphQL (através do Gatsby), Styled Components e técnicas de CI/CD (de forma gratuita com o Netlify).

Você irá aprender a criar um site de verdade e colocá-lo no ar! Nada de bar e foo, tudo que será ensinado, será utilizado na prática até o final!

Faça o curso com um dos instrutores brasileiros com o maior número de alunos na Udemy e com vários cursos dentre as classificações mais altas da plataforma!

Who this course is for:
  • Desenvolvedores Frontend que desejam criar um blog próprio
  • Freelancers que criam sites/blogs para empresas
  • Desenvolvedores com interesse em aprender mais sobre boas práticas em Frontend
  • Desenvolvedores com interesse em aprender React e GraphQL