Gatsby: Crie um site PWA com React, GraphQL e Netlify CMS
1,679 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
1,679 students enrolled
Price:
$29.99
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