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

Requisitos previos y herramientas de desarrollo

4/33
Recursos
Transcripción

Requisitos:

Herramientas de desarrollo:

  • Prettier: Nos ayuda a formatear (corregir) nuestro código para seguir buenas prácticas.
  • ESLint: Nos ayuda a detectar errores, incluso antes de ejecutar o probar nuestro código. De esta forma agilizamos el trabajo, ya que obtenemos una guía visual para detectar si algo está mal, todo esto al mismo tiempo que vamos programando.

Recuerda que puedes instalar los plugins de ambas herramientas en editor de código favorito. De esta forma no tendras que ejecutar un mismo comando todo el tiempo para detectar los errores, los plugins lo harán por ti cada vez que guardes tus archivos.

Aportes 11

Preguntas 2

Ordenar por:

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

Pero Gatsby es una herramienta para el desarrollo del lado del cliente, diría yo, ya que esta basado en la arquitectura de JAMStack 🤔

excelenteeee, hace timepo era para que hagan clases utilizando esto 😉

Debería estar especificado aquí que se trabaja con MacOS y que si se hace con WIndows no funciona igual. Por lo menos se evitarían pérdidas de tiempo…

muy bueno

Ya las ocupo todas xD

A quien le dio este error:

`Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)`

Casi todos los cursos menso el de GraphQL. Voy a intentar avanzar así y ver hasta donde llego

Buen dato lo de ESLint y Prettier ❤️

Cuando apreto F1 y clikeo el “open setting json” me aparece esto.

{
“files.autoSave”: “off”,
“workbench.sideBar.location”: “left”,
“php-cs-fixer.executablePath”: “${extensionPath}\php-cs-fixer.phar”,
“php-cs-fixer.lastDownload”: 1575209722806,
“window.zoomLevel”: 0
}

pero no lo que te sale a ti jos_smith xd

¿El cambio de línea en el settings.json es para todos los proyectos o solo el actual? ¨Por lo que ví sería solo en todo VSC.