https://www.meetup.com/campinas-frontend/events/262413777/
Para rodar o projeto use esses os comandos:
npm install
npm start
O site já está iniciado, boa parte de React e todo o CSS já está implementado.
Siga as instruções para terminar o site usando o Gatsby. Documentação do Gatsby:
https://www.gatsbyjs.org/docs/
Gatsby roda em React, nele já vem implementado o controle de rotas usando reach-router.
É muito parecido com o react-router.
- Crie uma página de FAQ adicionando um arquivo em
src/pages/faq.js
- Coloque o básico para rodar o componente
import React from 'react';
const FAQ = () => (
<>
<h1>FAQ</h1>
<h2>O que é o Campinas Front-end?</h2>
<p>Grupo destinado a reunir desenvolvedores(as) front-end de Campinas e região.</p>
</>
);
export default FAQ;
Os componentes em src/pages
(e sua estrutura de diretório) criam as páginas no site.
- Coloque um layout igual das outras páginas, use o mesmo componente da Inicial (
src/pages/index.js
) - Veja o resultado em http://localhost:8000/faq
- Adicione um link para a página no header, usando o componente
Link
- Rode um build do projeto
npm run build
- Veja o resultado em
public/
, encontre o arquivo HTML da página de FAQ e verifique que seu conteúdo foi gerado lá dentro do<body />
do HTML
Gatsby é um gerador de site estático, o conteúdo dentro da página do FAQ deve estar dentro do HTML. O que não aconteceria em uma aplicação que só usa React.
Web performance é o core do Gatsby.
Muito parecido com create-react-app
, o Gatsby já vem com Babel e webpack configurado.
O webpack no Gatsby é configurado para gerar um site de alta performance. Vamos conferir:
- Veja que foi gerado um arquivo HTML de cada página:
public/index.html
epublic/faq/index.html
- Repare que navegando entre elas, a troca é instantânea, não ocorre loading de página HTML
Além de rodar o React em Node para gerar as páginas, um site em Gatsby também roda React no browser. Depois de carregado no browser, o site se transforma numa aplicação SPA.
Reparou na quantidade de arquivo JavaScript que gerou no public/
?
Gatsby já trata code split para evitar um bundle pesado gerado pelo webpack.
- Rode um servidor local agora com a versão de build (gerado em
src/public/
), usenpm run serve
e - Acesse http://localhost:9000/ em janela anônima, deixe o Developer Tools aberto na aba Network e desabilite o cache
- Atualize a página, e passe o mouse nos links, veja que um JavaScript é carregado, são os componentes necessários para renderizar a página. Ao clickar, ao clickar no link a página carrega na hora se já terminou a request
É uma técnica sútil que faz muita diferença em sites grandes, e já vem pronta no Gatsby.
Mais sobre web performance com Gatsby, veja esse artigo:
https://www.freecodecamp.org/news/how-gatsby-is-so-blazing-fast-c99a6f2d405e/
Vamos ver performance nas imagens, esse já não é tão automático, mas precisa implementar pouca coisa.
Gatsby usa GraphQL e Sharp para tratar imagens.
Veja esse exemplo de como fica: https://using-gatsby-image.gatsbyjs.org/
- Na página inicial (
src/pages/index.js
), importe os componentes
import Image from 'gatsby-image';
import { graphql } from 'gatsby';
- Rodando
npm start
, acesse http://localhost:8000/___graphql
Esse é um playground para queries que o site pode fazer, use o explorador na esquerda, ele facilita (muito) para montar queries sem errar sintaxe.
- No explorador, coloque
file
->relativePath:
, os campos em roxo são variáveis, coloque o nome da imagem logo.png emeq:
- Coloque na query
childImageSharp
- Coloque na query
fluid
->maxWidth:
com 1024 (tamanho máximo no container de CSS) - Complete a query colocando
src
e execute a query, deve trazer um resultado assim:
{
"data": {
"file": {
"childImageSharp": {
"fluid": {
"src": "/static/12e16ad6333d9104af3362d0c3e4f585/4950c/logo.png"
}
}
}
}
}
- No código da página coloque a query
export const queryLogo = graphql`
query {
<sua query aqui>
}
`;
Quando exporta uma query em um componente de página, Gatsby já entende e faz a request. O resultado vai numa prop data
.
Dentro do componente, você já consegue pegar a imagem com data.file.childImageSharp.fluid.src
.
Para finalizar, Gatsby tem um componente para tratar a imagem
- Coloque no final da query um
...GatsbyImageSharpFluid
, ela deve ficar assim:
fluid(maxWidth: 1024) {
...GatsbyImageSharpFluid
}
- Troque o
<img />
pelo componente<Image />
. Lembrando quedata
vem de prop.
Teste atualizando a página, o resultado é muito parecido com imagens no medium.
O site carrega uma imagem base64 já inline no HTML, aplica blur com CSS, baixa a imagem final e quando termina, anima com fade out para a imagem final. Muitas outras coisas acontecem, veja da documentação:
https://www.gatsbyjs.org/packages/gatsby-image/#problem
Usamos a imagem do tipo fluid, também é possível usar para tamanho definido, que é o fixed:
https://www.gatsbyjs.org/packages/gatsby-image/#two-types-of-responsive-images
Um setup de instalação já veio neste projeto, que foi instalar as dependências e adicionar plugins do Gatsby. Vamos ver como adicionar um plugin, agora sem setup pronto.
Há muitos plugins que a comunidade cria (https://www.gatsbyjs.org/plugins/).
Vamos finalizar a página de FAQ usando um plugin de MDX.
MDX é uma extensão de arquivo markdown (.md) usando React, no Gatsby tem um plugin para usar isso: gatsby-plugin-mdx.
- Veja na documentação dele como usar, as dependências no npm já estão instaladas
- Você vai precisa alterar o arquivo de puglins, toda alteração no
gatsby-config.js
precisa reiniciar onpm start
para fazer efeito - Crie a página
pages/faq.mdx
- Adicione o Layout, veja que tem dois jeitos de fazer:
https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/#default-layouts
- Coloque o componente de
<SEO title="FAQ" />
- No projeto tem um arquivo
/campinas-front-end-faq.md
com um conteúdo para colocar na página
Vamos usar o Netlify.
Ele é bem simples e intuitivo, é frequente ver desenvolvedores usando ele para projetos pessoais.
Você vai precisar subir no GitHub, GitLab ou Bitbucket o seu projeto antes.
Agora com o site em produção, faço um audit no Developer Tools e teste como o site em PWA, esta é outra configuração que já vem (quase) pronta.
Na verdade, ela já vem no template default do Gatsby, é só adicionar essas linhas no gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'Campinas Front-end',
short_name: 'Campinas Front-end',
start_url: '/',
background_color: '#ffffff',
theme_color: '#ffffff',
display: 'minimal-ui',
icon: 'src/assets/images/favicon.png',
},
},
'gatsby-plugin-offline',
],
};
O dojo do meetup acaba aqui, parabéns por chegar até o final! 🎉🎉🎉