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

Router en Gatsby y Componente Link

10/33
Recursos

Gatsby nos facilita mucho la creaci贸n de p谩ginas de nuestra aplicaci贸n. Solo debemos crear un archivo en la carpeta src/pages con el nombre de la p谩gina y autom谩ticamente tendremos esa ruta disponible con el contenido del archivo.

Por ejemplo: Podremos ver contenido del archivo src/pages/index.js en la ruta / y el contenido del archivo src/pages/about.js en la ruta /about.

Adem谩s, Gatsby nos provee un componente <Link /> para navegar entre nuestras p谩ginas. Funciona muy parecido a una etiqueta <a>, pero al dar click no recargaremos la p谩gina ni haremos peticiones al servidor, en cambio, podremos visualizar inmediatamente el contenido de la p谩gina a la cual queremos navegar. Todo esto gracias a que Gatsby tiene todas las funcionalidades de una Single Page Application.

Recuerda que estas funcionalidades del componente <Link /> solo funcionan en las p谩ginas de nuestras aplicaciones con Gatsby. No podemos usarlo para navegar a otras aplicaciones.

Para usar este componente solo debes importarlo desde:

import { Link } from 'gatsby';

Aportes 22

Preguntas 7

Ordenar por:

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

o inicia sesi贸n.

Para visualizar los emojis en windows ( presionar la tecla de windows mas la tecla de punto)

Lo hice con la misma estructura que el de Gracias.
.
En la parte de los estilos agregu茅 un margin de top y bottom de 15px al spam para que el bot贸n no quedar谩 encima del emoji.


.
Por cierto, estoy en Windows y si quieren usar emojis, les recomiendo la extensi贸n de :emojisense:
.
Tambi茅n, algo que not茅 al iniciar el proyecto es que el body manten铆a el margen que viene por defecto. Para solucionarlo s贸lo importe el archivo 鈥榣ayout.css鈥 al componente de layout.

import './layout.css'

Lo pongo por si a alguien le pas贸 tambi茅n, as铆 lo solucion茅.

驴Como puedo visualizar ese recuadro peque帽o de los emojis? 驴Como se llama la extension?

El Link de gatsby es el mismo de react router?

Alguien haciendo este curso en pleno 2021? xd

No se debe configurar React Router?

Alguien me puede decir por qu茅 se ve mi app con bordes por todos lados??? Se necesita un reset.CSS o qu茅?? Copi茅 directamente todo el proyecto tal cual se especific贸 al principio de curso鈥

![](

El componente gracias no debe estar en mayuscula?

Aqui va mi resultado hasta el momento.

Por si les sale error con rol=鈥渋mg鈥
<span role=鈥渋mg鈥 aria-label=鈥渆moji鈥>
馃挌
</span>

El video 9 deber铆a ir en el 11 y asi bajar

Hola, estoy teniendo este problema cuando ejecuto gatsby develop:

Cannot find module 鈥榞atsby/dist/utils/create-content-digest鈥

Alguna idea?

Gracias

como podr铆a redireccionar el sitio a https? Por default es http.
Gracias.

windows + . para los emojis

stoy teniendo este problema cuando ejecuto gatsby develop:

Cannot find module 鈥

Hola Devs:
-Espero y esten aprendiendo un monton al igual que yo:

-Mi repositorio [en el commit de esta clase]: Click Aqui
Recuerden, #NuncaParesDeAprender 馃挌

馃憣

import React from 'react'
import { Link } from 'gatsby'

import { SEO } from '../components'
import { Button, Purchase } from '../styles/components'

export default function thanks() {
  return (
    <div>
      <SEO title="Not so great purchase!" />

      <Purchase>
        <h2>Purchase Cancelled.</h2>
        <p>We're sorry you had to do that.</p>
        <p>Anyway, hope to see you again!</p>
        <span rol='img' aria-label='emoji'>馃檶</span>

        <Link to='/'>
          <Button>
            Volver al cat谩logo
          </Button>
        </Link>
      </Purchase>
    </div>
  )
}

React es JS con esteroides, y Gatsby es React con ketamina. Me encanta

Es posible cambiar el nombre de la ruta mostrada en el URL para que sea distinta al archivo creado dentro de /pages? Por ejemplo, que el archivo se llame thanks.js pero la ruta sea /gracias

驴En windows como se visualiza el cuadro de los emojis?