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

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estilizando nuestros componentes con styled-components

19/33
Recursos

Styled Components es una herramienta que nos ayuda a usar lo mejor de CSS en JavaScript y React.

Para usar esta herramienta solo debes seguir los siguientes pasos:

  1. Instalar styled-components:
npm install --save styled-components
  1. Importar styled desde styled-components:
import styled from 'styled-components';
  1. Crear un componente estilizado siguiendo la sintaxis de styled components (styled.etiquetaDeHTML):
const Button = styled.button`
  /* Estilos CSS para nuestro bot贸n */
`;
  1. Podemos configurar las propiedades de CSS usando las props de todos nuestros componentes en React:
const Button = styled.button`
  /* Estilos CSS para nuestro bot贸n */

  color: ${props => props.color || 'black'};
`;
  1. Tambi茅n podemos escribir los estilos usando variables o funciones de JavaScript:
const colors = {
  green: '#98ca3f',
  orange: '#f8b7c1',
};

function GetColor(color) {
  return colors[color];
}

const Button = styled.button`
  /* Estilos CSS para nuestro bot贸n */

  color: ${colors.green};
  background-color: ${GetColor('green')};
`;
  1. Tambi茅n podemos configurar estilos con selectores anidados:
const Button = styled.button`
  /* Estilos CSS para nuestro bot贸n */

  color: ${props => props.color || 'black'};

  &:hover {
      /* Estilos CSS para nuestro bot贸n cuando hacemos hover */
  }
`;
  1. Finalmente, podemos usar nuestros componentes estilizados como cualquier otro componente en React:
const IndexPage = props => (
  {/* ... */}

  <Button color="gray">隆Comprar!</Button>

  {/* ... */}
);

Aportes 9

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Styled comoponents se parece demasido, por su forma de escribirse, a Sass

1- Mas sobre style components: https://styled-components.com/showcase?item=target


2- Style components en gatsby https://www.gatsbyjs.com/docs/styled-components/#reach-skip-nav


3- Una buena extesion para usar style-components en vcode
- Name: vscode-styled-components
- Id: jpoissonnier.vscode-styled-components
- Description: Syntax highlighting for styled-components
- https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

** * ** 鈥> Asterisco
** # ** 鈥> Almohadilla, gato, numeral, n煤mero, etc鈥

En d贸nde se ense帽a a colocar esos media queries en el min 6:48 de esa forma, en la documentaci贸n de Styled-Components?

Hola, una duda en cuanto al editor鈥 que fuente usas? y el color de tema?

Estilizando nuestros componentes con styled-components

Los styled components son como una copia de elementos HTML, podemos escribir CSS dentro de JS.

Podemos acceder a los props del componente desde JS:

const Button = styled.button`
  width: 8rem;
  color: #fff;
  background-color: #98ca3f;
  border: none;
  border-radius: 10px;
  color: ${props => props.color};
  &:hover {
    transform: scale(1.4);
    cursor: pointer;
  }
`

const IndexPage = ({data}) => (
  <>
    <SEO title="Home" />
    <Jumbo description={data.allSite.edges[0].node.siteMetadata.description}/>
    <Button color='gray'> Comprar </Button> /*seleccionamos el nombre del color*/
    <Link to="/gracias">Go to gracias</Link>
  </>
)

hola! Que plugin usas para que te autocomplete dentro de

Cuales son los plugins que usas para template literals y para ver los colores y el style asi con un preview?

hola! Que plugin usas para que te autocomplete dentro de
comillas invertidas