17. Objetos en jsx y el contenido

  

Trabajo con Objetos en JSX (React)

Introducción

En React, JSX nos permite mezclar JavaScript con HTML para crear componentes dinámicos. Una de las características más útiles es poder mostrar datos de objetos directamente en nuestra interfaz.

---

1. Convención de Nombres de Componentes

Importancia de las Mayúsculas

jsx

// ✅ CORRECTO - Componente con mayúscula inicial
function MiComponente() {
  return <div>Hola Mundo</div>;
}

// ❌ INCORRECTO - No será reconocido como componente
function micomponente() {
  return <div>Hola Mundo</div>;
}

¿Por qué es importante?

• React diferencia componentes de elementos HTML por la mayúscula inicial

• Los componentes con minúscula se interpretan como etiquetas HTML normales

• Esta convención ayuda a mantener el código organizado y legible

---

2. Creando y Mostrando Objetos en JSX

Paso 1: Crear un objeto con datos

jsx

function App() {
  // Creando un objeto con propiedades
  const datos = {
    nombre: "Franck",
    edad: 20,
    ciudad: "Lima"
  };
  
  // Más propiedades pueden ser añadidas
  const datosCompletos = {
    nombre: "Franck",
    edad: 20,
    profesion: "Desarrollador",
    hobbies: ["Programar", "Leer", "Videojuegos"]
  };
}

Paso 2: Mostrar propiedades del objeto en JSX

jsx

function App() {
  const datos = {
    nombre: "Franck",
    edad: 20
  };
  
  return (
    <div>
      <h1>Nombre: {datos.nombre}</h1>
      <p>Edad: {datos.edad} años</p>
    </div>
  );
}

Paso 3: Accediendo a propiedades anidadas

jsx

function App() {
  const usuario = {
    nombre: "Franck",
    detalles: {
      edad: 20,
      email: "franck@ejemplo.com"
    }
  };
  
  return (
    <div>
      <h1>{usuario.nombre}</h1>
      <p>Edad: {usuario.detalles.edad}</p>
      <p>Email: {usuario.detalles.email}</p>
    </div>
  );
}

---

3. Ejemplo Completo: Componente con Objetos

jsx

// Componente Perfil.jsx
function Perfil() {
  // Objeto con información del usuario
  const usuario = {
    nombre: "Franck",
    edad: 20,
    profesion: "Desarrollador Frontend",
    habilidades: ["JavaScript", "React", "CSS", "HTML"],
    contacto: {
      email: "franck@dev.com",
      telefono: "+51 123 456 789"
    }
  };
  
  return (
    <div className="perfil">
      {/* Mostrando propiedades básicas */}
      <h1>👋 Hola, soy {usuario.nombre}</h1>
      <p>📅 Tengo {usuario.edad} años</p>
      <p>💼 {usuario.profesion}</p>
      
      {/* Mostrando array dentro del objeto */}
      <h3>Mis habilidades:</h3>
      <ul>
        {usuario.habilidades.map((habilidad, index) => (
          <li key={index}>{habilidad}</li>
        ))}
      </ul>
      
      {/* Mostrando objeto anidado */}
      <h3>Contacto:</h3>
      <p>📧 {usuario.contacto.email}</p>
      <p>📱 {usuario.contacto.telefono}</p>
    </div>
  );
}

// Componente principal App.jsx
function App() {
  return (
    <div className="App">
      <Perfil />
    </div>
  );
}

---

4. Buenas Prácticas y Consejos

1. Desestructuración para código más limpio

jsx

function Perfil() {
  const usuario = {
    nombre: "Franck",
    edad: 20,
    profesion: "Desarrollador"
  };
  
  // Desestructuración del objeto
  const { nombre, edad, profesion } = usuario;
  
  return (
    <div>
      <h1>{nombre}</h1>
      <p>Edad: {edad}</p>
      <p>Profesión: {profesion}</p>
    </div>
  );
}

2. Validar propiedades opcionales

jsx

function Perfil({ usuario }) {
  // Usar operador de encadenamiento opcional
  return (
    <div>
      <h1>{usuario?.nombre || "Usuario sin nombre"}</h1>
      <p>Edad: {usuario?.edad || "No especificada"}</p>
    </div>
  );
}

3. Usar props para pasar objetos entre componentes

jsx

// Componente padre
function App() {
  const datosUsuario = {
    nombre: "Franck",
    edad: 20
  };
  
  return <Perfil usuario={datosUsuario} />;
}

// Componente hijo
function Perfil({ usuario }) {
  return (
    <div>
      <h1>{usuario.nombre}</h1>
      <p>{usuario.edad} años</p>
    </div>
  );
}

---

5. Ejercicio Práctico

Crea un componente "Producto" que muestre:

jsx

function Producto() {
  // 1. Crea un objeto "producto" con:
  //    - nombre (string)
  //    - precio (number)
  //    - descripcion (string)
  //    - disponible (boolean)
  
  // 2. Muestra estos datos en JSX
  
  // 3. Añade un mensaje condicional:
  //    Si está disponible: "✅ Disponible"
  //    Si no está disponible: "❌ Agotado"
  
  // Tu código aquí:
  const producto = {
    nombre: "Laptop Gaming",
    precio: 1200,
    descripcion: "Laptop para juegos de última generación",
    disponible: true
  };
  
  return (
    <div className="producto">
      <h2>{producto.nombre}</h2>
      <p>Precio: ${producto.precio}</p>
      <p>Descripción: {producto.descripcion}</p>
      <p>{producto.disponible ? "✅ Disponible" : "❌ Agotado"}</p>
    </div>
  );
}

---

6. Resumen de Conceptos Clave

Concepto	Descripción	Ejemplo
Mayúscula inicial	Componentes deben empezar con mayúscula	MiComponente ✅
Objetos en JSX	Usar {} para acceder a propiedades	{objeto.propiedad}
JSON-like	Los objetos en JS son similares a JSON	{nombre: "Franck", edad: 20}
Renderizado	JSX convierte automáticamente valores	<p>{datos.edad}</p>

---

Conclusión

Hemos aprendido que:

1. Los componentes en React deben nombrarse con mayúscula inicial

2. Podemos crear objetos en JavaScript dentro de nuestros componentes

3. JSX nos permite mostrar propiedades de objetos usando {}

4. Podemos mostrar datos complejos (arrays, objetos anidados) directamente en la interfaz

Esta combinación de JavaScript y JSX es fundamental para crear aplicaciones React dinámicas y con datos reales.

---

Recuerda: La práctica constante es clave. Intenta crear diferentes componentes que muestren diversos tipos de objetos y datos para familiarizarte completamente con estos conceptos.