🖖 Inicio

SERVICIOS

Salir

nochedía

Re-Creando el website de la parte I

400 palabras
2 minutos
May 11, 2020

Re-Creando el website de la primera parte

Terminamos la parte 1 de este curso con una web que habíamos estructurado de cierta forma, habíamos estilado con styled-components, y le habíamos incluido la librería typography para tener resuelto el tema de las tipografias

Ahora vamos a hacerlo de nuevo pero en vez de styled-components vamos a utilizar @emotion, el segundo en popularidad en esto del CSS in JSS

Por qué el cambio? Porque ya que gatsby lo ha elegido, pues habrá que darle una oportunidad

La suerte de todo esto?

Que son muy parecidos, mucho, tanto que ciertamente cuesta entender por qué existen los dos y no terminan uniendo esfuerzos

Claro está que al principio esto no era así, pero con los meses se han copiado mutuamente y hoy por hoy son casi clones

Clones, por el exterior, por dentro sí que (dicen que) se diferencian y bastante, pero luego cuando se comparan velocidades ... salen muy muy iguales

En la práctica verás que casi no hay que cambiar nada

Primero instalamos el starter y en este caso vamos a escoger el básico y oficial

Luego si quieres crea el directorio .vscode y allí creas el archivo settings.json y le copias el código de abajo, que te servirá para personalizar vscode

Aunque esto va cambiando con cada versión de vscode, así que mi consejo es que dediques algún tiempo a conocer tu editor porque el retorno es grande

Luego instalaremos typography con un tema que particularmente me gusta (el mismo que antes)

Y también @emotion

Seguimos con gatsby-config.js donde añadimos los dos plugins

Y luego creamos la carpeta src/components y le ponemos los siguientes archivos, donde atención he cambiado los styled-components de la primera parte de código por sus equivalentes con @emotion

Es decir, he hecho lo siguiente en todos los componentes

Ya ves que los cambios son muuuuy menores

También hago otro cambio esta vez relacionado con typography, aquí utilizo la función rhythm que nos cambiará el valor que definamos en función de otros parámetros si estos cambian (es decir, que si cambio el tamaño de letra todo cambiará para estar acorde con este nuevo tamaño)

Vamos, que si lo definimos con rhythm tendremos un comportamiento más coherente y eso sin tener que dedicar ni un segundo, nos viene out-of-the-box

(un ejemplo tonto de cómo sería)

Los archivos son los siguientes

Y la página principal en /src/pages/index.js y la que también añadimos de contactar.js

Nos falta el archivo de typography que lo creamos en la carpeta /utils/typography.js

Y tu dirás, no decías que ibas a utilizar rhythm???

Tienes razón, no lo haré aquí, lo haré en el capítulo 7 donde nos dedicamos a darle estilo a la web!

Y ahora sí, con esto corremos un gatsby develop y ya tenemos nuestro hello-world que es una copia idéntica de lo que veíamos en la primera parte del curso

Hasta aquí el segundo capítulo del curso donde nos hemos limitado a recrear el website que hicimos en la primera parte, pero por la vía rápida y utilizando @emotion

Nos vemos en el tercer capítulo, en Gatsby-node.js 1

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 ]