Composición de JSX en React

 ¿Puedo asignar un JSX a una variable y después insertar otro JSX como nodo hijo del JSX que está en dicha variable?

Sí, Gabriel 👌. En React podés asignar JSX a una variable, porque JSX al final se compila a llamadas de React.createElement y se comporta como un valor. Lo que no podés hacer es mutar directamente el árbol JSX ya creado (no es un objeto DOM vivo), pero sí podés componer JSX guardado en variables y luego insertarle otros nodos como hijos.

---

🔹 Ejemplo básico

const base = <div className="p-4 bg-gray-100"></div>;

export default function App() {
  return (
    <div>
      {React.cloneElement(base, {}, <p>Este es un hijo insertado</p>)}
    </div>
  );
}

👉 Aquí:

• base es un JSX guardado en una variable.

• Con React.cloneElement podés añadirle hijos (<p>...</p>).

---

🔹 Ejemplo con múltiples hijos dinámicos

const base = <section className="border p-4"></section>;

export default function App() {
  const children = [
    <h2 key="1">Título</h2>,
    <p key="2">Contenido dinámico</p>,
    <button key="3">Acción</button>,
  ];

  return (
    <div>
      {React.cloneElement(base, {}, children)}
    </div>
  );
}

👉 children es un array de JSX, y se inyecta como hijos del base.

---

🔹 Alternativa más común: componer directamente

En lugar de guardar un JSX vacío y luego inyectar, lo más idiomático es usar componentes:

function Base({ children }) {
  return <div className="p-4 bg-gray-100">{children}</div>;
}

export default function App() {
  return (
    <Base>
      <p>Este es un hijo insertado</p>
    </Base>
  );
}

👉 Esto es más declarativo y se entiende mejor que usar cloneElement.

---

✨ Conclusión

• Sí, podés asignar JSX a una variable.

• Para insertar hijos después, usá React.cloneElement.

• En la práctica, lo más limpio es definir un componente que reciba children y componerlo declarativamente.

---

¿Querés que te arme un ejemplo donde un layout base se guarda en una variable y luego se le insertan distintos bloques JSX dinámicamente según un discriminante (tipo de página)?