Ciclo de vida e fundamentos
LauraBeatris
LauraBeatris
Apaixonada por React e todo o seu ecossistema, como frameworks e as comunidades envolvidas no desenvolvimento da biblioteca.
Kyle Mathews - Criador do Gatsby
- Criar uma aplicação web que utilizasse React e Webpack, se baseando em dois pontos principais:
- Foco em page speed das aplicações
@kylemathews
A dinâmica de um gerador de site estaticos
Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)
A dinâmica de um gerador de site estaticos
Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)
Templates baseadas em React. Componentes podem executar GraphQL queries para fetch de dados.
A dinâmica de um gerador de site estaticos
Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)
Templates baseadas em React. Componentes podem executar GraphQL queries para fetch de dados.
Gera a aplicação estática
Etapas do ciclo de vida
1. Bootstrap
- Validação da configuração (gatsby-config.js)
- Carregamento de plugins
- Criação das páginas
- Construção dos schemas com base nas fontes de dados, via a API do GraphQL
Etapas do ciclo de vida
2. Build
- Semelhante a etapa de bootstrap
- Optimizações para produção
- Output dos arquivos estáticos
3. Browser
- Depois que os arquivos estáticos são gerados e a aplicação esta em produção, o gatsby e seu ciclo de vida comecam a viver no browser
Etapas do ciclo de vida
Arquivos de hooks do lifecycle
Assim como o React possui seus métodos para ciclo de vida, o Gatsby expõe alguns lifecycle hooks a partir de arquivos específicos, como por exemplo:
gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Agriculture Holding',
author: 'Laura Beatris',
},
plugins: [
'gatsby-plugin-sass',
{
resolve: 'gatsby-plugin-postcss',
options: {
postCssPlugins: [
require('tailwindcss'),
require('postcss-import'),
require('autoprefixer'),
],
},
},
]
gatsby-node.js
Hooks:
gatsby-node.js - onCreateNode
gatsby-node.js - createPages
gatsby-browser.js
Hooks:
gatsby-browser.js
gatsby-ssr.js
Hooks:
gatsby-ssr.js - onRenderBoy
gatsby-ssr.js - wrapRootElement
O React é o core do Gatsby, por isso eles compartilham algumas APIs parecidas, como o lifecycle. Esse lifecycle tão poderoso permite com que nós tenhamos acesso a momentos chaves da aplicação, proporcinando uma experiência excelente de desenvolvimento.