Siguiendo con la serie de artículos sobre React, hoy vamos a centrarnos en JavaScript.

[Si te lo perdiste aquí tienes mi primer artículo de introducción a React]

Desde su creación en 1995, JavaScript a evolucionado mucho. Actualmente los cambios los gestiona la European Computer Manufacturers Association (ECMA) y la versión más extendida en la actualidad es ECMAScript 6 o ES6 (o ES2015).

React hace uso de dichas especificaciones, por lo que vamos a ver algunas de las características más destacadas.

 

Declaración de variables

Anteriormente las variables se declaraban con var, actualmente tenemos dos opciones

const: Para definir una variable que no puede cambiar.

let: Para definir variables que pueden ser modificadas y que pertenecen al scope en el que se definen.

 

Template strings

Nos permiten declarar cadenas de texto (o plantillas) complejas con varias líneas y variables de sustitución. Para usar template strings, crearemos la planilla entre dos caracteres «

Antes:

var hola = “Hola, me llamo “ + nombre

Ahora: 

let hola = `Hola me llamo ${nombre}`

 

Parámetros por defecto

En ES6 podemos definir valores por defecto en los parámetros de una función.

function miAficion(nombre="Pepe García", actividad="nadar") {
   console.log( `A ${nombre} le gusta ${actividad}` )
}

 

Arrow Functions

En ES6 se introduce una nueva sintaxis para definir funciones sin usar la palabra function y sin necesidad de usar return.

let miAficion = (nombre, actividad) =>  `A ${nombre} le gusta ${actividad}`

 

 

Asignación desestructurada (Destructuring Assignment)

Permite asignar sólo ciertas propiedades de un objeto al scope actual. En React lo utilizaremos mucho para acotar las propiedades o el estado dentro de una función.

const sandwich =  {

      bread: "dutch crunch",

      meat: "tuna",

      cheese: "swiss",

      toppings: ["lettuce", "tomato", "mustard"]

}

const {bread, meat} = sandwich

console.log(bread, meat) // dutch crunch tuna

 

Object Literal Enhancement

Es lo contrario de Destructing Assignment y nos permite crear un objeto a partir de variables del scope global.

var name = "Tallac"

var elevation = 9738

var funHike = {name,elevation}

console.log(funHike) // {name: "Tallac", elevation: 9738}

 

Clases

A partir de ES6 se introduce oficialmente el concepto de clase en JavaScript.

 

Módulos ES6

ES6 soporta la declaración de módulos que pueden ser almacenados en ficheros diferentes.

Con la definición de módulos tenemos dos opciones: puedes exportar múltiples objetos en un solo módulo o un objeto por módulo.

Cuando solo queremos exportar un objeto, podemos usar export default.

Javascript en React

Con esto hemos hecho un repaso a las características específicas de ES6 para poder exprimir al máximo todas las características que nos ofrece React.

¡Recuerda que si necesitas hacer un desarrollo con React puedes contactar conmigo para que trabajemos juntos en tu próximo proyecto!