🖖 Inicio

SERVICIOS

Salir

nochedía

Introducción

500 palabras
2 minutos
May 11, 2020

Empezamos ya con el curso con el que aprenderemos a movernos por el mundo moderno de React de la mano de Gatsby

vamos allá

Introducción

Bien, ya lo tenemos todo preparado del curso anterior (primera parte de Gatsby) con lo que podemos empezar ya mismo

De lo que se trata aquí es de entender cómo funciona Gatsby y qué nos está pidiendo

  • Lo que aprendimos en la primera parte del curso es cómo hacemos webs con React
  • Lo que aprenderemos ahora es cómo hacemos webs estáticas con Gatsby

Dicho esto, lanzo frases para entrar en materia y que poco a poco iremos desarrollando:

  • Gatsby lo que hace es leer datos y formatearlos
  • Gatsby "lee" los datos mediante GraphQL
  • Gatsby formatea con React (lo que hemos visto en la 1era parte)
  • Hay dos archivos básicos en Gatsby, el gatsby-node.js y el gatsby-config.js

Bien

Gatsby lee datos y los transforma en páginas

En realidad no necesita leerlos, quiero decir que es opcional, pueden estar ya en la misma página y esta fase podríamos saltarnosla

Pero la potencia de Gatsby la encontramos cuando precisamente leemos datos de alguna fuente, como puede ser archivos markdown, o artículos que tengamos en wordpress, o archivos de texto que tengamos en algún servicio perdido, lo que sea

Utilidad?

Que en lugar de crear contenido directamente en una página web, podemos crear contenido en otro tipo de archivos (más cómodos de generar) y luego automatizar la conversión de esos archivos en páginas web (esto es lo que hace Gatsby)

En definitiva, que a partir de un directorio lleno de archivos markdown con nuestro contenido, una estructura típica de Gatsby nos generará lo siguiente:

  • una página para cada artículo
  • una página central que muestre todos los artículos
  • paginación, por si en lugar de una página con 400 artículos queremos 10 páginas con 40 artículos cada uno
  • podemos crear páginas que muestren artículos por temática (a través de tags)
  • y podemos crear páginas que reciban contenido de manera dinámica (nada nos lo impide, y seguiremos haciendo Gatsby)

El tema es que gatsby genera toda esta estructura de páginas antes, cuando compila

Así, cuando el usuario hace una petición al servidor, éste ya tiene la página hecha y la devuelve muy rápido

Tremendamente rápido

En el mundo WP sería como tener todo tu sitio en caché, pero claro, con todo lo que conlleva trabajar con caché

El principal problema que se podría destacar es que cualquier cambio va a necesitar que compiles todo el site de nuevo, aunque esto en realidad no es un problema, porque

  • Está automatizado, lo harás en local y con un git push harás el deployment
  • La compilación está optimizada para coger sólo aquello que ha cambiado

Qué voy a aprender en este curso

  • Vas a entender muchas de las etapas de Gatsby

  • Vas a aprender a crear un website con Gatsby y por lo tanto podrás ver el potencial de la tecnología

  • Ah, y en lugar de styled-components vamos a ver @emotion, una alternativa que nos traerá realmente pocas diferencias respecto al primero (aunque luego las implementaciones sean distintas, pero esto a nosotros no nos afecta)

Primer capítulo de este curso, donde te hablo grosso modo de cómo funciona Gatsby y por lo tanto para situarte y para que empieces a estructurar mentalmente el tema

Nos vemos en el segundo capítulo, en Re-Creando el website de la parte I

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]