Aprendiendo Gutenberg: sintaxis moderna de JavaScript

Índice

¿Qué es ES6?
constante, mar y var
Tarea de desestructuración
JSX
terminando

Uno de los cambios clave que Gutenberg aporta al ecosistema de WordPress es una gran dependencia de JavaScript. Afortunadamente, el equipo de WordPress realmente ha impulsado su marco de JavaScript hacia el presente y el futuro aprovechando la pila de JavaScript moderna, que comúnmente se conoce como ES6 en la comunidad. Así es como nos referiremos a él también en esta serie, para evitar confusiones.

Profundizamos un poco en este mundo de ES6, ya que, en última instancia, nos ayudará a comprender cómo estructurar y construir un bloque Gutenberg personalizado.

Serie de artículos:

Introducción a la serie
¿Qué es Gutenberg, de todos modos?
Una tarjeta con create-guten-block
Sintaxis moderna de JavaScript (esta publicación)
Reaccionar 101
Configurar un paquete web personalizado
Un bloque de “tarjeta” personalizado

¿Qué es ES6?

ES6 es la abreviatura de “EcmaScript 6”, que es la sexta edición de EcmaScript. Su nombre oficial es ES2015, que también habrás visto por ahí. Desde entonces, EcmaScript ha pasado por muchas iteraciones, pero a menudo todavía se hace referencia al JavaScript moderno como ES6. Como probablemente hayas adivinado, las iteraciones han continuado con ES2016, ES2017, etc. De hecho, hice una pregunta en el programa ShopTalk sobre cómo podríamos llamar al JavaScript moderno, y la conclusión fue… ES6.

Voy a repasar algunas características clave de ES6 que son útiles en el contexto de Gutenberg.

Funciones

Las funciones reciben una gran actualización con ES6. Los dos cambios en los que quiero centrarme son las funciones de flecha y los métodos de clase .

Dentro de una clase ya no es necesario escribir la palabra functionen ES6. Esto puede resultar confuso, por lo que conviene consultar este ejemplo:

class Foo {   // This is your 'bar' function  bar() {    return 'hello';  }}

Lo invocarías bar()así:

const fooInstance = new Foo();const hi = fooInstance.bar();

Esto es algo común en el mundo del JavaScript moderno, por lo que es bueno aclararlo.

¡Hecho de la diversión! Las clases de ES6 en JavaScript no son realmente “clases” en el sentido de la programación orientada a objetos; en el fondo, está la misma herencia prototípica que siempre ha tenido JavaScript. Antes de ES6, el bar()método se definiría así: Foo.prototype.bar = function() { ... }. React hace un gran uso de las clases de ES6, pero vale la pena señalar que las clases de ES6 son esencialmente azúcar sintáctica y algunas las cuestionan acaloradamente. Si está interesado en más detalles, consulte los documentos de MDN y este artículo sobre 2ality.

Bueno, pasemos a las funciones de flecha.

Una función de flecha nos brinda una sintaxis compacta que se usa a menudo como una línea única para expresiones. También se usa para mantener el valor de this, ya que una función de flecha no se vuelve a vincular thiscomo setIntervallo haría normalmente un controlador de eventos.

Un ejemplo de una función de flecha como expresión es la siguiente:

// Define an array of fruit objectsconst fruit = [  {    name: 'Apple',    color: 'red'  },  {    name: 'Banana',    color: 'yellow'  },  {    name: 'Pear',    color: 'green'  }];// Select only red fruit from that collectionconst redFruit = fruit.filter(fruitItem = fruitItem.color === 'red');// Output should be something like Object { name: "Apple", color: "red" }console.log(redFruit[0]);

Como puede ver arriba, debido a que había un solo parámetro y la función se estaba usando como expresión, podemos redactar los corchetes y paréntesis. Esto nos permite compactar realmente nuestro código y mejorar la legibilidad.

Echemos un vistazo a cómo podemos usar una función de flecha como controlador de eventos en nuestra Fooclase desde antes:

class Foo {          // This is your 'bar' function  bar() {    let buttonInstance = document.querySelector('button');        buttonInstance.addEventListener('click', evt = {      console.log(this);    });  }}// Run the handlerconst fooInstance = new Foo();fooInstance.bar();

Cuando se hace clic en el botón, la salida debe ser Foo { }, porque thises la instancia de Foo. Si quisiéramos reemplazar ese ejemplo con el siguiente:

class Foo {          // This is your 'bar' function  bar() {    let buttonInstance = document.querySelector('button');        buttonInstance.addEventListener('click', function(evt) {      console.log(this);    });  }}// Run the handlerconst fooInstance = new Foo();fooInstance.bar();

Cuando se hace clic en el botón, el resultado será buttonporque es functionprobable thisque sea en el buttonque se hizo clic.

Puedes leer más sobre las funciones de flecha con Wes Bos, quien escribió un excelente artículo sobre ellas.

constante, mar y var

Quizás hayas notado que he estado usando consty leten los ejemplos anteriores. Estos también son parte de ES6 y explicaré rápidamente qué hace cada uno.

Si un valor es absolutamente constante y no cambiará mediante la reasignación ni se volverá a declarar, utilice un archivo const. Esto se usaría comúnmente para importar algo o declarar propiedades que no cambian, como una colección de elementos DOM.

Si tiene una variable a la que desea que solo se pueda acceder en el bloque en el que se definió, utilice un let. Esto puede resultar confuso de entender, así que consulta este pequeño ejemplo:

function foo() {  if (1  2) {    let bar = 'always true';        // Outputs: 'always true'    console.log(bar);  }    // Outputs 'ReferenceError: bar is not defined'  console.log(bar);}// Run the function so we can see our logsfoo();

Esta es una excelente manera de mantener el control de sus variables y hacerlas desechables, en cierto sentido.

Por último, varestá el mismo viejo amigo que conocemos y amamos tan bien. Desafortunadamente, entretanto const, letnuestro amigo se vuelve cada vez más redundante a medida que pasa el tiempo. Sin embargo, su uso vares totalmente aceptable, así que no te desanimes: ¡no lo verás mucho en el resto de este tutorial!

Tarea de desestructuración

La desestructuración le permite extraer claves de objetos en el punto donde las asigna a su variable local. Entonces, digamos que tienes este objeto:

const foo = {  people: [    {      name: 'Bar',      age: 30    },    {      name: 'Baz',      age: 28    }  ],  anotherKey: 'some stuff',  heyAFunction() {    return 'Watermelons are really refreshing in the summer'   }};

Tradicionalmente, extraerías peoplecon foo.people. Con la desestructuración, puedes hacer esto:

let { people } = foo;

Eso saca la peoplematriz del objeto foo, por lo que podemos volcar el foo.prefijo y usarlo como está: people. También significa que anotherKeyy heyAFunctionson ignorados porque no los necesitamos en este momento. Esto es genial cuando trabajas con objetos grandes y complejos donde poder seleccionar cosas selectivas es realmente útil.

También puede utilizar la desestructuración para dividir un objeto en variables locales para aumentar la legibilidad del código. Actualicemos el fragmento anterior:

let { people } = foo;let { heyAFunction } = foo;

Ahora tenemos esos dos elementos separados del mismo objeto, sin dejar de ignorarlos anotherKey. Si ejecutas console.log(people), se mostrará como una matriz y si ejecutas console.log(heyAFunction), lo adivinaste, se mostrará como una función.

JSX

Se encuentra más común en contextos React JS: JSX es una extensión de JavaScript similar a XML que está diseñada para ser compilada por preprocesadores en código JavaScript normal. Básicamente, nos permite escribir código HTML (ish) dentro de JavaScript, siempre que lo estemos preprocesando. Generalmente se asocia con un marco como React JS, pero también se usa para el desarrollo de bloques de Gutenberg.

Empecemos con un ejemplo:

const hello = h1 className="heading"Hello, Pal/h1;

Muy bien, ¿eh? No se requiere sistema de plantillas ni escape o concatenación. Siempre que devuelvas un solo elemento, que puede tener muchos hijos, todo estará bien. Entonces, mostraremos algo un poco más complejo, con una función de renderizado de React:

class MyComponent extends React.Component {  /* Other parts redacted for brevity */    render() {    return (      article        h2 className="heading"{ this.props.heading }/h2        p className="lead"{ this.props.summary }/p      /article    );  }};

Puedes ver arriba que podemos colocar expresiones donde queramos. Este también es el caso con los atributos de los elementos, por lo que podemos tener algo como esto:

h2 className={ this.props.headingClass }   { this.props.heading }/h2

Quizás estés pensando: “¿Qué están haciendo estos frenillos aleatorios?”

La respuesta es que esta es una expresión que verás en abundancia en JSX. Básicamente, es una pequeña ejecución en línea de JavaScript que se comporta de manera muy similar a PHP echo.

Probablemente también notarás que dice classNameen lugar de class. Aunque parece HTML/XML, sigue siendo JavaScript, por lo que naturalmente se evitan las palabras reservadas. Los atributos también están en mayúsculas y minúsculas, por lo que estad atentos. Aquí tienes una respuesta útil a por qué es así.

JSX es realmente poderoso como verás a qué medida avanza esta serie. Es una gran herramienta en nuestra pila y realmente útil para entenderla en general.

Me gusta pensar en JSX como nombres de etiquetas inventados que en realidad son solo llamadas a funciones. Elija cualquiera de las etiquetas inventadas que ve en Gutenberg, usemos InspectorControls /por ejemplo, y haga “Buscar en carpeta” class InspectorControlsy verá algo estructurado como el ejemplo de Andy aquí. Si no lo encuentra, entonces el JSX debe estar registrado como componente funcional y debería aparecer buscando function InspectorControls.

terminando

Hemos revisado rápidamente algunas de las funciones útiles de ES6. Hay mucho más que aprender, pero quería centrar su atención en las cosas que usaremos en esta serie de tutoriales. Le recomiendo encarecidamente que siga aprendiendo con los cursos de Wes Bos, JavaScript 30 y ES6.io.

¡A continuación, vamos a crear un mini componente React!