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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Al estilizar componentes con Styled Components estamos definiendo estilos únicamente de los componentes creados con styled, no al resto de nuestra aplicación (a pesar de que trabajemos con otras etiquetas HTML iguales a las que definimos en los componentes estilizados con styled):
const StyledButton = styled.button`
color: red;
`;
const App = () => (
<>
<StyledButton>
El color de este boton es RED
StyledButton>
<button>Este botón no tiene estilosbutton>
<button className="boton-color-violeta">
Este botón tampoco tiene estilos
button>
);
Sin embargo, Styled Components también nos permite crear estilos globales: Estilos que podemos aplicar a todas las clases o etiquetas HTML de la aplicación.
createGlobalStyle de styled-components:import { createGlobalStyle } from 'styled-components';
createGlobalStyle:export const GlobalStyles = createGlobalStyle`
button {
color: green:
}
button.boton-color-violeta {
color: purple;
}
`;
const App = () => (
<>
El color de este boton es RED
);
// gatsby-browser.js
const GlobalStyles = require('src/styles');
exports.wrapRootElement = ({ element }) => (
<>
{element}
);
Aportes 5
Preguntas 2
En el gatsby-browser se puede usar es6
import React from 'react';
import Layout from "./src/components/layout";
import { GlobalStyles } from './src/styles';
export const wrapRootElement = ({ element }) => (
<>
<GlobalStyles />
<Layout>{element}</Layout>
</>
);```
El Fragment lo usas pero no lo estas importando, para avanzar yo coloqué un div pero se que tal vez no sea una buena practica pero funciona.
Este fragmente como se importaria…
const Fragment = require('react')
?
Modificamos gatsby-browser.js:
const React = require('react')
const Layout = require('./src/components/layout').default
const {GlobalStyles} = require('./src/styles')
exports.wrapRootElement = ({element}) => (
<>
<GlobalStyles/>
<Layout> {element} </Layout>
</>
)
Y ahora tenemos estilos globales. La ventada de styled components es que tenemos clases únicas en las etiquetas HTML y así no se pisan los estilos.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.