Los amo, me encanta que comiencen el curso mostrando el proyecto que uno terminaría haciendo a lo largo de cada tema. Crean que nos alivian mucho a las personas ansiosas y curiosas que están pendientes de saber que sigue para saber que se logra hacer, y a su vez te motiva a terminar el curso lo antes posible e ir proyectando el uso que uno le daría a esta nueva skill
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
¿Qué es Gatsby?
2/33Recursos
Transcripción
Gatsby es un framework generador de sitios estáticos que utiliza React, GraphQL y Webpack para construir sitios. Gatsby también es conocido como GatsbyJS y fue diseñado para permitir a los desarrolladores construir sitios web con React rápidamente.
El framework incluye herramientas para crear consultas de datos y transformar esas consultas en componentes reutilizables. Gatsby ahorra tiempo al permitir a los editores de contenido editar el sitio web como lo harían con cualquier otra pieza de contenido sin preocuparse por el código, como lo harían con un CMS.
Gatsby fue diseñado originalmente como starter project de React, pero desde entonces ha ganado mucha popularidad y ahora soporta otras bibliotecas y tecnologías como Webpack y GraphQL, lo que lo hace más poderoso que un simple proyecto inicial.
Cómo funciona Gatsby
Gatsby usa GraphQL para recolectar la información de nuestro sitio web desde diferentes fuentes: APIs, CMS o nuestro sistema de archivos. Y teniendo lista la información, renderiza nuestras vistas en React.js para construir sitios estáticos muy optimizados.
Gatsby se construye en el servidor apoyándose de NodeJS y de Webpack. También usa los plugins para obtener información de diversas fuentes.
Gatsby usa:
- Virtual DOM
- Componentes
- Hot Reloading
- Code Splitting e imágenes responsivas
Ya que Gatsby hace un sitio estático es muy fácil hacer el despliegue.
Cuáles son las ventajas de Gatsby
Gatsby es un framework open source increíblemente rápido, tanto en desarrollo como en producción. Trabaja con un stack innovador, ya que integra tecnologías como React y GraphQL con diferentes fuentes de información como WordPress o Sanity.io.
Qué aplicaciones web están construidas con Gatsby
Entre muchas otras aplicaciones, la documentación oficial de React.js está construida con Gatsby: Reactjs.org.
La página de comercio electrónico de la marca Braun está hecha en Gatsby.
Y también, Figma, la famosa plataforma para crear diseños personalizados y compartir prototipos
Puedes ver toda una colección de páginas construidas en Gatsby en su showcase.
Aportes 20
Preguntas 5
Ordenar por:
recibe datos de firebase?
Gatsby podría ser afín a la arquitectura de micro-frontends ??
¿Qué es Gatsby?
- Framework
- Abierto y gratuito
- Comunidad increíble
- Apuesta a un stack innovador
- Increíblemente rápido en desarrollo y producción
¿Cómo funciona? Gatsby recolecta la información previamente. Funciona como un sistema SSR. Trae la información de distintas fuents, como una Base de datos, un CMS o un sistema de archivos. Con esto crea vistas con React y GraphQL. Crea un sitio estático.
De las mejores intro que he visto en cursos!
Voy a realizar un proyecto corporativo y vine a ver este curso, ya termine el curso tambien en un par de horas, si todo va bien, el proyecto, voy a poner el enlace del producto final al final del curso para que vean que si se puede
Que genial, lo mejor de dos mundos GraphQL y React 🚀
Gran curso!
exelente
Brutal la forma de iniciar el curso 🔥
Wow!!! Buenísimo. El profe me deja con muchas expectativas para aprender Gatsby!!!
Muy buena introducción al curso, motiva mucho los resultados que muestra!
Excelente,vamos a adentrarnos en este framework
ventajas de Gatsby:
Nos entrega un sitio rápido, optimizado y tiene una buena navegación
Link de gatsby: gatsby
Asi se inicia la introduccion de un curso!
Eh visto de Gatby se basa en JAMStack (Javascript API´S Markup) 🤔, pero no me queda claro que es en realidad, solamente que es conjunto de tecnologías para el desarrollo web como MEAN, MERN, etc… pero todos los procesos no se realizan en el servidor, sino, en el cliente.
Gracias Joss. Voy a tomar el curso nuevamente para pasar el examen.
Hola Devs:
-Asi como toda nuestra comunidad le encanta aprender, aqui les tengo un articulo que nos podria nutrir en conocimiento sobre GatsbyJS: Click Aqui
-Espero y les encante tanto como a mi.
Recuerden, #NuncaParesDeAprender 💚
Justo tengo ganas de implementar algun frontend con un servidor de e commerce que hice con culqi 😄, llamandola desde api’s espero todo me vaya bien 😃
Me encantó la introducción al curso 😄
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?