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.

¿Por qué usar ESLint?

Gracias a que JavaScript es un lenguaje dinámico y débilmente tipado, especialmente propenso a errores por parte del programador es que ESLint es muy útil. Esta herramienta nos ayuda a prevenir la manera de antaño para encontrar errores en este lenguaje.

El objetivo de ESLint es encontrar errores mucho antes de que sucedan, de manera automática y sin necesidad de ejecutar el código. Esto nos permite reparar los errores muy rápido y agilizar nuestro tiempo de desarrollo.

ESLint está basado en reglas configurables y viene con un conjunto preestablecido que podemos usar como punto de inicio y más adelante poder habilitar o deshabilitar ciertas reglas considerando nuestro estilo de código o incluso una convención en nuestro equipo de desarrollo.

ESLint y Gatsby

Gatsby incluye una configuración integrada de ESLint . Para la mayoría de los usuarios, la configuración incorporada de ESLint es todo lo que necesita. Sin embargo, si tienes una configuración personalizada o una convención en tu equipo de trabajo podemos configurarlo.

instalación

Ya que Gatsby viene con ESLint configurado de base podemos añadir nuestra configuración inicializando desde la herramienta en node_modules:

./node_modules/.bin/eslint --init

Este comando va a lanzar un proceso de ayuda para configurar ESLint paso a paso, revisemos los elementos:

  1. ¿Con qué objetivo vamos a usar ESLint?
alt_text

Revisar la sintaxis; revisar la sintaxis y encontrar problemas; o revisar sintaxis, encontrar problemas y forzar un estilo de código.

En nuestro caso basta con revisar la sintaxis y encontrar problemas.

  1. ¿Qué tipo de módulos va a utilizar nuestro proyecto?
alt_text

Utilizaremos Javascript modules.

  1. ¿Qué Framework/Biblioteca va a usar nuestro proyecto?
alt_text

Nuestro proyecto va a utilizar React.

  1. ¿En qué entorno corre nuestro proyecto?
alt_text

Para nuestro proyecto podemos seleccionar ambas.

  1. ¿En qué formato deseas el archivo de configuración?
alt_text
  1. Por último, Hace falta una dependencia para trabajar con el estándar de JavaScript, ¿quieres instalarla ahora?
alt_text

Continúa con Y, esto va a instalar una herramienta que nos va a permitir trabajar con React.

El resultado de este proceso es un archivo llamado .eslintrc.js con el siguiente contenido:

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

Vamos a cambiar la propiedad extends, que nos ayuda a heredar una serie de configuraciones pre establecidas y recomendadas. El proceso de init nos ayudó a instalar un plugin para react, vamos a heredar de él en extends.

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]

Por último, vamos a revisar la opción de rules, esta sección nos permite configurar reglas en particular. Podemos habilitar o deshabilitar reglas para el linter, por ejemplo, que nos notifique con un error o advertencia si no colocamos los punto y coma en el proyecto.

"rules": {
    "semi": "warning",
  },

Gracias a que tenemos configurado el plugin de React y React busca mejores prácticas también hay reglas orientadas al desarrollo de React, podemos modificarlas de igual manera, por ejemplo, remover la linterna para prop-types:

"rules": {
    "semi": "off",
    "react/prop-types": 0,
    "react/display-name": 0,
  },

Esta es la manera de configurar ESLint de manera manual, recuerda que la herramienta nos ayuda a prevenir errores incluso antes de ejecutar el código y ver los errores en consola.

Aportes 10

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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

Hola Devs:
-Aqui les presento como quedo:

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

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 “NO”