🏷️ Uso de atributos y propiedades en JSX con buenas prácticas

🏷️ Uso de atributos y propiedades en JSX con buenas prácticas

En JSX, los atributos funcionan de manera similar al HTML, pero con algunas diferencias clave para integrarse con JavaScript. Por ejemplo, usamos className en lugar de class y htmlFor en lugar de for.

---

1️⃣ Atributos comunes en JSX

• ✅ className – Define clases CSS.
• ✅ id – Identificador único del elemento.
• ✅ htmlFor – Se utiliza en etiquetas <label>.
• ✅ style – Permite aplicar estilos en línea usando un objeto JavaScript.
• ✅ src, alt, href – Funciona igual que en HTML.

// Ejemplo de atributos en JSX
const element = (
  <img 
    src="logo.png" 
    alt="Logo de React" 
    className="logo" 
    style={{ width: '100px', height: 'auto' }} 
  />
);

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

---

2️⃣ Propiedades dinámicas

Puedes asignar valores dinámicos a los atributos usando llaves { } con expresiones JavaScript:

const size = 120;
const url = "logo.png";

const element = <img src={url} alt="Logo dinámico" width={size} />;

ReactDOM.createRoot(document.getElementById('root')).render(element);
  

💡 Esto permite que tus componentes sean más flexibles y reutilizables.

---

3️⃣ Props en componentes

Las propiedades (props) son la forma de pasar información a los componentes. Se utilizan de manera similar a los atributos HTML:

function Button(props) {
  return <button className={props.className}>{props.label}</button>;
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <Button className="primary" label="Click aquí" />
);
  

🔹 Aquí className y label son props que se pasan al componente Button.

---

4️⃣ Buenas prácticas con atributos y props

• ✅ Usa nombres claros y descriptivos para props y atributos.
• ✅ Evita valores mágicos; usa variables o constantes cuando sea posible.
• ✅ Prefiere objetos para estilos en línea y evita cadenas concatenadas.
• ✅ Aprovecha la desestructuración de props para mayor claridad:

function Button({ className, label }) {
  return <button className={className}>{label}</button>;
}
  

💡 Esto hace el código más limpio y fácil de mantener.

---

← Volver al índice