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

Layout en Gatsby

11/33
Recursos

Los Layouts son componentes que nos ayudan a presentar un mismo estilo visual en todas las p谩ginas de nuestra aplicaci贸n. Envulelven el contenido de nuestra p谩gina para mostrar, adem谩s del contenido, otros componentes como el Men煤, Footer, entre otros.

Por defecto, debemos importar nuestro componente Layout desde todos los archivos de nuestras p谩ginas, de otra forma solo veremos el contenido de la p谩gina sin los componentes que configuramos en el Layout.

Afortunadamente, Gatsby nos permite configurar componentes que envuelvan todas nuestras p谩ginas al momento de hacer render en el navegador. Para esto debemos configurar la opci贸n exports.wrapRootElement del archivo gatsby-browser.js:

// gatsby-browser.js
exports.wrapRootElement = ({ element }) => (
  <Layout>
    {element}
  </Layout>
);


隆No olvides reiniciar tu servidor cuando actualices la configuraci贸n!

Aportes 25

Preguntas 5

Ordenar por:

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

o inicia sesi贸n.

Ac谩 la documentaci贸n de wrapRootElement

Amigo sere honesto

NO entiendo mucho tu explicacion de Gatsby鈥 tu forma de ense帽ar es muy riguida 鈥 y nada fluida鈥 鈥 pero bueno continuare con tu explicacion

Saludos.

Si se les presenta un error con el Layout pueden probar con el codigo en ES6

import React from "react";
import Layout from "./src/components/Layout";

export const wrapRootElement = ({ element }) => <Layout>{element}</Layout>;

Para importar las imagenes, prueben:

import logo from '../images/Logo.png'
import bolsa from '../images/cart.png'

Y ya solo las llaman asi:

<img src={logo} alt='logotipo' />
<img src={carro} alt='cart icon' />

Los estilos no me quedaron iguales pero algo que los mejor贸 a como estaban es usar el siguiente c贸digo en layour.js, lo vi en un comentario a un aporte y me pareci贸 importatne:

import "./layout.css"

Si llegas hasta aqui, ve al video 10 luego 11 y regresa a este, el 9

igual se ve val pero igual para que futuros usos de img no se les llene el archivo importando n cantidad de imagenes creen este compoenente

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import Img from 'gatsby-image'

// Note: You can change "images" to whatever you'd like.

const Image = props => (
  <StaticQuery
    query={graphql`
      query {
        images: allFile {
          edges {
            node {
              relativePath
              name
              childImageSharp {
                fluid(maxWidth: 600) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    `}
    render={data => {
      const image = data.images.edges.find(n => {
        return n.node.relativePath.includes(props.filename)
      });
      if (!image) {
        return null
      }

      //const imageSizes = image.node.childImageSharp.sizes; sizes={imageSizes}
      return <Img alt={props.alt} fluid={image.node.childImageSharp.fluid} />
    }}
  />
)

export default Image


y despu茅s solo por prop mandan a llamar el nombre de la imagen

<Image filename='nombredelaimagen.png'/>

Como sugerencia, los atributos alt deben tener una estructura diferente para poder ser interpretados de una mejor manera.

Ejemplo: Para el carrito de compra, deber铆a ser algo as铆: 铆cono del carrito de compras.

Debe ser una descripci贸n corta, pero que permita ser entendido su uso.

Este atributo, permite que cuando pasamos por encima de una imagen el cursor, nos muestre el t铆tulo de la misma.

Tambi茅n, cuando una imagen no carga, aparece su descripci贸n en su lugar.

Y por 煤ltimo, pero no menos importante, para temas de accesibilidad tiene una funci贸n vital.

que frustrante es, estudiar con cosas que no funcionan, termina siendo mas rapido estudiar todo por aparte y hacer los estilos por aparte, que intentar utilizar los recursos de estos cursos

Mmm鈥 en la documentaci贸n de Gatsby recomiendan wrapRootElement para Provider Components (como Context o el provider de Redux) y wrapPageElement para componentes de UI est谩ticos (como un layout). Ac谩 el ejemplo:

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element, props }) => {
  // props provide same data to Layout as Page element will get
  // including location, data, etc - you don't need to pass it
  return <Layout {...props}>{element}</Layout>
}

A Alguien mas se le esta renderizando doble el Layout ? , solo me sucede en la home por que la page gracias funciona bien.

dejo mi repo por si alguien puede hecharle un ojito, gracias.

Repositorio de Platzi Shop

tengo un problema, al hacer la configuracion del gatsby-browser envia el layout a todas las paginas pero las envia sin estilos. 馃槙

Links de las imagenes

const logoLink = "https://i.postimg.cc/6q3pg48v/Logo.png"
const carritoLink = "https://i.postimg.cc/L6wpMxLt/cart.png"

Segun la documentacion para este caso es mas recomendable usar wrapPageElement , ya que wrapRootElemet es para providers y no para UI.

`const React = require(鈥渞eact鈥)
const Layout = require("./src/components/layout").default

exports.wrapRootElement = ({ element }) => <Layout>{element}</Layout>`

importante colocar el default al final del require de Layput

Crei que la api de gatsby tendria _document o _app como nextjs

Parece ser que con la nueva version pasamos de wrapRootElement a wrapPageElement

Existe otra forma de importar images en Gatsby como en Next.js con /static/

no seria mas facil ponerle el Layout a gracias.js鈥 ??

Es posible usar ahora el import y export de javascript es6 dentro del gatsby-browser.js

import React from 'react';
import Layout from "./src/components/layout";

export const wrapRootElement = ({ element }) => (
    <Layout>{element}</Layout>
);

No estoy muy seguro del por que mi body aparece con margen 馃

Corr铆janme si estoy mal, pero no pod铆a ver los estilos de /components/layout.css, tuve que importarlos al /pages/index.js y ya veo todo con normalidad 驴hice bien?

Me sale el siguiente error. alguien sabe que show? 馃槖

Actualmente en la documentaci贸n para colocar cosas como Layout y elementos de UI recomiendan wrapPageElement y el wrapRootElement para providers y cosas del estilo