Introducci贸n a Gatsby

1

驴Por qu茅 Gatsby? Seguridad y Velocidad

2

驴Qu茅 es Gatsby?

3

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

4

Requisitos previos y herramientas de desarrollo

5

Gatsby y Gatsby CLI y Starters

6

Configuraci贸n de ESLint

Fundamentos de Gatsby

7

Presentaci贸n y Estructura de Archivos de nuestro proyecto: Platziswag

8

Ecosistema de plugins

9

Usando React para manejar la parte visual e interactiva de nuestra aplicaci贸n

Creando la vista con React

10

Router en Gatsby y Componente Link

11

Layout en Gatsby

Graphql en Gatsby

12

驴C贸mo funciona GraphQL en Gatsby?

13

Accediendo a nuestros datos en Gatsby desde GraphQL

14

Queries, Edges (conexiones) y Nodos en Gatsby

15

Consultas en GraphQL desde React

Usando plugins en Gatsby

16

Instalaci贸n y configuraci贸n de plugins

17

Im谩genes como fuente de datos

18

Plugins de transformaci贸n

19

Estilizando nuestros componentes con styled-components

20

Estilos Globales con styled-components

Stripe checkout

21

Introducci贸n a la API de Stripe Checkout

22

Agregando productos a nuestra tienda en l铆nea

23

Productos en React

Generando p谩ginas program谩ticamente

24

Creando p谩ginas en funci贸n de los datos

25

Manejo de Gatsby Templates

26

Terminando la Vista de Detalle de los Productos

27

StaticQuery vs. useStaticQuery

28

Construyendo el Carrito de Compras: useContext

29

Construyendo el Carrito de Compras: Vista

30

Construyendo el Carrito de Compras: Agregar productos al carrito

31

Comprando productos

Gatsby a producci贸n

32

Gatsby build para compilar nuestro proyecto

33

Deploy a Netlify

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ecosistema de plugins

8/33
Recursos

Los plugins son c贸digo de Gatsby que alguien m谩s de la comunidad escribi贸 por nosotros para que podamos configurar nuestra aplicaci贸n lo m谩s 谩gil y r谩pido posible.

Los plugins pueden ayudarnos de 3 formas:

  • Plugins como Componentes: Cuando instalamos el plugin obtenemos un componente que debemos integrar a nuestra aplicaci贸n para obtener alg煤n beneficio.
  • Plugins como Funcionalidades: Nos ayudan a transformar informaci贸n o implementar una funcionalidad en concreto. Por ejemplo: gatsby-image nos ayuda a crear nuevas versiones de nuestras im谩genes con menor calidad para mejorar la carga inicial de nuestro sitio web.
  • Plugins como Fuente de Datos: Estos plugins utilizan Node.js y GraphQL para consumir la informaci贸n de alg煤n lugar o herramienta como Firebase, WordPress, APIs Rest, entre otras.

Aportes 6

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Excelente curso, me gusta mucho como explica el profesor y de que se tiene en mente un proyecto final.

Hola Devs:
-Aqui les traigo la documentacion de cada uno de los plugins que utilizamos en el proyecto:
gatsby-plugin-react-helmet
gatsby-transformer-sharp
gatsby-plugin-sharp
gatsby-source-filesystem
gatsby-plugin-manifest
-Espero y les ayude a entender mas a fondo el proyecto.
Recuerden, #NuncaParesDeAprender 馃挌

Tres tipos de Plugins

  • Componentes

  • Funcionalidad

  • Fuente de datos

Ecosistema de plugins

Los plugins son herramientas o paquetes de c贸digo que nos van a ayudar en nuestro proyecto. Son como las dependencias de NPM.

Tenemos 3 tipos de plugins:

  1. Componentes
  2. Funcionalad
  3. Fuente de datos

Gatsby tiene un plugin para de fuente de datos: resolve: gatsby-source-filesystem,

Documentaci贸n para algunos plugins:

Gracias Joss, me esta ayudando mucho este curso, espero terminarlo y ponerlo en practica pronto.

Bien, suena interesante cada uno.