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

Configuraci贸n de ESLint

6/33

Lectura

驴Qu茅 es ESLint?

ESLint es una herramienta de linting para Javascript. Un linter es un programa que se encarga de revisar el c贸digo escrito y es capaz de se帽alar errores y posibles bugs que podemos corregir para mejorar nuestros programas, de esta manera tenemos acceso a los errores incluso antes de que sucedan.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 10

Preguntas 0

Ordenar por:

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

o inicia sesi贸n.

En efecto hay varios pasos que se deben aplicar antes de ejecutar este proceso, porque quede perdido al llegar aqui y no tener modulos de node instalado

Install the Gatsby CLI

npm install -g gatsby-cli

Create a new site

gatsby new gatsby-site

Change directories into site folder

cd gatsby-site

Luego de estos pasos si ejecutar el comando para Eslint

./node_modules/.bin/eslint --init

Pueden utilizar

npx eslint --init

en reemplazo de

./node_modules/.bin/eslint --init

para poder inicializar su configuraci贸n de eslint

Recuerden, la raiz del proyecto:
yarn install
Y, luego
./node_modules/.bin/eslint --init
Eso lo obviaron en este articulo.

Hola Devs:
-Aqui les presento como quedo:

Cuando dicen de ejecutar este comando:
./node_modules/.bin/eslint --init

Deber铆an haber pasos previos ya que anteriormente no se ha instalado gatsby , por lo que me queda la duda de si no les falta mencionar esa parte o quizas yo me lo perdi y lo siento por eso.

Yo tuve que https://www.gatsbyjs.org/docs/quick-start y termine creando la carpeta gatsby-site y ahi si funciono el comando.

Est谩 clase deber铆a estar despu茅s de la siguiente, en la posici贸n 6

Esto deber铆a ir despu茅s de la presentaci贸n del proyecto

Y comento que con la version 10.15.3 e instalando gatsby con yarn me da el siguiente error:

An error occurred while generating your JavaScript config file. A config file was still generated, but the config file itself may not follow your linting rules.
Error: Cannot find module '../cli-engine'
Error: An error occurred while generating your JavaScript config file. A config file was still generated, but the config file itself may not follow your linting rules.
Error: Cannot find module '../cli-engine'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at writeJSConfigFile (/Users/crovat/study/gatsby/proyect/gatsby-site/node_modules/eslint/lib/config/config-file.js:294:27)
    at Object.write (/Users/crovat/study/gatsby/proyect/gatsby-site/node_modules/eslint/lib/config/config-file.js:328:13)
    at writeFile (/Users/crovat/study/gatsby/proyect/gatsby-site/node_modules/eslint/lib/config/config-initializer.js:56:16)
    at askInstallModules.then (/Users/crovat/study/gatsby/proyect/gatsby-site/node_modules/eslint/lib/config/config-initializer.js:560:29)
    at process._tickCallback (internal/process/next_tick.js:68:7)
鉃  gatsby-site git:(master) 鉁 nvm version
v10.15.3

De todas maneras se genera el archivo .eslintrc.js que es muy similiar al de su descripci贸n.

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};```

como veran lo unico que cambia es que en env no esta la key "node".

Creo que antes de post se debi贸 explicar c贸mo instalar Gatsby.

Ejecutar antes

npm install

despues

npx eslint --init

Nota: Hay una 煤ltima pregunta, dice que si quieres utilizar typescript, colocar 鈥淣O鈥