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

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

9/33
Recursos

隆No olvides instalar styled-components!

npm install --save styled-components

Screen reader support enabled.

Aportes 19

Preguntas 7

Ordenar por:

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

o inicia sesi贸n.

Este c贸digo:

export { default as X } from '...';

Es equivalente a este otro:

import X from '...';

export { X };

隆Solo es un atajo! 馃槵馃槈

Si alguien le aparece este mensaje

Error in 鈥/Users/home/Documents/Desarrollo/gatsby/Gatsby-platzi/node_modules/gatsby-plugin-manifest/gatsby-node.js鈥: Cannot find module 鈥榞atsby/dist/utils/create-content-digest鈥

recomiendo eliminar el node_modules y package-lock y reinstalar, aunque seg煤n Kyle (creador de Gatsby) es mejor utilizar yarn

Prueben eliminar el package-lock.json y la carpeta node_modules si tienen error en instalaci贸n

Lo que me est谩 gustando de Gatsby es que al guardar cambios, autom谩ticamente se reflejan en el navegador.

Aunque previamente en la carrera de React se han visto algunos temas de todo lo que compone Gatsby, ser铆a importante recalcar algunos y sugerirlos como tema de estudio, a lo que voy viendo el proyecto incluye:

  • styled components
  • graphql
  • pretier
    Ser铆a bueno ahondar en estos temas de manera resumida o al menos referencial.

Si el proyecto no les compila cuando usan el comando

gatsby develop

Hay que borrar la carpeta node_modules y el archivo package-lock.json
y volver a instalarlos con el comando

npm install

volvemos a levantar el servidor y listo

El component SEO es del core de Gatsby?

Si les aparece la imagen media cortada vayan a styles/components y en
StyledJumbo en la parte de &:before: borren el border-radius y top

Es importante aprender Styled Components para estilizar nuestro sitio

Cu谩l es el snippet para crear rfc ??

Para los que le salen **error ** al aplicar el gatsby develop
deben **actualizar ** las dependencias de los plugin en el pakage.josn

Si al momento de compilar les salta el mensaje en consola de System limit for number of file watchers reached, pueden solucionarlo con la siguiente l铆nea de comando:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

驴A alguien m谩s le pasa esto al ejecutar gatsby develop?:

A m铆 me sali贸 cortada de dos esquinas y para solucionarlo en los style en la parte del Jumbo &:before /* transform: rotate(-19deg); */ coment茅 esa propiedad por si la necesitamos m谩s adelante pero mientras evita que nos rote -19 grados

Este video deber铆a estar en el 9

para usar un puerto diferente 鈥済atsby develop -p 8080鈥

corriendo gatsby

Es optimo usar estilo por medio de js?

Cuando trataba de ejecutar 鈥済atsby develop鈥 Tenia unos errores. Pueden consultar este link en caso tengan el mismo error. https://www.gatsbyjs.com/docs/troubleshooting-common-errors/#issues-with-fs-resolution