💡 React y ES6

Aprende las características de ES6 que son esenciales para trabajar con React.

📌 Índice de esta entrada:

📝 ¿Qué es ES6?
⚡ Por qué aprender ES6 para React
🔹 Clases en ES6
🔹 Funciones de flecha
🔹 Variables: let, const y var
🔹 Métodos de array: .map(), .filter(), .reduce()
🔹 Desestructuración de objetos y arrays
🔹 Operador de spread ES6
🔹 Módulos en ES6
🔹 Operador ternario
🔹 Cadenas de plantillas

📝 ¿Qué es ES6?

ES6 significa ECMAScript 6, también conocido como ECMAScript 2015. ECMAScript es el estándar que define cómo funciona JavaScript, y ES6 es la sexta versión oficial de este estándar, publicada en 2015.

ES6 introdujo muchas mejoras y nuevas características que hacen el desarrollo en JavaScript más moderno y eficiente, especialmente para trabajar con React.

Ejemplo de ES6 básico

Antes de ES6, declarábamos variables usando var:

var nombre = "Juan";
console.log(nombre); // Juan

Con ES6, podemos usar let y const para declarar variables con un alcance más controlado:

let edad = 25;     // Variable que puede cambiar
const PI = 3.1416; // Constante que no puede cambiar

console.log(edad); // 25
console.log(PI);   // 3.1416

Características principales de ES6

📌 Clases: sintaxis más clara para crear objetos y componentes.
📌 Funciones de flecha: forma corta de escribir funciones.
📌 Métodos de array: como .map(), .filter(), .reduce().
📌 Desestructuración: acceder a valores de arrays u objetos de forma más limpia.
📌 Módulos: importar y exportar funciones, clases o variables entre archivos.
📌 Operador ternario: forma compacta de escribir condicionales.
📌 Operador spread (...): copiar o combinar arrays y objetos fácilmente.

Estas características hacen que el código en React sea más limpio, moderno y fácil de mantener. En las siguientes secciones, veremos cada característica con ejemplos prácticos aplicables a React.

⚡ Por qué aprender ES6 para React

React está construido sobre JavaScript moderno, y ES6 (ECMAScript 2015) introdujo muchas características que hacen que el desarrollo con React sea más eficiente, limpio y comprensible. Aprender ES6 es esencial para aprovechar al máximo las capacidades de React.

1️⃣ Clases y componentes de clase

ES6 introdujo las clases, que son la base de los componentes de clase en React. Sin comprender clases, no podrías manejar estados y métodos en componentes de clase de manera efectiva.

class MiComponente extends React.Component {
  constructor(props) {
    super(props);
    this.state = { contador: 0 };
  }

  incrementar = () => this.setState({ contador: this.state.contador + 1 });

  render() {
    return <h1>Contador: {this.state.contador}</h1>;
  }
}

2️⃣ Funciones de flecha y manejo de eventos

Las funciones de flecha conservan el contexto de this y permiten escribir event handlers más limpios.

const Boton = () => {
  const [clicks, setClicks] = React.useState(0);

  const handleClick = () => setClicks(clicks + 1);

  return <button onClick={handleClick}>Clicks: {clicks}</button>;
};

3️⃣ Desestructuración y props

En React, es común recibir props en los componentes. La desestructuración de ES6 permite acceder fácilmente a las propiedades de un objeto.

function Saludo({ nombre, edad }) {
  return <p>Hola {nombre}, tienes {edad} años.</p>;
}

// Uso
<Saludo nombre="Ana" edad={25} />

4️⃣ Módulos y import/export

ES6 introdujo los módulos nativos (import y export), que son la base de la organización de componentes y archivos en React.

import React from 'react';
import Contador from './Contador.jsx';

function App() {
  return <Contador />;
}

export default App;

5️⃣ Ventajas de aprender ES6 para React

Escritura de código más limpia y legible.
Uso eficiente de state, props y eventos.
Compatibilidad con todas las herramientas modernas de React.
Facilita la comprensión de librerías y frameworks modernos.

✅ En resumen, ES6 no es solo una mejora de JavaScript, sino un requisito práctico para desarrollar aplicaciones React modernas de forma eficiente y profesional.

🔹 Clases en ES6

ES6 introdujo las clases, que son una forma más clara y moderna de crear objetos y manejar la herencia en JavaScript. Una clase es un tipo de función, pero se define con la palabra clave class, y las propiedades se asignan dentro del método constructor().

Ejemplo básico: crear una clase

class Car {
  constructor(name) {
    this.brand = name;
  }
}

// Crear un objeto basado en la clase
const myCar = new Car("Ford");

console.log(myCar.brand); // Ford

🔹 Nota: El constructor() se llama automáticamente cuando se inicializa el objeto. 🔹 Convención: los nombres de clases empiezan con mayúscula (ej. Car).

Métodos en clases

Puedes agregar métodos propios a la clase para definir comportamientos.

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const myCar = new Car("Ford");
console.log(myCar.present()); // I have a Ford

🔹 Nota: Para llamar al método usamos objeto.nombreMetodo().

Herencia de clases

Para crear herencia, usamos la palabra clave extends. Una clase hija hereda todos los métodos de la clase padre.

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

// Clase hija que hereda de Car
class Model extends Car {
  constructor(name, mod) {
    super(name); // Llama al constructor del padre
    this.model = mod;
  }
  
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

const myCar = new Model("Ford", "Mustang");
console.log(myCar.show()); // I have a Ford, it is a Mustang

🔹 super() se refiere a la clase padre y permite acceder a sus propiedades y métodos. 🔹 Con herencia, podemos reutilizar lógica y mantener el código más limpio.

✅ Las clases son esenciales en React porque los componentes de clase se basan en este concepto. Más adelante veremos cómo combinarlas con JSX y el estado de los componentes.

🏹 Funciones de flecha (Arrow Functions)

Las funciones de flecha fueron introducidas en ES6 para simplificar la forma en que escribimos funciones en JavaScript. Nos permiten una sintaxis más corta y un manejo más intuitivo del this, lo que las hace muy útiles dentro de React.

🧩 Antes de ES6

Antes de ES6, las funciones se declaraban usando la palabra clave function:

hello = function() {
  return "Hello World!";
}

Resultado:

Hello World!

⚡ Con ES6 (Funciones de Flecha)

Con ES6, puedes escribir la misma función de una manera más corta y elegante:

hello = () => {
  return "Hello World!";
}

Si la función contiene una sola línea que devuelve un valor, puedes incluso omitir las llaves {} y la palabra return:

hello = () => "Hello World!";

Resultado:

Hello World!

📥 Funciones de flecha con parámetros

Si tu función necesita recibir valores, los pasas dentro de los paréntesis. Por ejemplo:

hello = (name) => "Hello " + name;

Resultado:

Hello John

Si solo hay un parámetro, puedes incluso omitir los paréntesis:

hello = name => "Hello " + name;

💡 Ejemplo práctico en React

En React, las funciones de flecha se usan constantemente, especialmente para manejar eventos y mantener el contexto del componente.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  // Función de flecha para manejar el click
  const handleClick = () => setCount(count + 1);

  return (
    <div>
      <h2>Contador: {count}</h2>
      <button onClick={handleClick}>Incrementar</button>
    </div>
  );
}

export default App;

👉 En este ejemplo, la función handleClick es una función de flecha que mantiene el contexto del componente y actualiza el estado con cada clic.

🔍 Diferencia entre función regular y función de flecha con `this`

Una diferencia clave es cómo manejan el contexto de this. Las funciones regulares cambian su contexto según quién las llame, mientras que las funciones de flecha mantienen el contexto del lugar donde fueron definidas.

📘 Ejemplo con función regular

class Header {
  constructor() {
    this.color = "Red";
  }

  // Función regular
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();
window.addEventListener("load", myheader.changeColor);
document.getElementById("btn").addEventListener("click", myheader.changeColor);

En este caso, el valor de this cambia dependiendo de quién llama a la función (el objeto window o el button).

📗 Ejemplo con función de flecha

class Header {
  constructor() {
    this.color = "Red";
  }

  // Función de flecha
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const myheader = new Header();
window.addEventListener("load", myheader.changeColor);
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Aquí, this siempre hace referencia al objeto Header, sin importar quién haya llamado a la función.

✅ Conclusión

Las funciones de flecha hacen el código más limpio y fácil de leer.
No crean su propio this, lo cual es ideal en React.
Son muy utilizadas en hooks y eventos de componentes funcionales.

🔤 Variables en ES6: `let`, `const` y `var`

En JavaScript (y por tanto en React), las variables se utilizan para almacenar valores. Antes de ES6, todas las variables se declaraban con var, pero desde ES6 tenemos nuevas formas más seguras y modernas de hacerlo: let y const.

📘 `var` – La forma antigua

La palabra clave var se usaba tradicionalmente para declarar variables. Sin embargo, tiene comportamientos que pueden causar errores difíciles de detectar: hoisting y alcance global.

var nombre = "Juan";
console.log(nombre); // Juan

if (true) {
  var nombre = "Pedro";
  console.log(nombre); // Pedro
}

console.log(nombre); // Pedro 😱

Como puedes ver, var no respeta el bloque if; la variable es global y se sobrescribe. Esto puede causar errores al trabajar en proyectos grandes.

🟦 `let` – Variables con alcance de bloque

let fue introducido en ES6 para solucionar los problemas de var. Las variables declaradas con let solo existen dentro del bloque donde fueron definidas.

let nombre = "Juan";
console.log(nombre); // Juan

if (true) {
  let nombre = "Pedro";
  console.log(nombre); // Pedro
}

console.log(nombre); // Juan ✅

Aquí, la variable nombre dentro del if es diferente a la variable fuera de él. Cada bloque crea su propio “espacio” de variables.

🟩 `const` – Constantes (valores que no cambian)

const se usa para declarar variables cuyo valor no debería cambiar. Es ideal para valores fijos o referencias a objetos y funciones.

const PI = 3.1416;
console.log(PI); // 3.1416

// PI = 3.14; ❌ Error: no se puede reasignar una constante

Pero atención: aunque no puedes reasignar una variable const, si su valor es un objeto o array, puedes modificar su contenido.

// Objeto con const
const persona = { nombre: "Ana", edad: 25 };
persona.edad = 30; // ✅ permitido
console.log(persona); // { nombre: "Ana", edad: 30 }

⚛️ Uso de `let` y `const` en React

En React, const se usa con mucha frecuencia para definir componentes, funciones y estados que no cambian directamente. let se usa solo cuando un valor va a cambiar dentro de una función.

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0); // count no cambia directamente

  let mensaje = "Haz clic para incrementar"; // cambia según condiciones

  if (count > 5) {
    mensaje = "¡Buen trabajo!";
  }

  return (
    <div>
      <h2>Contador: {count}</h2>
      <p>{mensaje}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

export default App;

👉 Aquí, const se usa para el estado (que React gestiona internamente), y let para variables locales dentro del componente.

🧠 En resumen:

Tipo	Alcance	Puede reasignarse	Uso recomendado
`var`	Global o función	✅ Sí	❌ Evitarlo (solo para compatibilidad)
`let`	Bloque	✅ Sí	Para valores que cambian
`const`	Bloque	❌ No	Para valores y funciones constantes

🧩 Métodos de Array en ES6: `.map()`, `.filter()` y `.reduce()`

En JavaScript moderno (y especialmente en React), los métodos de arreglo como .map(), .filter() y .reduce() son esenciales. Permiten transformar, filtrar y resumir datos de forma sencilla y elegante.

🔹 `.map()` – Transformar elementos

El método .map() recorre todos los elementos de un arreglo y devuelve un nuevo arreglo con los resultados de aplicar una función a cada elemento.

// Ejemplo: multiplicar todos los números por 2
const numeros = [1, 2, 3, 4];
const duplicados = numeros.map(num => num * 2);

console.log(duplicados); // [2, 4, 6, 8]

En React, .map() se usa frecuentemente para renderizar listas dinámicas:

function ListaUsuarios() {
  const usuarios = ["Ana", "Luis", "Carla", "Pablo"];

  return (
    <ul>
      {usuarios.map((usuario, index) => (
        <li key={index}>{usuario}</li>
      ))}
    </ul>
  );
}

export default ListaUsuarios;

👉 Cada elemento del array genera un <li>. En React es importante incluir una key única al mapear listas.

🔹 `.filter()` – Filtrar elementos

El método .filter() devuelve un nuevo arreglo solo con los elementos que cumplan una condición específica.

// Ejemplo: filtrar números mayores que 5
const numeros = [3, 7, 2, 8, 5];
const mayores = numeros.filter(num => num > 5);

console.log(mayores); // [7, 8]

En React, se usa para mostrar solo ciertos elementos, por ejemplo usuarios activos:

function UsuariosActivos() {
  const usuarios = [
    { nombre: "Ana", activo: true },
    { nombre: "Luis", activo: false },
    { nombre: "María", activo: true },
  ];

  const activos = usuarios.filter(u => u.activo);

  return (
    <ul>
      {activos.map((u, i) => (
        <li key={i}>{u.nombre}</li>
      ))}
    </ul>
  );
}

export default UsuariosActivos;

👉 .filter() no modifica el array original, devuelve uno nuevo con los elementos que pasen el filtro.

🔹 `.reduce()` – Reducir a un solo valor

El método .reduce() toma todos los elementos de un arreglo y los “reduce” a un solo resultado, acumulando valores paso a paso.

// Ejemplo: sumar todos los valores
const numeros = [10, 20, 30, 40];
const total = numeros.reduce((acumulador, actual) => acumulador + actual, 0);

console.log(total); // 100

También se puede usar con objetos o arreglos más complejos:

// Ejemplo: sumar el precio total de productos
const productos = [
  { nombre: "Teclado", precio: 25 },
  { nombre: "Ratón", precio: 15 },
  { nombre: "Monitor", precio: 100 }
];

const total = productos.reduce((acc, item) => acc + item.precio, 0);

console.log("Total:", total); // Total: 140

⚛️ Ejemplo combinado en React

Aquí un ejemplo más real: una lista de productos que usamos filter() para mostrar solo los disponibles y reduce() para calcular el total.

function Tienda() {
  const productos = [
    { id: 1, nombre: "Laptop", precio: 1200, disponible: true },
    { id: 2, nombre: "Tablet", precio: 500, disponible: false },
    { id: 3, nombre: "Monitor", precio: 300, disponible: true },
  ];

  const disponibles = productos.filter(p => p.disponible);
  const total = disponibles.reduce((acc, p) => acc + p.precio, 0);

  return (
    <div>
      <h2>Productos Disponibles</h2>
      <ul>
        {disponibles.map(p => (
          <li key={p.id}>{p.nombre} - ${p.precio}</li>
        ))}
      </ul>
      <h3>Total: ${total}</h3>
    </div>
  );
}

export default Tienda;

🧠 En resumen:

Método	Descripción	Devuelve	Uso típico en React
`.map()`	Transforma cada elemento del array.	Nuevo array del mismo tamaño.	Renderizar listas dinámicas.
`.filter()`	Filtra elementos según una condición.	Nuevo array con menos elementos.	Mostrar solo ciertos datos (usuarios activos, tareas pendientes...).
`.reduce()`	Combina todos los valores en un único resultado.	Un valor (número, objeto, etc.).	Sumar totales o calcular estadísticas.

🧱 Desestructuración en React

La desestructuración es una característica de JavaScript (ES6) que permite extraer valores de objetos o arrays y asignarlos directamente a variables individuales. En React, se utiliza frecuentemente con props, hooks y datos de estado para escribir un código más limpio y legible.

Nota: la desestructuración reduce el acceso repetitivo a objetos o matrices, haciendo tu código más simple y elegante.

🔹 Desestructuración de Arrays

Antes de ES6, para obtener valores de un array era necesario acceder a cada elemento por su posición:

// Antes:
const vehicles = ['mustang', 'f-150', 'expedition'];

// Forma antigua
const car = vehicles[0];
const truck = vehicles[1];
const suv = vehicles[2];

console.log(truck); // f-150

Con la desestructuración, podemos hacerlo en una sola línea:

// Con desestructuración:
const vehicles = ['mustang', 'f-150', 'expedition'];

const [car, truck, suv] = vehicles;

console.log(truck); // f-150

El orden es importante: las variables se asignan según la posición en el array. Si solo quieres algunos elementos, puedes omitir los demás dejando comas vacías:

const vehicles = ['mustang', 'f-150', 'expedition'];

// Solo obtener el coche y el SUV:
const [car,, suv] = vehicles;

console.log(suv); // expedition

La desestructuración también es útil cuando una función devuelve un array:

function dateInfo(date) {
  const d = date.getDate();
  const m = date.getMonth() + 1;
  const y = date.getFullYear();
  return [d, m, y];
}

const [day, month, year] = dateInfo(new Date());

console.log(day, month, year); // 12 11 2025

🔹 Desestructuración de Objetos

La desestructuración también se puede usar para extraer valores de objetos:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Desestructurando
let { firstName, lastName, age } = person;

console.log(firstName); // John

El orden no importa cuando trabajamos con objetos, ya que se accede por nombre de propiedad.

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Desestructurando en orden diferente
let { lastName, age, firstName } = person;

console.log(lastName); // Doe

También puedes desestructurar solo las propiedades que te interesen:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Solo extraer el nombre
let { firstName } = person;

console.log(firstName); // John

Si una propiedad puede faltar, puedes establecer valores predeterminados:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50
};

// Valor por defecto para "country"
let { firstName, lastName, age, country = "Norway" } = person;

console.log(country); // Norway

También puedes desestructurar objetos anidados:

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  car: {
    brand: "Ford",
    model: "Mustang"
  }
};

// Desestructuración profunda
let { firstName, car: { brand, model } } = person;

console.log(`Mi nombre es ${firstName}, y conduzco un ${brand} ${model}.`);
// Mi nombre es John, y conduzco un Ford Mustang.

⚛️ Desestructuración en Componentes de React

En React, la desestructuración se usa comúnmente para trabajar con props, hooks y respuestas de API. Hace que el código sea más corto y claro.

Props Desestructuración

Mira la diferencia entre usar y no usar desestructuración:

// Sin desestructuración:
function Greeting(props) {
  return <h1>Hola, {props.name}! Tienes {props.age} años.</h1>;
}

// Con desestructuración:
function Greeting({ name, age }) {
  return <h1>Hola, {name}! Tienes {age} años.</h1>;
}

👉 Usar desestructuración evita repetir props. varias veces.

Ejemplo en acción:

import { createRoot } from 'react-dom/client';

function Greeting({ name, age }) {
  return <h1>Hola, {name}! Tienes {age} años.</h1>;
}

createRoot(document.getElementById('root')).render(
  <Greeting name="John" age={25} />
);

useState Hook y Desestructuración

El hook useState() devuelve un array con dos elementos: el valor actual y la función para actualizarlo. Usamos desestructuración para nombrarlos fácilmente:

import { createRoot } from 'react-dom/client';
import { useState } from 'react';

function Counter() {
  // Desestructurando el array que devuelve useState
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

createRoot(document.getElementById('root')).render(
  <Counter />
);

👉 Sin desestructuración, tendrías que usar algo como state[0] y state[1], lo cual sería mucho menos claro.

🧠 En resumen:

Objetos: const { prop } = objeto;
Arrays: const [a, b] = arreglo;
React: Muy útil para props y hooks (useState, useReducer, etc.)

✨ Operador de Spread (ES6)

El operador de spread (...) fue introducido en ES6 y permite expandir los elementos de un arreglo u objeto donde se esperan múltiples valores. Es muy útil en React para copiar arrays, combinar objetos y pasar props a componentes.

1️⃣ Copiar Arrays

Antes de ES6, copiar un array requería métodos como slice(). Con el operador spread es mucho más simple:

// Copiar un array con spread
const numbers = [1, 2, 3];
const newNumbers = [...numbers];

console.log(newNumbers); // [1, 2, 3]

⚡ Si modificas el nuevo array, el original no se ve afectado, ya que se crea una copia superficial.

2️⃣ Combinar Arrays

Puedes combinar múltiples arrays fácilmente:

const fruits = ['🍎', '🍌'];
const vegetables = ['🥕', '🥦'];
const food = [...fruits, ...vegetables];

console.log(food); // ['🍎', '🍌', '🥕', '🥦']

3️⃣ Agregar elementos al copiar

Puedes agregar nuevos valores mientras haces la copia:

const numbers = [1, 2, 3];
const extended = [0, ...numbers, 4];

console.log(extended); // [0, 1, 2, 3, 4]

4️⃣ Copiar Objetos

El operador spread también funciona con objetos. Es muy útil para mantener el estado inmutable en React:

const user = { name: 'Alice', age: 25 };
const updatedUser = { ...user, city: 'Madrid' };

console.log(updatedUser);
// { name: 'Alice', age: 25, city: 'Madrid' }

🔹 Aquí estamos creando un nuevo objeto updatedUser copiando todas las propiedades de user y agregando una nueva propiedad.

5️⃣ Combinar Objetos

También puedes fusionar varios objetos fácilmente:

const defaults = { theme: 'light', language: 'es' };
const userSettings = { theme: 'dark' };

const settings = { ...defaults, ...userSettings };

console.log(settings); // { theme: 'dark', language: 'es' }

📘 En este ejemplo, la propiedad theme de userSettings sobrescribe la de defaults.

6️⃣ Operador Spread en React

Una aplicación muy común del operador spread en React es pasar todas las props de un objeto a un componente:

// UserCard.jsx
export default function UserCard({ name, age, country }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Edad: {age}</p>
      <p>País: {country}</p>
    </div>
  );
}

// App.jsx
import UserCard from './UserCard';

const user = { name: 'John', age: 30, country: 'Spain' };

function App() {
  return <UserCard {...user} />;
}

✅ El operador ... pasa automáticamente cada propiedad del objeto user como una prop al componente UserCard.

7️⃣ Resumen

Copiar arrays u objetos: const copy = [...array] o {...object}
Combinar valores: [...arr1, ...arr2]
Agregar valores: [newVal, ...arr]
Fusionar objetos: {...obj1, ...obj2}
React props: <Component {...props} />

🚀 El operador de spread es una de las herramientas más poderosas y utilizadas en React moderno.

📦 Módulos en ES6

Los módulos de ES6 permiten dividir el código en archivos separados y reutilizables. Cada módulo puede export (exportar) y import (importar) funciones, variables o clases desde/hacia otros archivos. Esto es fundamental para organizar proyectos React.

🧩 ¿Por qué usar módulos?

Antes de ES6 el código a menudo vivía en un solo archivo o necesitaba herramientas externas. Con módulos nativos puedes mantener cada componente o utilidad en su propio archivo y importar solo lo que necesitas.

1. Exportar (named exports)

Archivo: message.js

// message.js
export function greet(name) {
  return `Hello, ${name}!`;
}

export const greeting = "Welcome to ES6 Modules!";

Archivo que importa:

// main.js
import { greet, greeting } from './message.js';

console.log(greeting);
console.log(greet('John'));

2. Exportación por defecto (default export)

Cuando quieres exportar una cosa principal desde un archivo:

// math.js
export default function add(a, b) {
  return a + b;
}

Y lo importas sin llaves:

// main.js
import add from './math.js';
console.log(add(5, 3)); // 8

3. Exportación combinada (default + named)

// helpers.js
export default function logMessage(msg) {
  console.log('LOG:', msg);
}

export const version = '1.0.0';
export function multiply(a, b) { return a * b; }

Importando:

// main.js
import logMessage, { version, multiply } from './helpers.js';

logMessage('App initialized');
console.log(version);
console.log(multiply(4, 5)); // 20

4. Importar todo el módulo como namespace

// main.js
import * as Utils from './helpers.js';

Utils.logMessage('Using module namespace');
console.log(Utils.multiply(3, 3));

5. Módulos en React (componentes como módulos)

En React cada componente suele ser un módulo. Ejemplo sencillo:

// Greeting.jsx
export default function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// App.jsx
import Greeting from './Greeting.jsx';

function App() {
  return (
    <div>
      <Greeting name="John" />
    </div>
  );
}

export default App;

6. Resumen rápido

export const foo = ... — exportación con nombre.
export default ... — exportación por defecto (una sola por archivo).
import { foo } — importar con nombre.
import Foo — importar default.
import * as Name — importar todo como un namespace.

✅ Consejo: en React, usa export default para componentes principales y named exports para utilidades o varias funciones desde el mismo archivo.

🔹 Operador Ternario (Condicional)

El operador ternario en JavaScript es una forma abreviada de escribir una condición if...else. Su sintaxis es más concisa y se usa ampliamente en React para renderizar contenido condicional.

condición ? expresión_si_verdadera : expresión_si_falsa

El operador ternario evalúa la condición; si es verdadera, ejecuta la primera expresión, y si es falsa, ejecuta la segunda.

1️⃣ Ejemplo básico

const edad = 18;
const mensaje = edad >= 18 ? 'Eres mayor de edad' : 'Eres menor de edad';

console.log(mensaje); // "Eres mayor de edad"

📘 Aquí, si edad es mayor o igual a 18, se asigna el primer texto; de lo contrario, el segundo.

2️⃣ Comparación con `if...else`

El mismo ejemplo con una estructura tradicional sería:

let mensaje;
if (edad >= 18) {
  mensaje = 'Eres mayor de edad';
} else {
  mensaje = 'Eres menor de edad';
}

✅ Como ves, el operador ternario ahorra líneas de código sin perder claridad.

3️⃣ Ternario anidado

También puedes anidar operadores ternarios, aunque se recomienda hacerlo con cuidado para no perder legibilidad:

const nota = 8;
const resultado =
  nota >= 9 ? 'Excelente' :
  nota >= 7 ? 'Notable' :
  nota >= 5 ? 'Aprobado' : 'Suspendido';

console.log(resultado); // "Notable"

⚠️ Aunque es válido, cuando hay muchas condiciones es preferible usar if...else o switch.

4️⃣ Uso del operador ternario en React

El operador ternario es muy usado en React para renderizado condicional. Permite mostrar componentes o elementos dependiendo de una condición.

// Ejemplo de renderizado condicional en React
function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h2>Bienvenido de nuevo!</h2>
      ) : (
        <h2>Por favor, inicia sesión.</h2>
      )}
    </div>
  );
}

✅ Si isLoggedIn es true, muestra “Bienvenido de nuevo”. Si es false, muestra “Por favor, inicia sesión”.

5️⃣ Ternario dentro de JSX

También puedes usarlo dentro de elementos JSX para mostrar estilos, textos o componentes diferentes:

function Status({ online }) {
  return (
    <p style={{ color: online ? 'green' : 'red' }}>
      {online ? '🟢 En línea' : '🔴 Desconectado'}
    </p>
  );
}

🎨 En este caso, tanto el texto como el color cambian según el valor de online.

6️⃣ Resumen

✔️ Sintaxis: condición ? valorSiVerdadero : valorSiFalso
✔️ Ideal para expresiones cortas y renderizado condicional en React
⚠️ Evita anidar demasiados ternarios — puede afectar la legibilidad

🚀 El operador ternario es una herramienta poderosa y compacta para manejar condiciones simples en una sola línea.

🔹 Cadenas de Plantillas (Template Strings)

Las cadenas de plantillas o template strings fueron introducidas en ES6 y permiten crear cadenas de texto más dinámicas y legibles. A diferencia de las comillas simples (' ') o dobles (" "), las cadenas de plantilla usan backticks (` `).

1️⃣ Concatenación tradicional (antes de ES6)

Antes de ES6, para combinar variables dentro de un texto había que usar el operador +:

const nombre = "Juan";
const edad = 28;
const mensaje = "Hola, mi nombre es " + nombre + " y tengo " + edad + " años.";

console.log(mensaje);
// "Hola, mi nombre es Juan y tengo 28 años."

😩 Esto puede volverse difícil de leer cuando se concatenan muchas variables o saltos de línea.

2️⃣ Uso de Template Strings (ES6)

Con las cadenas de plantillas, puedes incrustar variables y expresiones fácilmente usando la sintaxis ${expresión}:

const nombre = "Juan";
const edad = 28;
const mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;

console.log(mensaje);
// "Hola, mi nombre es Juan y tengo 28 años."

✅ Más limpio, más legible y más fácil de mantener.

3️⃣ Multilínea con Template Strings

Antes, para escribir textos con varias líneas, había que usar \n o concatenaciones. Con las template strings, simplemente puedes escribir texto multilínea directamente:

const poema = `Las rosas son rojas,
las violetas azules,
el código es bello,
y tú lo haces en React.`;

console.log(poema);

🌸 Ideal para cadenas largas, HTML dinámico o mensajes formateados.

4️⃣ Expresiones dentro de Template Strings

También puedes incluir expresiones y resultados de funciones directamente dentro de una cadena:

const precio = 120;
const descuento = 0.15;
const total = `Precio final: $${precio - (precio * descuento)}`;

console.log(total);
// "Precio final: $102"

💡 Cualquier expresión válida de JavaScript puede usarse dentro de ${ }.

5️⃣ Template Strings en React

En React, las cadenas de plantillas son muy útiles para generar clases, estilos o contenido dinámico:

// Ejemplo de uso en un componente React
function Welcome({ user }) {
  return (
    <h2>{`¡Bienvenido, ${user.nombre}! Tu rol es ${user.rol}.`}</h2>
  );
}

const user = { nombre: "María", rol: "Administrador" };

🧩 Esto permite combinar variables y texto de manera más fluida dentro del JSX.

6️⃣ Template Strings y HTML dinámico

También puedes construir estructuras HTML con variables:

const titulo = "Curso de ES6";
const autor = "Jorge Ferreira";

const html = `
  <article>
    <h1>${titulo}</h1>
    <p>Autor: ${autor}</p>
  </article>
`;

document.getElementById("demo").innerHTML = html;

🧠 Muy útil para generar bloques dinámicos desde JavaScript o frameworks frontend.

7️⃣ Resumen

✔️ Usan `backticks` en lugar de comillas simples o dobles.
✔️ Permiten incrustar variables con ${variable}.
✔️ Soportan texto multilínea sin caracteres de escape.
✔️ Ideales para HTML o strings dinámicos en React.

🚀 Las template strings hacen tu código más legible, moderno y potente.

← Volver al índice

💡 React y ES6

💡 React y ES6

📌 Índice de esta entrada:

📝 ¿Qué es ES6?

Ejemplo de ES6 básico

Características principales de ES6

⚡ Por qué aprender ES6 para React

1️⃣ Clases y componentes de clase

2️⃣ Funciones de flecha y manejo de eventos

3️⃣ Desestructuración y props

4️⃣ Módulos y import/export

5️⃣ Ventajas de aprender ES6 para React

🔹 Clases en ES6

Ejemplo básico: crear una clase

Métodos en clases

Herencia de clases

🏹 Funciones de flecha (Arrow Functions)

🧩 Antes de ES6

⚡ Con ES6 (Funciones de Flecha)

📥 Funciones de flecha con parámetros

💡 Ejemplo práctico en React

🔍 Diferencia entre función regular y función de flecha con this

📘 Ejemplo con función regular

📗 Ejemplo con función de flecha

✅ Conclusión

🔤 Variables en ES6: let, const y var

📘 var – La forma antigua

🟦 let – Variables con alcance de bloque

🟩 const – Constantes (valores que no cambian)

⚛️ Uso de let y const en React

🧠 En resumen:

🧩 Métodos de Array en ES6: .map(), .filter() y .reduce()

🔹 .map() – Transformar elementos

🔹 .filter() – Filtrar elementos

🔹 .reduce() – Reducir a un solo valor

⚛️ Ejemplo combinado en React

🧠 En resumen:

🧱 Desestructuración en React

🔹 Desestructuración de Arrays

🔹 Desestructuración de Objetos

⚛️ Desestructuración en Componentes de React

Props Desestructuración

useState Hook y Desestructuración

🧠 En resumen:

✨ Operador de Spread (ES6)

1️⃣ Copiar Arrays

2️⃣ Combinar Arrays

3️⃣ Agregar elementos al copiar

4️⃣ Copiar Objetos

5️⃣ Combinar Objetos

6️⃣ Operador Spread en React

7️⃣ Resumen

📦 Módulos en ES6

🧩 ¿Por qué usar módulos?

1. Exportar (named exports)

2. Exportación por defecto (default export)

3. Exportación combinada (default + named)

4. Importar todo el módulo como namespace

5. Módulos en React (componentes como módulos)

6. Resumen rápido

🔹 Operador Ternario (Condicional)

1️⃣ Ejemplo básico

2️⃣ Comparación con if...else

3️⃣ Ternario anidado

4️⃣ Uso del operador ternario en React

5️⃣ Ternario dentro de JSX

6️⃣ Resumen

🔹 Cadenas de Plantillas (Template Strings)

1️⃣ Concatenación tradicional (antes de ES6)

2️⃣ Uso de Template Strings (ES6)

3️⃣ Multilínea con Template Strings

4️⃣ Expresiones dentro de Template Strings

5️⃣ Template Strings en React

6️⃣ Template Strings y HTML dinámico

7️⃣ Resumen

Posted by: Jorge Catalao

Entradas que pueden interesarte

Publicar un comentario

0 Comentarios

Translate

🔍 Diferencia entre función regular y función de flecha con `this`

🔤 Variables en ES6: `let`, `const` y `var`

📘 `var` – La forma antigua

🟦 `let` – Variables con alcance de bloque

🟩 `const` – Constantes (valores que no cambian)

⚛️ Uso de `let` y `const` en React

🧩 Métodos de Array en ES6: `.map()`, `.filter()` y `.reduce()`

🔹 `.map()` – Transformar elementos

🔹 `.filter()` – Filtrar elementos

🔹 `.reduce()` – Reducir a un solo valor

2️⃣ Comparación con `if...else`