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

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Terminando la Vista de Detalle de los Productos

26/33
Recursos

Aportes 12

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

copiar y pegar jejeje… ★ ★ ★

Stars:


Soy al único que no le gusta nada StyledComponents? De verdad que prefiero mis archivos de SASS bien estructurados y bonitos ahí en lugar de esto. xd

Para los que tienen problemas con las estrellas en Windows es por un tema de encoding, les recomiendo que copien y peguen el src directamente:
https://raw.githubusercontent.com/Jossdz/Gatsby-platzi/vista_detalle/src/components/Stars.js

y funciona.

Slds.-

No funciona import { SelectStars } from ‘…/styles/components’ en windows. Las estrellas no se modifican…
La verdad, deberían comentar al principio del curso si se va a usar Windows o Linux o Mac… hay un mundo en este tema por lo que se ve y a cada vídeo es desesperante y frustrante ver que todo sale mal. Aparte de la pérdida de tiempo que esto provoca.
En serio, ¿cuánto más caro es hacer un curso donde el profe (o un experto en la materia) aplique los cambios pertinentes en uno u otro SO?
De verdad, empecé este curso con ganas porque era uno de mis objetivos poder usar gatsby de esta manera y está acabando con mi paciencia.

A alguien más se le monta el footer sobre el contenido cuando está en modo responsive?

Para el reto del color solo modifique en la pagina de stripe un a metadata con un campo de color y se lo agregue en el codigo solo puse

{metadata?.color && (<h3>Color: {metadata?.color}</h3>)}


asi quedo!!!

Reto conseguido. Modifiqué los metadatos de los productos en Stripe y agregué el campo ‘color’ en la query.

metadata {
  img
  description
  wear
  color
}

En product detail hacemos: {metadata.wear && <h3>Color: {metadata.color}</h3>}

Y el resultado muestra un color diferente para cada prenda:

No entendí muy bien el reto ¿Alguien me podría explicar?

Nose la razon (tendre que investigar) pero el estilo de mi pagina de detalle de producto no luce nada parecida a la profe 😦

Una duda sobre react hooks, donde configuras el estado de stars y la función setStars?

Reto completado:
Primero cree el styledComponent:

export const ColorButton = styled.button`
  padding: calc(0.4rem + 1px);
  background-color: ${props => props.color};
  border: 2px solid rgba(0, 0, 0, 0.1);
  color: #272727;
  opacity: ${({ unavailable }) => (unavailable ? 0.4 : 1)};
  transition: 0.4s all ease;
  &:focus {
    outline: none;
  }
  &:hover {
    transform: scale(1.2);
  }

Lo use en productDetail practicamente igual que los tamaños, el color se lo pasas con props

        {metadata.wear && (
          <SizeSelect selected={color}>
            <ColorButton color="gray" onClick={() => setColor(1)}>
              {" "}
            </ColorButton>
            <ColorButton color="blue" onClick={() => setColor(2)}>
              {" "}
            </ColorButton>
            <ColorButton color="red" onClick={() => setColor(3)}>
              {" "}
            </ColorButton>
            <ColorButton color="pink" onClick={() => setColor(4)}>
              {" "}
            </ColorButton>
          </SizeSelect>
        )}```

Estado



const [color, setColor] = useState(2)