¿Qué es necesario para llegar a crear bloques en Gutenberg utilizando React? Si eres un programador backend y en los últimos años has intentado pelearte con Gutenberg y React verás que hay muchísimo detrás: Node.js, webpack, Babel, JavaScript, ES6, React, Prettier, conceptos como bundlers, linters… ¿Ese es el camino para programar cómodamente en React y por ende, en Gutenberg? Sí y no. Aunque existen atajos, hay cosas en todo el stack de React que, como mínimo, es necesario saber para qué sirven.

Node.js

No me preocuparía demasiado por Node.js. Es básicamente JavaScript pero quizás sea la forma de exportar e importar módulos lo más importante. Es básico tener algo de soltura a la hora de requerir módulos y aquí se explica bastante bien: https://www.tutorialsteacher.com/nodejs/nodejs-module-exports

De manera opcional, intentaría crear un servidor web con node para aprender cómo funciona: https://www.tutorialsteacher.com/nodejs/create-nodejs-web-server. Es relativamente sencillo y directo y es posible que cuando te metas con webpack te suenen cosas.

Eso sí, no instales Node.js directamente, instala nvm mejor. Con él podrás cambiar de versión de Node rápidamente.

npm

Es el gestor de dependencias de Node.js. Si vienes de PHP y has trabajado con Composer, esta parte debería ser fácil. Al menos se necesitan los conceptos básicos y los comandos más utilizados, así como la creación de scripts personalizados. Aquí hay un buen tutorial: https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/

JavaScript

Sorprende ver en esta lista JavaScript si con Node.js dábamos por hecho que ya sabíamos. JavaScript es un poco puñetero, que si el this y su contexto, callbacks hell, Promesas, async/await. Hay mucho que aprender y afianzar porque tarde o temprano nos va a hacer falta. En FrontendMasters hay un buen curso sobre las partes más difíciles de JS. Si no quieres pagar, puedes ver el contenido del curso y buscar por separado. Quizás no haga falta ya que cuando llegues a React y Redux, vas a tener que pelearte con todo esto.

También es útil mantenerse al día con la newsletter de JavaScript Weekly.

ES6/ESNext

En 2015, JavaScript lanza su versión 6, ECMAScript 6, y el tema de seguir su versionado se vuelve algo lioso. ES6, ESNext, ES2016, ES2019… Todas son versiones de JavaScript. ES6 introdujo muchos cambios muy interesantes (aunque alguno no fue bien recibido por sectores de la comunidad como la introducción de clases). Quédate con esto: A partir de ES6 todo es más moderno y cada año hay una versión nueva con nuevas características (ES2016, ES2017…) pero fue ES6 la que introdujo ya las más importantes.

Arrow functions o funciones flecha. Es necesario algo de práctica para utilizarlas como funciones, callbacks, asignarlas a constantes…
Diferencias entre let y const y el alcance (scope) de cada una de ellas dentro de un bloque de código. Ojo, se cree que const es algo inmutable (constante) pero no es así exactamente.
Rest parameter y Spread operator: Importantísimos los dos, requiere práctica pero son muy, muy útiles.
Interpolado de cadenas (String Interpolation)
Object Property Shorthand: Ahorra líneas de código y lo deja todo más limpio. No es indispensable pero puede que lo veas mucho por ahí.
Destructuring Assignment: También ahorra muchísimas líneas de código. Muy importante.
Módulos y cómo importarlos: Para organizar el código en condiciones.
No es propio de ES6 pero hay que practicar con .map, .filter y .reduce
Practicar con Object.keys y Object.values

Seguro que me dejo cosas pero creo que con esto ya hay para empezar. En este sitio hay un resumen de dichas características comparadas con versiones anteriores de JS: http://es6-features.org/. Es posible que se haya quedado algo viejo pero aún es válido. También aquí hay un resumen con todas las características desde que empezó ES6: https://www.freecodecamp.org/news/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e/

Yo aprendí React y JavaScript de nueva generación a la vez y no lo recomiendo. Creo que esta lista debería servir de guía sobre lo que se necesita saber para luego continuar con React y de hecho me gustaría añadir algo: probablemente ES6/ESNext es incluso más complicado que React (lo básico al menos) si vienes de PHP.

Babel

El problema de ESNext es que los navegadores no lo entienden al 100% y por eso aparece Babel. Se trata de un compilador de JavaScript que convierte ESNext en JavaScript que entiendan los navegadores. Babel ya no hace tanto ruido últimamente porque webpack y demás se encargan ya de gestionarlo todo pero es importante saber que está ahí y para qué sirve.

Lo mejor es probarlo: https://babeljs.io/ Escribe código ES6 y verás en qué lo transforma.

React

¿Debería empezar a programar en React sin conocer webpack, Babel y todo lo que hay detrçás para transpilar React en JavaScript que entienda el navegador? ¡Sí! Hoy día hay muchas aplicaciones que permiten arrancar un proyecto de React en un minuto sin configurar nada:

create-react-app: Es la más famosa y completa. Permite además personalizar mucha de su configuración e integración con Linters, Prettier y demás. Yo empecé por aquí y me sirvió luego para aprender webpack. Lo mejor es leer la documentación e ir intentando cosillas.
create-guten-block: Parecido al anterior pero especialmente diseñado para crear bloques con Gutenberg. Es mucho menos configurable y a mí no me termina de convencer pero reconozco su utilidad.
Parcel: En realidad es un bundler como webpack con menos posibilidades de configuración pero es que es tan rápido empezar con él y tan fácil de utilizar que casi se puede considerar un paquete que evita tener que configurar cosas, como los anteriores.

En cuanto a cursos de React hay muchísimos. Aquí recomiendo varios (de pago) pero se pueden encontrar muchísimos tutoriales en la web.

Introducción a React v2 (Frontend Masters): https://frontendmasters.com/courses/complete-react-v5/
The Beginners Guide to React (egghead): https://egghead.io/courses/the-beginner-s-guide-to-react
Getting Started with Redux (egghead): https://egghead.io/courses/getting-started-with-redux Redux y React están íntimamente ligados. Aunque el curso no se ha actualizado en dos años, creo que sigue vigente y el profesor es el propio autor de Redux. Redux es una forma de gestionar el estado global de una aplicación, algo muy importante en React.
State Management in Pure React v2: https://frontendmasters.com/courses/pure-react-state/. Este no tiene mucho sentido si no sabes Redux ya que es la forma moderna de gestionar ese mismo estado pero sólo con React, sin necesidad de Redux.

Si no quieres pagar o tienes prisa, en Youtube hay un React Crash Course. Y por supuesto también tienes la documentación oficial.

Bundlers: webpack, Parcel y @wordpress/scripts

Un bundler es la herramienta que se va a encargar de convertir tus ficheros JS, Sass, etc. en sólo unos pocos archivos JS y CSS (bundles) que los navegadores entenderán. Normalmente los bundlers sólo entienden JS pero le vas añadiendo plugins para que entiendan también Sass y que lo conviertan a CSS y que lo pongan separados en ficheros. También tienen utilidades para que con cada cambio que haces en tu JS no se recargue la página entera pero que puedas ver los cambios instantáneamente.

Los bundlers también ayudan a limpiar código que no sirve, te avisan de si te estás pasando con el tamaño de tus bundles, tratan imágenes comprimiéndolas, unirá todos los ficheros JS que tienes separados cómodamente en un solo archivo JS. En fin, toda una caterva de automatismos que te quitan muchísimo trabajo. Imagina que tuvieras que ir a la web de Babel para compilar el código ESNext cada vez que quieres probar, pues de estas cosas se encargan los bundlers.

¿El problema? Que no son fáciles de entender o configurar. El ejemplo más conocido es webpack, una herramienta potentísima pero también puro jeroglífico al principio, y eso que la documentación ha mejorado. Hace unos años no sabías ni para qué servía.

webpack: El bundler por excelencia, una pieza de ingeniería muy bien engrasada pero bastante difícil de entender. Hay que practicar mucho, muchísimo y por eso recomiendo hacerlo por partes. Aprender un día a transpilar React (o JSX, que es lo que se usa para escribir en React) a JS normal y corriente y unos días después intentar importar un CSS desde un fichero JS y que webpack lo ponga en su propio bundle. Después se puede pasar a intentar trabajar con Sass y más tarde utilizar webpack-dev-server para escuchar cambios en el JS que vas escribiendo. Esto es infinito pero advierto que webpack es muy, MUY cabezón y no pone las cosas fáciles.

Hay muchos recursos sobre webpack pero recomiendo otro curso de Frontend Masters en el que el profesor es el propio autor de webpack: webpack 4 essentials y también el libro Survive Webpack (se puede leer gratis online o comprarlo). Yo fui aprendiendo con el libro poco a poco y lo he repetido varias veces, no entero porque es bastante largo pero hasta que no me quedaron los conceptos bastante claros no paré de hacerlo una y otra vez. No sé si es la mejor o la peor manera de perder el tiempo.
Parcel: Ya hemos hablado de Parcel. Si necesitas un bundler que sea fiable y no necesite configuración, prueba Parcel, en un minutos ya puedes empezar a escribir React. Mientras aprendes webpack puede ser una gran opción.
@wordpress/scripts: No es un bundler en sí sino un wrapper de webpack específicamente para trabajar con proyectos JS de WordPress. Incluye ya varias utilidades para empezar rápidamente aunque es bastante simple. Merece la pena probarlo de vez en cuando porque le van añadiendo mejoras.

Herramientas de calidad: ESLint y Prettier

Esto en realidad no debería formar parte de este post porque se puede trabajar con React perfectamente sin linters pero este tipo de herramientas están tan integradas en el flujo de trabajo que es necesario al menos mencionarlas.

Entre ESLint y Prettier hay un poco de confusión ya que las dos parecen servir para lo mismo pero aunque tengan puntos en común, esto no es verdad.

ESLint: Es una herramienta para encontrar posibles problemas en el código pero también recomienda buenas prácticas o formatea el estilo del código (algo de lo que se encarga también Prettier). Puede avisarte de que hay una variable sin usar o de que no has llamado a super() en el constructor de una clase.
Prettier: Se encarga del estilo del código pero no detecta errores y lo hace perfectamente. Es mucho menos configurable porque es opinionated y si quieres cumplir los estándar de código de WordPress de partida no te va a venir bien (más información a continuación).

Como ESLint y Prettier se solapan lo normal es utilizar ESLint sólo para detectar errores o recomendar buenas prácticas y Prettier para formatear el código. Para ello, lo que se suele hacer es quedarse sólo con las reglas de ESLint recomendadas y para ello, en el fichero de configuración de ESLint, hay que especificar que se usará eslint:recommended. Al trabajar con React, será necesario usar un plugin de ESLint para añadir reglas que conciernen a React, eslint-plugin-react.

Por la parte de Prettier, se puede seguir esta guía para integrarlo con ESLint y que los dos coexistan pacíficamente. Luego sólo faltaría especificar las reglas que nos interesan de Prettier y ya está. Sin embargo, al trabajar con WordPress encontrarás que no hay reglas de Prettier que se adaptan bien al estilo de WP, por ello, Automattic lanzó un fork de Prettier que recomiendo instalar en su lugar: https://github.com/Automattic/wp-prettier

Y finalmente, Gutenberg

Casi es lo de menos aquí porque si llegamos a esta sección y ya conocemos React, Redux, ES6 y webpack, lo demás es cuestión de práctica. Yo empecé con este curso: https://javascriptforwp.com/product/advanced-gutenberg-development/. Atención porque trata más sobre sidebars y modelo de datos en Gutenberg que sobre desarrollo de bloques. No sé si estará correctamente actualizado, la verdad. Para mí Gutenberg tiene varios conceptos a los que hay que prestar atención:

Creación de bloques, cómo no.
Creación de sidebars, paneles y plugins: Se mezclan varios conceptos aquí porque lo que enlazo lleva a una cosa que se llama SlotFills, que es la forma con la que podemos crear un componente y que aparezca en una parte determinada de Gutenberg. Yo empecé aquí y me vino muy bien, la verdad porque es aquí donde se conoce mejor Gutenberg. Una vez conoces esta parte, desarrollar bloques puede ser más fácil.
El modelo de datos y cómo Gutenberg guarda el estado global en el paquete wp.data. Importantísimo.
Cómo funciona save en un bloque de Gutenberg y por qué si lo cambias así como así, te cargas el bloque. Cuando creas bloques, esto es lo primero con lo que vas a querer morir. Lo más importante aquí es saber usar la propiedad deprecated.
Que los filtros en Gutenberg no son tan importantes como en PHP. Quítate de la cabeza los actions o filters, Gutenberg utiliza el SlotFills para extender.
Gutenberg tiene ya una buena librería de componentes. Para que no tengas que hacer los tuyos propios.

Aunque la documentación de Gutenberg deja un poco que desear, tiene una sección de tutoriales con un buen número de ellos. También merece la pena apuntarse a la newsletter de José Ángel Vidania en la que va recopilando mucha información.

¿Conoces más cursos o sitios que consideres importantes?

Avísame por Twitter que un día de estos monto por fin los comentarios en el sitio :D.

A mí me funciona

tag => parcel

El camino hasta Gutenberg: Lo que necesitas conocer