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

You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
2 Hrs
58 Min
47 Seg

Estilizando nuestros componentes con styled-components

19/33
Resources

Styled Components is a tool that helps us to use the best of CSS in JavaScript and React.

To use this tool you just need to follow these steps:

  1. Install styled-components:
npm install --save styled-components
  1. Import styled from styled-components:
import styled from 'styled-components';
  1. Create a styled component following the syntax of styled components(styled.labelDeHTML):
const Button = styled.button`/* CSS styles for our button */ `;
  1. We can set the CSS properties using the props of all our components in React:
const Button = styled.button`/* CSS styles for our button */ color: ${props => props.color || 'black'}; `;
  1. We can also write the styles using JavaScript variables or functions:
const colors = { green: '#98ca3f', orange: '#f8b7c1', };function GetColor(color) { return colors[color]; }const Button = styled.button`/* CSS styles for our button */ color: ${colors.green}; background-color: ${GetColor('green')}; `;
  1. We can also set up styles with nested selectors:
const Button = styled.button`/* CSS styles for our button */ color: ${props => props.color || 'black'}; &:hover { /* CSS styles for our button when we hover */ } `;
  1. Finally, we can use our styled components just like any other component in React:
const IndexPage = props => ( {/*...*/}<Button color="gray">Buy!</Button>{/*...*/});

Contributions 9

Questions 1

Sort by:

Want to see more contributions, questions and answers from the community?

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

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

** * ** —> 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?

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