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

Estilos Globales con styled-components

20/33
Recursos

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.

  1. Importa createGlobalStyle de styled-components:
import { createGlobalStyle } from 'styled-components';
  1. Crea un nuevo componente con los estilos globales de tu aplicaci贸n usando createGlobalStyle:
export const GlobalStyles = createGlobalStyle`
  button {
    color: green:
  }

  button.boton-color-violeta {
    color: purple;
  }
`;
  1. Envuelve toda tu aplicaci贸n en el componente de estilos globales:
const App = () => (
  <>
    

      
        El color de este boton es RED
      

      

      
  
);
  1. Puedes usar el componente con estilos globales como parte de tu layout:
// gatsby-browser.js
const GlobalStyles = require('src/styles');

exports.wrapRootElement = ({ element }) => (
  <>
    
    
      {element}
    
  
);

Aportes 5

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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')

?

Estilos Globales con styled-components

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.

xD