Ecosistema de plugins

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

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

Ecosistema de plugins

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

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

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?

darwinovalles

hace 5 años

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

Wandy Rafael Santana Evangelista

hace 4 años

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 💚