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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Deploy a Netlify

33/33
Recursos

Netlify es un servicio que nos permite hacer deploy de nuestras aplicaciones estáticas de forma muy sencilla y rápida. Solo debemos arrastrar la carpeta public (que Gatsby generó al momento de compilar) y cambiar la url del proyecto para que sea más fácil de recordar.

No olvides publicar tu versión del proyecto en la sección de discuciones utilizando la siguiente convención:

https://platziswag-username.netlify.com

De esta forma hemos terminado el Curso de Desarrollo de Aplicciones con Gatsby JS. No olvides resolver los ejercicios, completar el examen, darle 5 estrellas al profesor y compartir tu proyecto, notas, todas tus dudas y comentarios en la sección de discusiones.

Puedes continuar tu ruta de aprendizaje con los siguientes cursos:

Aportes 23

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Muy buen curso, lo he puesto en practica para un emprendimiento y asi va quedando metegol

Este curso es un palazo, unas actualizaciones vendrían bien pero está buenísimo. Grande profe!

Muy buen curso y muy bien el profesor. Solo tengo una duda, en caso de cargar mas productos en Shopify se debe hacer un nuevo deploy?

Me pareció bastante interesante el curso. Gracias por compartir tu conocimiento. De igual manera, buscaré cómo crear algo propio con Gatsby.
Vi que la página de PokeAPI está hecha con Gatsby, tal vez intente hacer algo parecido ya que yo también estoy haciendo un API pública por hobby y parece ser buena opción para practicar.

Ya me he enamorado de Gatsby, gracias a los plugins puedo hacer casi cualquier cosa con mi aplicación.
Muchas gracias profe Joss y mil gracias Platzi.

Y ya saben, #NuncaParenDeAprender.

Hola Devs
-Un placer haber estado con ustedes.
Recuerden, #NuncaParesDeAprender 💚

Genial este curso!!! Estoy haciendo mi portafolio con Gatsby para entender todos los conceptos y practicar!! Felicitaciones por este curso tan espectacular!!!

Muy buen curso, solo una duda, para manejar los usuarios y sus direcciones de envío, ¿la misma plataforma se stripe te lo permite? o ¿tendríamos que manejarlo por nuestra cuenta?

¡Este es un excelente curso que necesita ser actualizado!

Muy bueno el curso muchas gracias =)

Hola! He estado desarrollando con gatsby ya un par de meses. Ahora estoy tratando de desarrollar un una tienda con el plugin de shopify, pero al momento de hacer gatsby develop me generó un erro que no me había pasado antes y no he podido arreglar. El error es npm err! code elifecycle erno 7

Mis queridos Devs, nunca paremos de aprender!!!

Solo quisiera integrar con una API externa utilizando axios, se necesita algun pugun adicional para que el request funcione en producción?

Excelente curso!!

Excelente curso y excelentísimo Teacher, muy bien explicado cada uno de los temas, esta herramienta me pareció fantástica para crear sitios increíbles. Gracias por compartir tus conocimientos, muchos éxitos

Excelente curso!!
Muy buena disposicion del profesor para resolver nuestras dudas

Estuvo muy bueno el curso! 😄

Gracias por el curso!!

😂

Muy buen curso!

Muy buen curso, lo que me impresionó fue los plugins para SEO. De verdad que hoy en día esto es más que relevante a la hora de hacer un sitio WEB.

Muy bueno el Curso, mi única duda es la siguiente, si tengo que actualizar un producto o en el caso de un blog que puedo hacer carga de distintas entradas de datos, para poder visualizar la nueva información cargada se tiene que volver a compilar ? o tenemos alguna forma que se regenere los html sin tener que volver a hacer un nuevo deploy.