Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Clases del Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Instruido por:
José Carlos Correa Mandujano
José Carlos Correa Mandujano
Básico
4 horas de contenido
Ver la ruta de aprendizaje
Platzi Swag
Proyecto del curso
Platzi Swag

Crea Platzi Shop, una aplicación web tipo e-commerce. Utiliza plugins, crea componentes, maneja estilos, consume datos de GraphQL en tiempo de construcción. Deja tu proyecto en producción en Netlify.

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Curso de Desarrollo de Aplicaciones Web con Gatsby JS

Progreso del curso:0/33contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/33contenidos(0%)

Introducción a Gatsby

Material Thumbnail

¿Qué es Gatsby?

04:38 min

Material Thumbnail

¿Por qué Gatsby? Seguridad y Velocidad

10:51 min

Diferencias entre SPA, SSR y Gatsby

02:13 min

Preparando el entorno

Material Thumbnail

Requisitos previos y herramientas de desarrollo

05:45 min

Material Thumbnail

Gatsby y Gatsby CLI y Starters

11:11 min

Configuración de ESLint

02:51 min

Fundamentos de Gatsby

Material Thumbnail

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

06:44 min

Material Thumbnail

Ecosistema de plugins

03:59 min

Material Thumbnail

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

07:51 min

Creando la vista con React

Material Thumbnail

Router en Gatsby y Componente Link

08:14 min

Graphql en Gatsby

Material Thumbnail

¿Cómo funciona GraphQL en Gatsby?

03:41 min

Material Thumbnail

Accediendo a nuestros datos en Gatsby desde GraphQL

08:35 min

Material Thumbnail

Queries, Edges (conexiones) y Nodos en Gatsby

04:49 min

Material Thumbnail

Consultas en GraphQL desde React

10:00 min

Usando plugins en Gatsby

Material Thumbnail

Instalación y configuración de plugins

10:25 min

Material Thumbnail

Imágenes como fuente de datos

02:51 min

Material Thumbnail

Plugins de transformación

12:19 min

Material Thumbnail

Estilizando nuestros componentes con styled-components

07:52 min

Material Thumbnail

Estilos Globales con styled-components

05:59 min

Stripe checkout

Material Thumbnail

Introducción a la API de Stripe Checkout

06:24 min

Material Thumbnail

Agregando productos a nuestra tienda en línea

11:37 min

Material Thumbnail

Productos en React

10:39 min

Generando páginas programáticamente

Material Thumbnail

Creando páginas en función de los datos

08:57 min

Material Thumbnail

Manejo de Gatsby Templates

13:39 min

Material Thumbnail

Terminando la Vista de Detalle de los Productos

05:58 min

Material Thumbnail

StaticQuery vs. useStaticQuery

03:23 min

Material Thumbnail

Construyendo el Carrito de Compras: useContext

08:18 min

Material Thumbnail

Construyendo el Carrito de Compras: Vista

09:22 min

Material Thumbnail

Construyendo el Carrito de Compras: Agregar productos al carrito

08:44 min

Material Thumbnail

Comprando productos

08:34 min

Gatsby a producción

Material Thumbnail

Gatsby build para compilar nuestro proyecto

06:43 min

nuevosmás votadossin responder
DevSouls Geminis
DevSouls Geminis
Estudiante

Hola, pero para rutas anidadas? Ejemplo /camisetas/polo o /camisetas/playeras. Tambien, no hay forma de usar subcarpetas en /pages, para si poder construir componenetes de alto nivel y mantener separada la logica de las vistas y estilos y evitar archivos enormes de 200+ lineas?

1
CalicheOrozco
CalicheOrozco
Estudiante

Tengo problema para instalar la mayoria de Starters creo que es problema con este modulo
Captura.PNG

instale Sharp por aparte, ya esta instalado pero el error persiste, a alguien mas le ha pasado?

Captura2.PNG
1
CalicheOrozco
CalicheOrozco
Estudiante

Tengo el siguiente error en la mayoria de Starterts en WSL

Captura.PNG

alguien ha podido solucionarlo?

1
Emmanuel pallares
Emmanuel pallares
Estudiante

Porque al final en la vista el precio me aparece como Nan aqui esta mi codigo

import React, { useState } from"react"import priceFormat from"../utils/PriceFormat"import {
  Tag,
  SizeButton,
  QtyButton,
  SizeSelect,
  Button,
  StyledProductDetail,
  QtySelect
} from"../styles/Components"import { SEO } from"./"exportdefaultfunctionProductDetails({
  id,

  product: { name, metadata, unit_mount }
}) {
  const price = priceFormat(unit_mount)
  console.log(unit_mount)
  console.log(price)
  const [size, setSize] = useState(2)
  const [quantity, setQuantity] = useState(1)
  return (
    <StyledProductDetail><SEOtitle={name} /><imgsrc={metadata.img}alt={name} /><div><Tag>Popular</Tag><h2>{name}</h2><b>MXN: {price}</b>
        {metadata.wear && (
          <SizeSelectselected={size}><SizeButtononClick={() => setSize(1)}>XS</SizeButton><SizeButtononClick={() => setSize(2)}>S</SizeButton><SizeButtononClick={() => setSize(3)}>M</SizeButton><SizeButtononClick={() => setSize(4)}>L</SizeButton></SizeSelect>
        )}
        <p>Cantidad:</p><QtySelect><buttononClick={() => (quantity > 1 ? setQuantity(quantity - 1) : null)}
          >
            -
          </button><inputtype="text"disabledvalue={quantity} /><buttononClick={() => setQuantity(quantity + 1)}>+</button></QtySelect></div></StyledProductDetail>
  )
}

1
Akio Joshua López Hirata
Akio Joshua López Hirata
Estudiante

¿Cuándo actualizarán el curso?
El profesor enseña muy bien, pero ya no funcionan ciertos comandos y configuraciones. Es frustrante

3
rubencapetillo
rubencapetillo
Estudiante

¿Para cuando se actualizará el curso de Gatsby?
Leva más de dos años y gatsby cambia, pero sus cursos no

1
Samuel Gonzalez Alvarez
Samuel Gonzalez Alvarez
Estudiante

Tengo un error de Webpack al compilar el build:

 ERROR #95313 

Building static HTML failed for path "/cart/"




  51 |             <th>Total</th>
  52 |           </tr>
> 53 |           {cart.map(swag => (
     |                 ^
  54 |             <trkey={swag.id}>
  55 |               <td>
  56 |                 <imgsrc={swag.metadata.img}alt={swag.name} /> {swag.name}


  WebpackError: TypeError: cart.map is not a function

  - Cart.js:53 
    src/components/Cart.js:53:17

not finished Generating image thumbnails - 19.948s

  51 |             <th>Total</th>
  52 |           </tr>
> 53 |           {cart.map(swag => (
     |                 ^
  54 |             <trkey={swag.id}>
  55 |               <td>
  56 |                 <imgsrc={swag.metadata.img}alt={swag.name} /> {swag.name}


1
Pedro Alejandro Silva Perez
Pedro Alejandro Silva Perez
Estudiante

¿Por qué se escribe data[name]? No me quedó clara esa parte, alguien me auxilia 😦

0
David Santiago González Ramos
David Santiago González Ramos
Estudiante

Tengo una duda, por qué en este query, no se inicia con la palabra reservada query como si se hizo en la clase anterior??

1
Andrés Felipe Largo Rodríguez
Andrés Felipe Largo Rodríguez
Estudiante

Ya estamos en 3.0… ¿cuándo se actualizará?

4