6.10-25. Props por defecto

Props por Defecto en React: Cómo Establecer Valores Predeterminados

Cuando trabajas con componentes en React, es útil definir valores por defecto para las props. Así tus componentes son más robustos y predecibles. ¡Vamos a verlo con ejemplos prácticos!

---

🔹 ¿Por qué usar props por defecto?

✅ Evitar errores cuando faltan props
✅ Hacer componentes más reutilizables
✅ Documentar mejor el comportamiento esperado

---

🔸 Método 1: Usando defaultProps (Clásico)

La forma tradicional (funciona en componentes de clase y funciones):

jsx-Método 1: Usando defaultProps (Clásico)

function Saludo({ mensaje, usuario }) {
  return <h1>{mensaje}, {usuario}!</h1>;
}
// Valores por defecto
Saludo.defaultProps = {
  mensaje: "Hola",
  usuario: "Invitado"
};
// Uso:
<Saludo />                 // Muestra "Hola, Invitado!"
<Saludo usuario="Ana" />   // Muestra "Hola, Ana!"

---

🔸 Método 2: Destructuring con valores por defecto (Moderno)

La forma más usada actualmente con componentes funcionales:

jsx-Método 2: Destructuring con valores por defecto

function TarjetaPerfil({
  nombre = "Usuario",
  puntos = 0,
  premium = false
}) {
  return (
    <div>
      <h2>{nombre}</h2>
      <p>Puntos: {puntos}</p>
      {premium && <span>⭐ Premium</span>}
    </div>
  );
}// Uso:
<TarjetaPerfil />                 // Usa todos los valores por defecto
<TarjetaPerfil nombre="Carlos" /> // Sobrescribe solo nombre

---

🔹 Ejemplo Combinado (Props + PropTypes)

Para máxima robustez, combínalo con PropTypes:

jsx-Ejemplo Combinado (Props + PropTypes)

import PropTypes from 'prop-types';
function Boton({
  texto = "Click aquí",
  color = "azul",
  tamaño = "mediano"
}) {
  // ... implementación ...
}
Boton.propTypes = {
  texto: PropTypes.string,
  color: PropTypes.oneOf(['azul', 'rojo', 'verde']),
  tamaño: PropTypes.string
};
Boton.defaultProps = {
  // Puedes usarlo junto con destructuring
  // (el destructuring tiene prioridad)
};

---

💡 Buenas Prácticas

1. Usa valores por defecto para props opcionales

2. Combina con propTypes para validación (en proyectos sin TypeScript)

3. Prefiere el método de destructuring en componentes funcionales modernos

4. Documenta tus props por defecto con comentarios/JSDoc

---

🚀 Caso Real: Componente de Avatar

jsx-Componente de Avatar-Propspordefecto

function Avatar({
  imagen = "/avatar-default.png",
  tamaño = 40,
  borde = true
}) {
  return (
    <img 
      src={imagen}
      style={{
        width: tamaño,
        height: tamaño,
        borderRadius: borde ? "50%" : 0
      }}
    />
  );
}

¿Qué método prefieres para manejar props por defecto?
¡Compártelo en los comentarios! 👇

 PropTypes en React: Validando tus Props

Los PropTypes son una herramienta esencial en React para validar el tipo de datos que reciben tus componentes. ¡Te evitan muchos errores!

🔹 ¿Por qué usarlos?

✅ Validar el tipo de datos de las props
✅ Detectar errores temprano
✅ Documentar mejor tus componentes

---

🔸 Configuración Básica

Primero, instala o importa la librería (en proyectos modernos ya viene incluida):

jsx

import PropTypes from 'prop-types';

---

🔹 Ejemplos Prácticos

1️⃣ Validación básica de tipos

jsx-Validación básica de tipos

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

Saludo.propTypes = {
  nombre: PropTypes.string,    // Debe ser string
  edad: PropTypes.number      // Debe ser número
};

2️⃣ Props obligatorias (isRequired)

jsx-Props obligatorias (isRequired)

Saludo.propTypes = {
  nombre: PropTypes.string.isRequired,  // ¡Obligatorio!
  edad: PropTypes.number
};

3️⃣ Tipos más comunes

jsx- Tipos más comunes

MiComponente.propTypes = {
  titulo: PropTypes.string,
  activo: PropTypes.bool,
  cantidad: PropTypes.number,
  usuario: PropTypes.object,
  etiquetas: PropTypes.array,
  onClick: PropTypes.func,    // Función
  elemento: PropTypes.node    // ReactNode (JSX válido)
};

---

🔹 Validaciones Avanzadas

1️⃣ Arrays con formato específico

jsx- Arrays con formato específico

Lista.propTypes = {
  colores: PropTypes.arrayOf(PropTypes.string)  // Array de strings
};

2️⃣ Objetos con forma específica

jsx- Objetos con forma específica

Perfil.propTypes = {
  usuario: PropTypes.shape({
    id: PropTypes.number,
    email: PropTypes.string
  })
};

3️⃣ Valores específicos (como enums)

jsx-Valores específicos (como enums)

Boton.propTypes = {
  tipo: PropTypes.oneOf(['primario', 'secundario'])  // Solo estos valores
};

---

💡 Buenas Prácticas

• Usa isRequired para props críticas

• Combínalo con defaultProps para valores por defecto

• En TypeScript se usan interfaces en lugar de PropTypes

jsx

Saludo.defaultProps = {
  edad: 18  // Valor por defecto si no se provee
};

¿Usas PropTypes en tus proyectos? ¡Cuéntame tu experiencia! 🛠️

Valores por Defecto en Props de React

Introducción Clara y Práctica

En React, es crucial manejar props opcionales de forma elegante para:

• ✅ Evitar errores cuando faltan props

• ✅ Mejorar la experiencia de usuario

• ✅ Mantener consistencia en la interfaz

1. El Problema: Props No Definidos

jsx-Props No Definidos

Copy

Download

function Saludo({ usuario }) {
  return <h1>Hola {usuario.nombre}</h1>;
}

// Uso sin prop "nombre"
<Saludo usuario={{ edad: 30 }} /> // Muestra "Hola undefined"

2. Solución: Valores por Defecto con Destructuring

Método 1: En la Destructuración

jsx-Valores por Defecto con Destructuring

function Saludo({ usuario: { nombre = 'Anónimo' } }) {
  return <h1>Hola {nombre}</h1>;
}

Método 2: Usando defaultProps (Legado)

jsx-Usando defaultProps (Legado)

function Saludo({ nombre }) {
  return <h1>Hola {nombre}</h1>;
}

Saludo.defaultProps = {
  nombre: 'Anónimo'
};

Método 3: Con parámetros por defecto

jsx-Con parámetros por defecto

Copy

Download

function Saludo({ usuario = { nombre: 'Anónimo' } }) {
  return <h1>Hola {usuario.nombre}</h1>;
}

3. Ejemplo Completo con Validación

jsx-Completo con Validación

Copy

Download

function TarjetaUsuario({ 
  usuario: { 
    nombre = 'Invitado',
    avatar = '/default-avatar.png',
    seguidores = 0
  } 
}) {
  return (
    <div className="tarjeta">
      <img src={avatar} alt={`Foto de ${nombre}`} />
      <h2>{nombre}</h2>
      <p>Seguidores: {seguidores.toLocaleString()}</p>
    </div>
  );
}

4. Buenas Prácticas

1. Combina con PropTypes:

   jsx-Combina con PropTypes

   Copy

   Download

   import PropTypes from 'prop-types';
   
   TarjetaUsuario.propTypes = {
     usuario: PropTypes.shape({
       nombre: PropTypes.string,
       avatar: PropTypes.string,
       seguidores: PropTypes.number
     })
   };

2. Usa valores realistas:

   • Para nombres: 'Invitado'

   • Para imágenes: URL de imagen por defecto

   • Para números: 0 o null

3. Documenta los valores por defecto:

   jsx

   Copy

   Download

   /**
    * @param {Object} props
    * @param {Object} props.usuario
    * @param {string} [props.usuario.nombre='Invitado'] - Nombre a mostrar
    */

5. Tabla Comparativa: Métodos para Valores por Defecto

Método	Ejemplo	Ventajas	Desventajas
Destructuring	{ nombre = 'Anónimo' }	Moderno, conciso	Solo en ES6+
defaultProps	Component.defaultProps	Compatible con clases	Considerado legacy
Operador OR	`nombre		'Anónimo'`	Simple	No diferencia entre undefined y otros falsy

6. Caso Avanzado: Componentes Reutilizables

jsx-Componentes Reutilizables

Copy

Download

function Boton({
  texto = 'Click aquí',
  estilo = 'primario',
  onClick = () => console.log('Click registrado')
}) {
  const estilos = {
    primario: 'bg-blue-500 text-white',
    secundario: 'bg-gray-200 text-black'
  };

  return (
    <button 
      className={`py-2 px-4 rounded ${estilos[estilo]}`}
      onClick={onClick}
    >
      {texto}
    </button>
  );
}

Conclusión

• Los valores por defecto mejoran la resiliencia de tus componentes

• Combínalos con TypeScript/PropTypes para mejor validación

• Documenta siempre los valores esperados

🔗 Recursos Adicionales:

• Documentación oficial de defaultProps

• Guía de parámetros por defecto en ES6

Próximo tema: Validación avanzada de props con TypeScript.