Logo de Código Facilito
  • Inicio
  • Replays
  • Iniciar sesión
  • Crear cuenta
  • Explorar cursos
  • Bootcamps
  • Precios
  • Blog

¡Califica el Curso de introducción a Gatsby!

Selecciona la calificación de 1 a 5 estrellas

Reporta un error

Curso Curso de introducción a Gatsby

Video API Files Gatsby

Tipo de error

Algo salió mal al cargar el vídeo

El vídeo no pudo cargarse, hemos enviado un reporte al equipo de desarrollo, para poder solucionarlo a la brevedad.

Mientras solucionamos el problema, intenta lo siguiente para solucionar el error:

  • Recarga la página
  • Intenta reiniciar tu navegador y luego vuelve a reproducir el vídeo
  • Vacía el caché de tu navegador
  • Intenta reproducir con las extensiones del navegador deshabilitadas
  • Intenta con un navegador distinto
  • Si el problema persiste contáctanos en Discord
home Ir al inicio report_problem Reportar falla star Valorar curso

atsby expone archivos de configuración que te permiten tomar el control del ciclo completo que sigue tu código hasta su ejecución en el navegador.

Estos archivos son 4, cada uno de ellos tiene una API específica a través de la cuál puedes exponer métodos que se ejecutarán en puntos clave de la ejecución del código.

Estos archivos son opcionales y pertenecen en el root de tu proyecto de Gatsby, no es necesario que los integres de ninguna forma con el framework, basta con seguir la convención de nombres, y Gatsby sabrá cuándo y dónde debe ejecutarlos.

gatsby-config.js es el archivo a través del cuál puedes configurar tu aplicación web con Gatsby, agregar nuevos plugins, metadatos del sitio web, entre otros. En general, la configuración de tu sitio recide aquí.

gatsby-node.js es el archivo que Gatsby usa para exponer puntos clave del proceso de construcción de tu sitio web. Cada que se hace un cambio sobre tu aplicación web, el proceso del build de Gatsby se ejecuta, en este punto Gatsby crea todas las páginas web estáticas de tu sitio y las rutas para acceder a ellas. Tal como Gatsby lo hace, es a través de este archivo que puedes crear páginas dinámicamente, agregar nodos de datos para el motor de graphql, etc.

gatsby-browser.js te permite agregar funcionalidad sobre la ejecución de tu app de Gatsby en el navegador. Desde aquí podrías por ejemplo colocar código que se ejecutará cuando un usuario cambie de ruta en tu app, cuando la página cargue, etc.

gatsby-ssr.js es el archivo API para controlar la forma en cómo Gatsby construye tu sitio web. SSR son las siglas de server side rendering, la práctica que Gatsby usa para construir tus componentes de React en páginas estáticas, que luego pueden ser retomadas por React en el cliente para el dinamismo. A través de este archivo puedes alterar ese proceso de render desde el servidor.

A lo largo del curso estaremos trabajando con estos archivos y los distintos puntos de control o configuración que exponen para personalizar el funcionamiento de Gatsby para tu proyecto.

  • Módulo 1 | 3 clases

    Introducción

    expand_more
    • play_circle_outline

      Clase 1

      Presentación del curso de Gatsby

    • play_circle_outline

      Clase 2

      Qué es Gatsby

    • play_circle_outline

      Clase 3

      Qué es el JAMStack

  • Módulo 2 | 9 clases

    Fundamentos

    expand_more
    • play_circle_outline

      Clase 1

      Iniciando un proyecto de Gatsby

    • play_circle_outline

      Clase 2

      Gatsby starters

    • play_circle_outline

      Clase 3

      Creando mis primeras páginas

    • play_circle_outline

      Clase 4

      Componentes de React

    • play_circle_outline

      Clase 5

      Links

    • play_circle_outline

      Clase 6

      Qué son los plugins de Gatsby

    • play_arrow

      Clase 7

      API Files Gatsby

    • play_circle_outline

      Clase 8

      Servidor de graphql

    • play_circle_outline

      Clase 9

      Para qué usar graphql

  • Módulo 3 | 6 clases

    Trabajando con assets

    expand_more
    • play_circle_outline

      Clase 1

      La carpeta de assets estáticos

    • play_circle_outline

      Clase 2

      Importar imágenes con webpack

    • play_circle_outline

      Clase 3

      Gatsby Image

    • play_circle_outline

      Clase 4

      Gatsby Image - Dimensiones fluidas

    • play_circle_outline

      Clase 5

      Configuraciones adicionales de Gatsby Image

    • play_circle_outline

      Clase 6

      Importar hojas de estilo globales

  • Módulo 4 | 5 clases

    graphql y fuentes de datos

    expand_more
    • play_circle_outline

      Clase 1

      Crear páginas dinámicamente

    • play_circle_outline

      Clase 2

      Enviando datos a las páginas

    • play_circle_outline

      Clase 3

      Datos de los archivo de sistema

    • play_circle_outline

      Clase 4

      Fuentes de datos en Gatsby

    • play_circle_outline

      Clase 5

      Consultas graphql con argumentos

  • Módulo 5 | 4 clases

    Estilos

    expand_more
    • play_circle_outline

      Clase 1

      Archivos CSS globales

    • play_circle_outline

      Clase 2

      CSS modular

    • play_circle_outline

      Clase 3

      Styled components

    • play_circle_outline

      Clase 4

      Emotion

  • Módulo 6 | 5 clases

    Final y Extra

    expand_more
    • play_circle_outline

      Clase 1

      Componentes persistentes

    • play_circle_outline

      Clase 2

      Rutas del lado del cliente

    • play_circle_outline

      Clase 3

      PWA - Web manifest

    • play_circle_outline

      Clase 4

      PWA - Service Workers

    • play_circle_outline

      Clase 5

      Notas del deploy

API Files Gatsby

arrow_back Siguiente arrow_forward
Curso de introducción a Gatsby