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. Funciones de flecha le permiten crear funciones con una sintaxis más corta.
Ilustremos eso en los siguientes ejemplos:
Función habitual
funciónsaludo() {
devolver'Hola'
}
consola.log (saludo()) //hellofunción de flecha
dejar saludo = () =>'Hola'
consola.log (saludo()) //helloLas 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:
importar Reaccionar de'reaccionar'constante Libro = () => {
devolver (
Libro</div>)
}
exportarpor defecto Libro
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 Mozilla documentación de los desarrolladores.
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:
constante estudiante = {'nombre': 'María',
'DIRECCIÓN': 'South Park, Belén',
'edad': 15
}
Desestructuración:
consola.log (estudiante.nombre) // saca a MaríaEn 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 mapa(), filtrar(), y reducir(). Debes estar familiarizado con el métodos de matriz para entender cuándo aplicar cada uno.
por ejemplo, el mapa() El método itera sobre todos los elementos de una matriz. Actúa sobre cada elemento de la matriz para crear una nueva matriz.
constante números = [9, 16, 25, 36];
constante cuadradoArr = numeros.mapa(Matemáticas.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:
funciónhora de apertura(día) {
si (día == DOMINGO) {
devolver12;
}
demás {
devolver9;
}
}Código con Operador Ternario:
funciónhora de apertura(día) {
devolver día == DOMINGO? 12: 9;
}Aprender acerca diferentes tipos de condicionales con un enfoque especial en condicionales cortos. Estos son ampliamente utilizados en React.
5. Literales de plantilla
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:
dejar nombre = "Jane";dejar apellido = "Gama";
dejar texto = `bienvenido ${nombre}, ${apellido}!`; // ¡Bienvenida 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.
constante nombres = ['María', 'Jane'];
constante miembros del grupo = ['Fred', ...nombres, 'Ángela']; // ["Fred", "Mary", "Jane", "Ángela"]
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.
