Para trabajar cómodamente con React, es importante conocer algunos conceptos básicos de JavaScript ES6. Aquí tienes una explicación sencilla de cada uno con ejemplos.

Recomiendo que antes de continuar con este curso, dispongas de conocimientos básicos de JavaScript y TypesScript.

• Curso de JavaScript
• Curso de TypesScript

1. Destructuración

La destructuración nos permite extraer valores de objetos o arreglos de manera rápida y fácil.

Ejemplo con objetos:

 
1const persona = { nombre: "Ana", edad: 25 };
2
3// Sin destructuración
4const nombre = persona.nombre;
5const edad = persona.edad;
6
7console.log(nombre); // "Ana"
8console.log(edad);   // 25
Salida de Consola!:
Ana
25

 
1const persona = { nombre: "Ana", edad: 25 };
2
3// Con destructuración
4const { nombre, edad } = persona;
5
6console.log(nombre); // "Ana"
7console.log(edad);   // 25
Salida de Consola!:
Ana
25

Ejemplo con arreglos:

 
1const colores = ["rojo", "verde", "azul"];
2
3// Sin destructuración
4const color1 = colores[0];
5const color2 = colores[1];
6
7console.log(color1); // "rojo"
8console.log(color2); // "verde"
Salida de Consola!:
rojo
verde

 
1const colores = ["rojo", "verde", "azul"];
2
3// Con destructuración
4const [color1, color2] = colores;
5
6console.log(color1); // "rojo"
7console.log(color2); // "verde"
Salida de Consola!:
rojo
verde

2. Funciones Flecha

Las funciones flecha son una forma más compacta de escribir funciones. Son útiles porque no cambian el valor de this dentro de ellas, lo que puede simplificar el código en React.

Ejemplo de una función tradicional:

 
1function sumar(a, b) {
2  return a + b;
3}
4console.log(sumar(3, 4)); // 7
Salida de Consola!:
7

Ejemplo de una función flecha:

 
1const sumar = (a, b) => a + b;
2console.log(sumar(3, 4)); // 7
Salida de Consola!:
7

Ejemplo de función flecha con más de una línea:

 
1const saludar = (nombre) => {
2  const mensaje = `Hola, ${nombre}`;
3  return mensaje;
4}
5console.log(saludar("Luis")); // "Hola, Luis"
Salida de Consola!:
Hola, Luis

3. Operadores de Propagación y Rest

Los operadores de propagación (...) y rest facilitan la manipulación de arreglos y objetos.

• Propagación (spread): Expande el contenido de un arreglo u objeto.
• Rest: Agrupa múltiples elementos en un solo parámetro.

Ejemplo de operador de propagación en arreglos:

 
1const numeros = [1, 2, 3];
2const nuevosNumeros = [...numeros, 4, 5];
3console.log(nuevosNumeros); // [1, 2, 3, 4, 5]
Salida de Consola!:
[ 1, 2, 3, 4, 5 ]

Ejemplo de operador de propagación en objetos:

 
1const persona = { nombre: "Ana", edad: 25 };
2const nuevaPersona = { ...persona, ciudad: "Madrid" };
3console.log(nuevaPersona); // { nombre: "Ana", edad: 25, ciudad: "Madrid" }
Salida de Consola!:
{ nombre: 'Ana', edad: 25, ciudad: 'Madrid' }

Ejemplo de operador rest:

 
1const sumar = (...numeros) => {
2  return numeros.reduce((total, num) => total + num, 0);
3}
4console.log(sumar(1, 2, 3, 4)); // 10
Salida de Consola!:
10

4. Promesas y async/await

Las promesas y async/await son formas de manejar operaciones asíncronas, como peticiones a servidores.

• Una promesa se usa para manejar el éxito (con .then) o error (con .catch) de una operación asíncrona.
• async/await simplifica el uso de promesas, haciendo que el código parezca más fácil de leer.

Ejemplo de promesas:

 
1const obtenerDatos = () => {
2  return new Promise((resolve, reject) => {
3    setTimeout(() => resolve("Datos obtenidos"), 2000);
4  });
5}
6
7obtenerDatos().then((datos) => console.log(datos));
Salida de Consola!:
Datos obtenidos

Ejemplo de async/await:

 
1const obtenerDatos = async () => {
2  const datos = await new Promise((resolve) => {
3    setTimeout(() => resolve("Datos obtenidos"), 2000);
4  });
5  console.log(datos);
6}
7
8obtenerDatos(); // "Datos obtenidos" (después de 2 segundos)
Salida de Consola!:
Datos obtenidos

5. Módulos (import y export)

Los módulos nos permiten organizar el código dividiéndolo en diferentes archivos, haciéndolo más fácil de mantener. Podemos exportar funciones, objetos o variables de un archivo y luego importarlos en otro.

Ejemplo de exportar:

1// archivo.js
2export const saludo = "Hola";
3export const saludar = (nombre) => `Hola, ${nombre}`;

Ejemplo de importar:

1// app.js
2import { saludo, saludar } from './archivo';
3
4console.log(saludo);            // "Hola"
5console.log(saludar("Ana"));    // "Hola, Ana"

También puedes usar export default si quieres exportar un solo valor:

1// archivo.js
2const despedida = "Adiós";
3export default despedida;

Y al importar, no necesitas llaves:

1// app.js
2import despedida from './archivo';
3console.log(despedida); // "Adiós"

Estos conceptos básicos te permitirán entender y manejar mejor el código en React, ¡y hacer que tu aplicación sea mucho más funcional y organizada!