Props: Pasando datos

Props: Comunicacion entre componentes

Las props (propiedades) permiten pasar datos de un componente padre a un componente hijo.

Sintaxis basica

// Componente que recibe props

function Saludo(props) {

  return <h1>Hola {props.nombre}!</h1>;

}



// Usando el componente

function App() {

  return (

    <div>

      <Saludo nombre="Maria" />

      <Saludo nombre="Juan" />

    </div>

  );

}



// Renderiza:

// Hola Maria!

// Hola Juan!

Destructuring de props

// Forma comun (destructuring en parametro)

function Saludo({ nombre, edad }) {

  return (

    <div>

      <h1>Hola {nombre}!</h1>

      <p>Tienes {edad} anos</p>

    </div>

  );

}



// Uso

<Saludo nombre="Maria" edad={25} />

Diferentes tipos de props

function Usuario({

  nombre,           // String

  edad,             // Number

  esAdmin,          // Boolean

  hobbies,          // Array

  direccion,        // Object

  onSaludar         // Function

}) {

  return (

    <div>

      <h2>{nombre}</h2>

      <p>Edad: {edad}</p>

      {esAdmin && <span>Admin</span>}

      <ul>

        {hobbies.map(h => <li key={h}>{h}</li>)}

      </ul>

      <p>Ciudad: {direccion.ciudad}</p>

      <button onClick={onSaludar}>Saludar</button>

    </div>

  );

}



// Uso

<Usuario

  nombre="Maria"

  edad={25}

  esAdmin={true}

  hobbies={['leer', 'correr']}

  direccion={{ ciudad: 'Madrid', pais: 'Espana' }}

  onSaludar={() => alert('Hola!')}

/>

Props por defecto

function Boton({ texto = "Click", color = "blue" }) {

  return (

    <button style={{ backgroundColor: color }}>

      {texto}

    </button>

  );

}



// Sin props - usa valores por defecto

<Boton />



// Con props - sobrescribe

<Boton texto="Enviar" color="green" />

Props son de solo lectura

// NUNCA modifiques props directamente

function Mal({ contador }) {

  contador++; // MAL! No hagas esto

  return <p>{contador}</p>;

}



// Las props fluyen de padre a hijo (unidireccional)

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.