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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Gatsby build para compilar nuestro proyecto

32/33
Recursos

Vamos a compilar nuestro proyecto de Gatsby para generar un sitio estático que podamos mandar a producción:

npm run build
# También:
gatsby build

Recuerda que debes crear un nuevo archivo llamado .env.production para la configuración real de tus productos en Stripe (de otra forma, los usuarios solo podrán hacer compras ficticias).

También debemos añadir la configuración del archivo gatsby-browser.js a gatsby-ssr.js:

const React = require("react");
const Layout = require("./src/components/layout").default;
const { GlobalStyles } = require("./src/styles");
const { CartProvider } = require("./src/context");

exports.wrapRootElement = ({ element }) => (
  <CartProvider>
    <GlobalStyles />
    <Layout>{element}</Layout>
  </CartProvider>
);

Por último, vamos a usar el plugin gatsby-plugin-styled-components para que nuestra aplicación tenga sus estilos al compilar el código de React.js:

// gatsby-config.js
plugins: [
  `gatsby-plugin-styled-components`,
  /* ... */
],

Aportes 4

Preguntas 3

Ordenar por:

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

si quieres ahorrar tiempo copia y pega el gatsby-browser.js

Alguien que me ayude con este error al hacer build

<$ gatsby build
success open and validate gatsby-configs - 0.010 s
error
Your plugins must export known APIs from their gatsby-node.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby Node APIs

- The plugin "[email protected]" is exporting a variable named
>

Si quieren el Stripe Secret Key vayan al minuto 2:02.

A mi me dio el siguiente error

 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for f  ull errors and additional helpful warnings.

El problema era que no habia eliminado page-2.js de pages