Para visualizar los emojis en windows ( presionar la tecla de windows mas la tecla de punto)
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
José Carlos Correa Mandujano
Gatsby nos facilita mucho la creación de páginas de nuestra aplicación. Solo debemos crear un archivo en la carpeta src/pages
con el nombre de la página y automáticamente tendremos esa ruta disponible con el contenido del archivo.
Por ejemplo: Podremos ver contenido del archivo src/pages/index.js
en la ruta /
y el contenido del archivo src/pages/about.js
en la ruta /about
.
Además, Gatsby nos provee un componente <Link />
para navegar entre nuestras páginas. Funciona muy parecido a una etiqueta <a>
, pero al dar click no recargaremos la página ni haremos peticiones al servidor, en cambio, podremos visualizar inmediatamente el contenido de la página a la cual queremos navegar. Todo esto gracias a que Gatsby tiene todas las funcionalidades de una Single Page Application.
Recuerda que estas funcionalidades del componente <Link />
solo funcionan en las páginas de nuestras aplicaciones con Gatsby. No podemos usarlo para navegar a otras aplicaciones.
Para usar este componente solo debes importarlo desde:
import { Link } from 'gatsby';
Aportes 22
Preguntas 7
Para visualizar los emojis en windows ( presionar la tecla de windows mas la tecla de punto)
Lo hice con la misma estructura que el de Gracias.
.
En la parte de los estilos agregué un margin de top y bottom de 15px al spam para que el botón no quedará encima del emoji.
.
Por cierto, estoy en Windows y si quieren usar emojis, les recomiendo la extensión de :emojisense:
.
También, algo que noté al iniciar el proyecto es que el body mantenía el margen que viene por defecto. Para solucionarlo sólo importe el archivo ‘layout.css’ al componente de layout.
import './layout.css'
Lo pongo por si a alguien le pasó también, así lo solucioné.
¿Como puedo visualizar ese recuadro pequeño de los emojis? ¿Como se llama la extension?
El Link de gatsby es el mismo de react router?
Alguien haciendo este curso en pleno 2021? xd
No se debe configurar React Router?
Alguien me puede decir por qué se ve mi app con bordes por todos lados??? Se necesita un reset.CSS o qué?? Copié directamente todo el proyecto tal cual se especificó al principio de curso…
![](
El componente gracias no debe estar en mayuscula?
Aqui va mi resultado hasta el momento.
Por si les sale error con rol=“img”
<span role=“img” aria-label=“emoji”>
💚
</span>
El video 9 debería ir en el 11 y asi bajar
Hola, estoy teniendo este problema cuando ejecuto gatsby develop:
Cannot find module ‘gatsby/dist/utils/create-content-digest’
Alguna idea?
Gracias
como podría redireccionar el sitio a https? Por default es http.
Gracias.
windows + . para los emojis
stoy teniendo este problema cuando ejecuto gatsby develop:
Cannot find module ‘
Hola Devs:
-Espero y esten aprendiendo un monton al igual que yo:
-Mi repositorio [en el commit de esta clase]: Click Aqui
Recuerden, #NuncaParesDeAprender 💚
👌
import React from 'react'
import { Link } from 'gatsby'
import { SEO } from '../components'
import { Button, Purchase } from '../styles/components'
export default function thanks() {
return (
<div>
<SEO title="Not so great purchase!" />
<Purchase>
<h2>Purchase Cancelled.</h2>
<p>We're sorry you had to do that.</p>
<p>Anyway, hope to see you again!</p>
<span rol='img' aria-label='emoji'>🙌</span>
<Link to='/'>
<Button>
Volver al catálogo
</Button>
</Link>
</Purchase>
</div>
)
}
React es JS con esteroides, y Gatsby es React con ketamina. Me encanta
Es posible cambiar el nombre de la ruta mostrada en el URL para que sea distinta al archivo creado dentro de /pages? Por ejemplo, que el archivo se llame thanks.js pero la ruta sea /gracias
¿En windows como se visualiza el cuadro de los emojis?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?