🖖 Inicio

SERVICIOS

Salir

nochedía

Bloques de Gatsby

800 palabras
3 minutos
May 8, 2020

Los bloques de Gatsby

Una vez tenemos nuestro entorno de trabajo preparado y con el starter también preparado, abrimos la carpeta del proyecto con vscode y nos vamos al archivo index.js

Pero antes que nada, tienes instrucciones para configurar tu vscode con eslint y prettier en el post cómo configurar eslint y prettier

Te pego mi configuración aquí, si la quieres utilizar tienes que crear una carpeta de nombre .vscode (ojo con el punto inicial) y de allí crear un archivo de nombre settings.json al que le pegas el contenido de abajo

Y recuerda que tienes que instalar los paquetes (lo tienes en el post que te he enlazado)

Te lo recuerdo, simplemente en el terminal ejecuta lo siguiente con yarn (o npm si quieres) donde el -D indica que tiene que instalarlo como dependencias de desarrollo, no de producción

Qué es un bloque

Ahora sí, estamos en index.js con esto de partida

El import React es absolutamente necesario, en todos los archivos? No, sólo en aquellos donde utilicemos React, porque no siempre lo utilizamos

Y después ya sí, ya estamos definiendo un componente que nos devuelve código html, esto es: estamos escribiendo en JSX, y esto sólo lo podemos hacer con React

JSX es una manera de escribir JavaScript y HTML todo junto, tremendamente potente, una suerte de HTML-in-JS

Vale, este código de arriba es el mismo que éste otro

Y este último código es más claro, estamos definiendo una constante de nombre Main que es una función que nos devuelve <div>Hello world!</div>, y esa función luego la exportamos y lo hacemos como función por defecto de nuestra página index.js

Ahora podemos (antes también podíamos) ir al terminal de vscode y ejecutar

Y cuando haya terminado nos vamos al navegador a localhost:8000 para ver nuestra página en blanco con un bonito Hello world!

Dónde están los bloques??

Lo acabamos de ver, Main es un bloque, o un componente, y por convenio tienen que empezar con mayúscula

Un componente es una función, que aquí es super conciso gracias al JavaScript ES6 que nos permite escribir de esta manera tan fantástica, esto lo tienes en el curso de JavaScript básico

Instalar Styled Components

Para desarrollar una aplicación necesitamos css

Podemos utilizarlo de muchas maneras, y aquí escojemos styled-components, del que ya he hablado en cursos anteriores

Y luego nos vamos al archivo gatsby-config.js que ahora está vacío y copiamos esto

Y ahora sí, si nos vamos a gatsby develop veremos ... exactamente lo mismo :)

Volvemos a index.js y allí añadimos un nuevo componente

grabamos, y vemos que nos da un error (lo vemos en el terminal) donde nos dice

Porque <Title> no es un tag válido de html y por lo tanto no funciona

<Title> es un componente, uno nuevo que no hemos definido, podríamos hacerlo así

Y ya nos compila, pero ahora vemos que el Hello world! ha desaparecido! Y esto? Esto es así porque el componente Title es en realidad todo el tag, es decir desde que se abre hasta que se cierra, y todo ese tag se sustituye por lo que devuelve el componente

Si queremos utilizar lo que va dentro del tag, tenemos que escribirlo

Si miras la consola verás que recibes el texto en la propiedad props.children

Esto ya lo comenté en el curso de JavaScript, pero te lo recuerdo por si acaso: estos códigos son lo mismo, lo que pasa es que utilizamos la notación fat arrow

Vuelvo a la propiedad props

Y ahora sí, ahora recuperamos el texto completo GLIBERTO! Hello world!

Nota: desestructurando

Podemos descomponer los argumentos que recibimos, por ejemplo miremos esta función que recibe un objeto como argumento, a ese argumento lo recibimos llamándole props

Pero en lugar de recibir el objeto, podemos desestructurar ese objeto y directamente recibir sus propiedades:

Esto es desestructurar, es opcional, pero nos permite escribir de un modo más conciso y declarativo

Añado, ya puestos podríamos expresar lo mismo con backticks, es decir

Y entonces qué pasaría?

Primero aclaro que dentro de los backticks, en lugar de transformar las variables con simples paréntesis arrugados necesitamos ponerle el signo $ delante

Por lo tanto con esta expresión tendremos el valor de las variables

PERO, los <div> de allí saldrán de forma literal, no se ejecutarán (veremos un string con la palabra <div> escrita de forma literal)

La explicación de por qué vemos el <div> interpretado como toca cuando no utilizamos backticks es porque estamos escribiendo en JSX, que es lo bueno de utilizar React

Seguimos con styled components

Teníamos lo siguiente

*Ojo, estoy desestructurando children pero entonces no puedo omitir los paréntesis aunque sólo tenga un argumento

Pues ahora vamos a redefinir el componente Title utilizando styled-components

Y ya lo tenemos! Ves el cambio? No, claro, no hay cambio, pero le hemos dicho que cambie el tag <Title> por el tag <div>, y ya está

Lo bonito es que ahora podemos estilar ese tag allí mismo:

Y de repente ya tenemos nuestro <Title> que se convierte en un <div> estilado

f-a-n-t-á-s-t-i-c-o

Hasta aquí el segundo capítulo del curso, donde hemos hablado de los bloques, repasado algo de JavaScript e integrado Styled Components

Nos vemos en el tercer capítulo, en Estructurando Bloques

Qué tal este capítulo?
👌 Bien 🙌🙌
👍 Bien, pero algunas cosas podrían explicarse mejor 😬
🤷‍♂️ Da por sentadas demasiadas cosas 😒
🤷‍♂️ A ver, hay poca chicha 😬
🤷‍♂️ Los ejemplos no son muy claros 🙇‍♂️
🤷‍♂️ No se entiende, está mal escrito 👎
✍️ Hay errores, revísalo en cuanto puedas 🙏

Newsletter de kuworking, un correo de tanto en cuanto

Quizá te interese

Privacidad
by kuworking.com
[ 2020 >> kuworking ]