JavaScript para saber React
Articulo original en ingles: JavaScript to Know for React
Qué características de JavaScript tenes que conocer cuando aprendes y usas React.
Una de las cosas que más me gustan de React en comparación con otros frameworks que he usado, es lo expuesto que estás a JavaScript cuando lo estás usando. No hay témplate DSL (JSX se compila en JavaScript sensible), la API del componente se volvió mas simple con la adición de React Hooks, y el framework te ofrece muy poca abstracción fuera de las preocupaciones de la interfaz de usuario central que se pretende resolver.
Debido a esto, aprender las características de JavaScript es realmente aconsejable para ser eficaz en la construcción de aplicaciones con React. Así que acá hay algunas características de JavaScript que te recomiendo que pases algún tiempo aprendiendo para que puedas ser tan efectivo como sea posible trabajando con React.
Antes de entrar en el tema de la sintaxis, otra cosa que es realmente útil para entender React es el concepto de cierre (closure) de una función. Acá hay una gran descripción de este concepto: whatthefork.is/closure.
Bien, vayamos a las características de JS que querrás conocer para React.
Literales de plantilla
Los literales de plantilla son como cadenas (strings) normales, con superpoderes
Nombres de propiedad abreviados
Esto es tan común y útil que ahora lo hago sin pensar.
MDN: Object initializer New notations in ECMAScript 2015
Funciones de flecha
Las funciones de flecha son otra forma de escribir funciones en JavaScript, pero tienen algunas diferencias semánticas. Por suerte para nosotros en la tierra de React, no tenemos que preocuparnos tanto por this si usamos hooks en nuestro proyecto (en lugar de clases), pero la función de flecha permite funciones anónimas más breves y retornos implícitos, por lo que verás y querrás usar funciones de flecha bastante.
Una cosa a tener en cuenta sobre el ejemplo anterior son los paréntesis de apertura y cierre
(. Esta es una forma común de aprovechar las capacidades de retorno implícitas de la función de flecha cuando se trabaja con JSX.
Desestructuración
La desestructuración es probablemente mi característica favorita de JavaScript. Yo desestructuro objetos y arrays todo el tiempo (y si estás usando useState, probablemente vos también lo hagas así). Me encanta lo declarativo que es.
Definitivamente lee ese artículo de MDN. Seguro que aprendes algo nuevo. Cuando termines, intenta refactorizar esto para usar una sola línea de desestructuración:
Parámetros por defecto
Esta es otra característica que uso todo el tiempo. Es una forma realmente poderosa de expresar declarativamente los valores por defecto de tus funciones.
Rest/Spread
La sintaxis ...puede considerarse como una sintaxis de "colección" que opera sobre una colección de valores. Yo la utilizo todo el tiempo y le recomiendo encarecidamente que aprendas cómo y dónde se puede utilizar también. En realidad, tiene diferentes significados en diferentes contextos, por lo que aprender los matices te ayudará.
MDN: Spread syntax
MDN: Rest parameters
ESModules
Si está construyendo una aplicación con herramientas modernas, es probable que soporte módulos, es una buena idea aprender cómo funciona la sintaxis porque cualquier aplicación de tamaño trivial, probablemente necesitará hacer uso de módulos para la reutilización y organización del código.
Como otro recurso, di una charla completa sobre esta sintaxis y puedes verla aquí.
Ternarios
Amo los ternarios. Son maravillosamente declarativos. Especialmente en JSX.
Me doy cuenta de que los ternarios pueden tener una reacción instintiva de disgusto por parte de algunas personas que tuvieron que aguantar intentado dar sentido a los ternarios antes que llegara Prettier y limpiara nuestro código. Si aún no estás usando Prettier, te recomiendo encarecidamente que lo hagas. Prettier va a ser que tus ternarios sean mucho más fáciles de leer.
MDN: Conditional (ternary) operator
Métodos de matriz
¡Las matrices son fantásticas y uso métodos de matriz todo el tiempo! Probablemente los métodos que más utilizo son los siguientes:
- find
- some
- every
- includes
- map
- filter
- reduce
Estos son algunos ejemplos:
Operador de fusión nulo
Si un valor es nullo undefined, es posible que desees devolver algún valor por defecto:
MDN: Nullish coalescing operator
Encadenamiento opcional
También conocido como el “Operador de Elvis”, permite acceder de forma segura a propiedades y llamar a funciones que pueden existir o no. Antes del encadenamiento opcional, usábamos una solución alterna que se basaba en falsedad/veracidad.
Una advertencia al respecto es que si te encontras haciendo ?.mucho en tu código, es posible que desees considerar el lugar donde se originan esos valores y asegurarse de que devuelvan consistentemente los valores que deberían.
Promesas y async / await
Este es un gran tema y puede requerir un poco de práctica y tiempo de trabajo con ellos para llegar a ser bueno en ellos. Las promesas están por todas partes en el ecosistema JavaScript y, gracias a lo arraigado que está React en ese ecosistema, también están por todas partes (de hecho, el propio React utiliza promesas internamente).
Las promesas lo ayudan a administrar el código asincrónico y se devuelven desde muchas APIs del DOM así como bibliotecas de terceros. La sintaxis async / await es una sintaxis especial para tratar con promesas. Los dos van de la mano.
MDN: Promise
MDN: async function
MDN: await
Conclusión
Hay por supuesto muchas características del lenguaje que son útiles cuando se construyen aplicaciones React, pero estas son algunas de mis favoritas que me encuentro usando una y otra vez. Espero que te resulten útiles.
Si queres profundizar más en alguna de ellas, tengo un taller de JavaScript que di y grabé mientras trabajaba en PayPal, que puede resultarle útil: ES6 y más allá del taller en PayPal
¡Buena suerte!
