Layout en Gatsby

Clase 11 de 33 • Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Resumen

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!

Juan Luis Rojas León

student•

++https://i.postimg.cc/6q3pg48v/Logo.png++ ++https://i.postimg.cc/L6wpMxLt/cart.png++ ❤️

David Behar

student•

Acá la documentación de wrapRootElement

Juan Pablo Celiz

student•

muy buena data, teniendo en cuenta que ahí también se explica como debemos configurar el provider si deseamos usar redux!

Ahorra Seguros

student•

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.

Andres Lopez

student•

Siento que se esta pegando saltos de informacion super util que comenta antes de aplicar o despues en otros videos. Le falta direccion, pero tambien continuare con la explicacion a ver si le puedo agarrar el ritmo...

andrés eduardo betancourt bescanza

student•

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>;

Juan Antonio Avalos Orozco

student•

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' />

Kevin Parra

student•

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"

Enzo Aliatis

student•

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

Juan Antonio Avalos Orozco

student•

#Heroe

Leo Islas

student•

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'/>

Irungaray Agustin

student•

Interesante

Angel David Castiblanco Sepulveda

student•

Y si necesito que determinada pagina no se le cargue el layout?

Jose Carlos Correa

teacher•

Puedes poner el Layout como un componente que use Children para pintar el contenido e importarlo solo en los lugares donde quieres que se use, es una alternativa manual pero que se ajusta al caso de uso.

Johan Stivens Suarez Galindo

student•

No se supone que Gatsby tiene hot reloading, por qué es necesario reiniciar el server cada que se hace una nueva configuración?

Enrique Devars

teacher•

En este caso es porque la configuración se le hace al Layout que es hecho por el SSR, es por eso que se necesita reiniciar el server para que se vea reflejado. Si no, no aparecería en nuestro build.

Diego Ivan Padilla Bernal

student•

¿Diferencia entre wrapRootElement y wrapPageElement? Según los ejemplos de la documentación se usa wrapRootElement para algún ++Provider++ y wrapPageElement para un ++Layout++

Juan Castro

teacher•

¡Hola! Aquí encuentras las diferencias:

:point_right: wrapRootElement vs. wrapPageElement :point_right: Controlling the Gatsby Application Root :point_right: https://github.com/gatsbyjs/gatsby/issues/10688

Emmanuel Ovares

student•

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.

Juan ibañez

student•

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

Kevin Parra

student•

Me pasa parecido

Cristian Blandón

student•

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>
}

Mario Alejandro Crespo Reyes

student•

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

Carlos Gerardo Pérez Horta

student•

También tengo el mismo problema ¿Alguien sabe a que se debe esto?

Abdías N. Estrada Roca

student•

Si les aparece doble es porque en index.js no han removido el import Layout

Yank Carlos Reyes Espinal

student•

Cuåles serían las concecuencias de usar Gatsby?

Rob Arroyo

student•

¿A qué te refieres exactamente? Se usa para tener un mejor rendimiento en sitios web y para mejorar también el posicionamiento SEO. Como consecuencia, puedes tener un sitio más rápido, más seguro y mejor posicionado en internet.

andrés eduardo betancourt bescanza

student•

Porque cuando recargo la pagina mi layout desaparece?

Massimo Di Berardino

student•

Hola @chiguirecode, podrías darnos un poco más de contexto de lo que te pasa, una captura de pantalla o fragmento de código, para poder ayudarte mejor

jose ortiz

student•

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

Jose Carlos Correa

teacher•

¿Estás seguro de que utilizas los componentes de styled-components ? Nos compartes tu repo para revisar ? ☺️

Jakson Duvan Zambrano

student•

Tengo el mismo problema, ayúdenme

Wilmion Navarrete

student•

Links de las imagenes

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

Alejandro Ibarra Rodriguez

student•

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

Layout en Gatsby

Introducción a Gatsby

¿Por qué Gatsby? Seguridad y Velocidad

¿Qué es Gatsby?

Diferencias entre SPA, SSR y Gatsby

Preparando el entorno

Requisitos previos y herramientas de desarrollo

Gatsby y Gatsby CLI y Starters

Configuración de ESLint

Fundamentos de Gatsby

Presentación y Estructura de Archivos de nuestro proyecto: Platziswag

Ecosistema de plugins

Usando React para manejar la parte visual e interactiva de nuestra aplicación

Creando la vista con React

Router en Gatsby y Componente Link

Layout en Gatsby

Graphql en Gatsby

¿Cómo funciona GraphQL en Gatsby?

Accediendo a nuestros datos en Gatsby desde GraphQL

Queries, Edges (conexiones) y Nodos en Gatsby

Consultas en GraphQL desde React

Usando plugins en Gatsby

Instalación y configuración de plugins

Imágenes como fuente de datos

Plugins de transformación

Estilizando nuestros componentes con styled-components

Estilos Globales con styled-components

Stripe checkout

Introducción a la API de Stripe Checkout

Agregando productos a nuestra tienda en línea

Productos en React

Generando páginas programáticamente

Creando páginas en función de los datos

Manejo de Gatsby Templates

Terminando la Vista de Detalle de los Productos

StaticQuery vs. useStaticQuery

Construyendo el Carrito de Compras: useContext

Construyendo el Carrito de Compras: Vista

Construyendo el Carrito de Compras: Agregar productos al carrito

Comprando productos

Gatsby a producción

Gatsby build para compilar nuestro proyecto

Deploy a Netlify