6 conceptos importantes de JavaScript para principiantes en React

Como la biblioteca frontend más popular, todos quieren aprender React. ReactJS es fundamentalmente JavaScript. Pero eso no significa que deba aprender todo en JavaScript para pasar a ReactJS. Comprender los conceptos fundamentales de JavaScript lo ayudará a comprender los conceptos de React más fácilmente y, en última instancia, acelerará su capacidad para trabajar en proyectos.

Describamos los conceptos esenciales que debe saber sobre JavaScript antes de pasar a ReactJS.

1. Funciones de flecha

Las funciones de flecha se usan ampliamente en React. A partir de la versión 16.8, React pasó de componentes basados ​​en clases a componentes funcionales. Las funciones de flecha le permiten crear funciones con una sintaxis más corta.

Ilustremos eso en los siguientes ejemplos:

Función habitual

function greeting() {
    return 'hello'
}
console.log(greeting()) //hello

función de flecha

let greeting = () => 'hello'
console.log(greeting()) //hello

Las dos funciones anteriores tienen la misma salida, aunque la sintaxis es diferente. La función de flecha se ve más corta y limpia que la función normal. Por lo general, los componentes de React tienen la siguiente estructura:

import React from 'react'


const Book = () => {

export default Book

Las funciones de flecha no tienen nombres. Si desea nombrarlo, asígnelo a una variable. La diferencia entre una función regular y una de flecha es más que solo la sintaxis. Obtenga más información sobre las funciones de flecha en la documentación para desarrolladores de Mozilla .

2. Desestructuración

La desestructuración se utiliza para obtener datos a partir de estructuras de datos complejas. En JavaScript, las matrices y los objetos pueden almacenar muchos valores. Puede manipular los valores y usarlos en diferentes partes de la aplicación.

Para obtener estos valores, debe desestructurar la variable. Dependiendo de la estructura de datos con la que esté tratando, puede usar la notación de punto (.) o la notación de corchete. Por ejemplo:

const student = {


   'name': 'Mary',

}

Desestructuración:

console.log(student.name) // output Mary

En el ejemplo anterior, la notación de puntos accede al valor de la clave ‘nombre’. En ReactJS, utilizará el concepto de desestructuración para obtener y compartir valores en su aplicación. La desestructuración ayuda a evitar la repetición y hace que su código sea más legible.

3. Métodos de matriz

Encontrará arreglos varias veces mientras trabaja en proyectos de React. Una matriz es una colección de datos. Almacena datos en matrices, para que pueda reutilizarlos cuando sea necesario.

Los métodos de matriz se utilizan principalmente para manipular, recuperar y mostrar datos. Algunos métodos de matriz comúnmente utilizados son map() , filter() y reduce() . Debe estar familiarizado con los métodos de matriz para comprender cuándo aplicar cada uno.

Por ejemplo, el método map() itera sobre todos los elementos de una matriz. Actúa sobre cada elemento de la matriz para crear una nueva matriz.

const numbers = [9, 16, 25, 36];


const squaredArr = numbers.map(Math.sqrt) // 3,4,5,6

Utilizará mucho los métodos de matriz en ReactJS. Los usará para convertir matrices en cadenas, unir, agregar elementos y eliminar elementos de otras matrices.

4. Condicionales cortos

Los condicionales son declaraciones que utiliza JavaScript para tomar decisiones en el código. Los condicionales cortos incluyen && (y), II (o) y el operador ternario. Estas son expresiones más cortas de condiciones y las declaraciones if/else.

El siguiente ejemplo muestra cómo usar un operador ternario.

Código con sentencia if/else:

function openingTime(day) {
    if (day == SUNDAY) {
        return 12;
    }
       else {
        return 9;
    }
}

Código con Operador Ternario:

function openingTime(day) {
    return day == SUNDAY? 12: 9;
}

Aprende sobre los diferentes tipos de condicionales con un enfoque especial en los condicionales cortos. Estos son ampliamente utilizados en React.

5. Plantilla de literales

Los literales de plantilla usan tildes invertidas (“) para definir una cadena. Los literales de plantilla le permiten manipular datos de cadena haciéndolos más dinámicos. Los literales de plantilla etiquetados le permiten realizar operaciones dentro de una cadena. Estas son expresiones más cortas de condiciones y las declaraciones if/else.

Por ejemplo:

let firstName = "Jane";


let lastName = "Doe";

let text = `Welcome ${firstName}, ${lastName}!`; // Welcome Jane Doe!

6. Operadores de propagación

El operador Spread (…) copia los valores de un objeto o matriz en otro. Su sintaxis consta de tres puntos seguidos del nombre de la variable. Por ejemplo (…nombre). Combina las propiedades de dos matrices u objetos.

El siguiente ejemplo muestra cómo usar el operador de propagación para copiar los valores de una variable a otra.

const names = ['Mary', 'Jane'];


const groupMembers = ['Fred',. ..names, 'Angela']; // ["Fred", "Mary", "Jane", "Angela"]

Puede utilizar el operador de propagación para realizar una serie de operaciones. Estos incluyen copiar el contenido de una matriz, insertar una matriz en otra, acceder a matrices anidadas y pasar matrices como argumentos. Puede usar el operador de propagación en ReactJS para manejar los cambios de estado en los componentes.

¿Por qué aprender ReactJS?

ReactJS es popular por una buena razón. Tiene una curva de aprendizaje corta, confiable y se procesa rápidamente en el DOM. Admite componentes independientes y tiene excelentes herramientas de depuración.

ReactJS incorpora nuevos conceptos de JavaScript de ECMAScript 6 (ES6). Aprender conceptos fundamentales en JavaScript facilitará el desarrollo de proyectos en ReactJS.

Para colmo, ReactJS tiene una gran comunidad que lanza constantemente nuevas actualizaciones. Si desea aprender una biblioteca de JavaScript, ReactJS sería una excelente elección. El marco Next.js complementa las limitaciones de ReactJS. Una combinación de los dos hace de ReactJS una poderosa biblioteca de front-end.