Conceptos JavaScript para aprender React.

Antes de ingresar al mundo de react todos recomendamos tener un buen nivel en el manejo de javascript, tener fuertes bases en sus conceptos. Aquí te detallo algunos.

Template Strings

De manera simple es agregar dentro de una cadena de texto, incluso de varias lineas algunas variables. La sintaxis es muy facil el texto esta enmarcado de unas comillas invertidas o backtick y cuando vamos a llamar a variables en colocamos dentro de signo de dólar y unas llaves ${variable}

Short Conditionals: &&, ||, Ternary Operator

Operador lógico AND (&&)

Este operador lógico compara dos expresiones. Si la primera se evalúa como "verdadera" (truthy), la sentencia devolverá el valor de la segunda expresión. Si la primera expresión se evalúa como "falsa"(falsy), la sentencia devolverá el valor de la primera expresión.

Cuando solo se incluyen valores booleanos (true o false), se devuelve verdadero si las dos expresiones son verdaderas. Si una o ambas expresiones son falsas, la sentencia completa se devolverá como falsa.

Operador lógico OR ( || )

Este operador lógico compara dos expresiones. Si la primera se evalúa como "falsa", la sentencia devolverá el valor de la segunda expresión. Si la primera se evalúa como "verdadera", la sentencia devolverá el valor de la primera expresión.

Cuando solo se incluyen valores booleanos (true o false), se devuelve como true si cualquiera de las dos expresiones son verdaderas. Ambas expresiones pueden ser verdaderas, pero solo se necesita una para que el resultado sea verdadero.

Evaluación de "corto circuito"

&& y || funcionan como operadores de corto circuito.

Con el operador lógico AND, si el primer operando se devuelve como falso, el segundo nunca será evaluado y se devolverá el primer operando.

Con el operador lógico OR, si el primer valor se devuelve como verdadero, el segundo nunca será evaluado y el primer operando será devuelto.

Ternary Operator

El operador ternario es básicamente un atajo para una sentencia tradicional if...else.

El término ternario significa compuesto de tres elementos o partes. La sintaxis inicia con ?, agregamos una condición en el lado izquierdo y un valor en el lado derecho para devolver cuando la condición es verdadera. Luego agregamos dos puntos (:) seguidos de un valor para devolver si la condición es falsa.

Three Array Methods

Map, reduce y filter son todos métodos de arreglo en JavaScript. Cada uno iterará sobre un arreglo y realizará una transformación o cálculo. Cada uno devolverá un nuevo arreglo basado en el resultado de la función.

Map

El método map() se utiliza para crear un nuevo arreglo a partir de una existente, aplicando una función a cada uno de los elementos.

Filter

El método filter() toma cada elemento de un arreglo y aplica una función condicional contra él, es decir va a "buscar". Si este condicional devuelve true, el elemento se envía al arreglo de salida. Si la condición devuelve false, el elemento no se envía al arreglo de salida.

Reduce

El método reduce() reduce un arreglo de valores a un solo valor. Para obtener el valor de salida, ejecuta una función reductora en cada elemento del arreglo.

Sintaxis:

arr.reduce(callback(acumulador, valorActual[, índice[, array]])[, valorInicial])        

El argumento de callback es una función que se llamará una vez por cada elemento del arreglo. Esta función toma cuatro argumentos, pero a menudo solo se usan los dos primeros.

acumulador: el valor devuelto de la iteración anterior

valorActual: el elemento actual del arreglo

índice: el índice del elemento actual

arreglo: el arreglo original en la que se llamó a reduce

El argumento valorInicial es opcional. Si se proporciona, se utilizará como valor acumulador inicial en la primera llamada a la función callback.

Sinceramente he utilizado este método para sumar, pero hoy vamos con un ejemplo más "complejo" diriamos...

Destructuring

Es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables. La desestructuración no solo nos permite desempaquetar elementos, sino que también te da el poder de manipular y cambiar los elementos que desempaquetaste según el tipo de operación que quieras realizar.

Este tema al inicio nos puede costar un poco pero si practicamos con varios ejemplos de seguro nos queda claro.

Con destructuración además podemos intercambiar valores de las variables.

Este tema es más amplio en otro articulos tratares todas las opciones que nos permite este concepto.

Spread Operator

Este operador ayuda a copiar todo o parte de una matriz u objeto existente en otra matriz u objeto.

Tambien puede proporcionar una llamada de función con un array (o cualquier otra iterable) donde se esperaban 0 o más argumentos.

Uno de los temas que no veo necesario colocar un ejemplo son las funciones flechas ya que esto es algo básico si ya estamos programando en javascript.

Uno de los grandes sitios donde puedes encontrar excelente documención sobre desarrollo de software es freecodecamp. Saludos.