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 鈥榗olor鈥 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)