Fase 0/1 migración a TSX: islas React con Vite + API JSON (piloto: noticias)

Arquitectura elegida: islas React/TSX montadas sobre las plantillas Django
existentes (django-vite), alimentadas por endpoints JSON bajo /api/. El backend,
las URLs y la auth por sesión se mantienen; se migra sección a sección.

Fase 0 (tooling):
- frontend/ con Vite + React 18 + TypeScript. Build a static/dist con manifest.
- django-vite 3.1 en INSTALLED_APPS + DJANGO_VITE (dev_mode=DEBUG,
  static_url_prefix='dist'). STATIC_URL pasa a '/static/' (absoluto) para que los
  assets no choquen con el <base href> de la plantilla. WhiteNoise sirve el bundle.
- .gitignore: frontend/node_modules y static/dist (artefactos de build).

Fase 1 (piloto: lista de noticias de la portada):
- API: home/views/api.py -> home_news_api (JsonResponse); ruta /api/home/news/
  montada en home/api_urls.py fuera de i18n_patterns.
- React: NewsList.tsx hace fetch de la API y renderiza las noticias (mismas clases
  CSS que el HTML original). Entry src/entries/home.tsx monta en #home-news-app.
- partials/noticias.html: el bucle {% for noticia %} se reemplaza por el contenedor
  de montaje + {% vite_asset %}.

Verificado en producción: manage.py check OK, /api/home/news/ 200, la home incluye
el mount y el <script> del bundle, y el bundle se sirve (200).

Build en deploy: cd frontend && npm run build && collectstatic (ver frontend/README.md).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/NewsList.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import type { Noticia } from '../types'
+
+function formatFecha(iso: string | null): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  if (isNaN(d.getTime())) return iso
+  return d.toLocaleString('es-ES', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function NewsList() {
+  const [noticias, setNoticias] = useState<Noticia[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/home/news/', { headers: { Accept: 'application/json' } })
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`)
+        return r.json()
+      })
+      .then((data: { noticias: Noticia[] }) => {
+        if (!cancelled) setNoticias(data.noticias)
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e))
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  if (error) {
+    return <p>No se pudieron cargar las noticias.</p>
+  }
+  if (noticias === null) {
+    return <p>Cargando noticias…</p>
+  }
+  if (noticias.length === 0) {
+    return <p>No hay noticias disponibles en este momento.</p>
+  }
+
+  return (
+    <>
+      {noticias.map((n) => (
+        <div key={n.id} className="noticia-item">
+          <h3>{n.titulo}</h3>
+          <span className="date">{formatFecha(n.fecha)}</span>
+          <div
+            className="noticia-contenido"
+            dangerouslySetInnerHTML={{ __html: n.contenido }}
+          />
+          {n.enlace && (
+            <p>
+              Enlace:{' '}
+              <a href={n.enlace} target="_blank" rel="noopener noreferrer">
+                aquí
+              </a>
+            </p>
+          )}
+          <br />
+          <hr />
+          <br />
+        </div>
+      ))}
+      <p className="centered third-brown">
+        <i>* Mostrando las últimas 50 noticias</i>
+      </p>
+      <br />
+    </>
+  )
+}

frontend/src/entries/home.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { NewsList } from '../components/NewsList'
+
+// Isla de la portada: monta la lista de noticias (React) donde Django deja
+// el contenedor #home-news-app. El resto de la página sigue siendo Django.
+const el = document.getElementById('home-news-app')
+if (el) {
+  createRoot(el).render(
+    <StrictMode>
+      <NewsList />
+    </StrictMode>,
+  )
+}

frontend/src/types.ts

@@ -0,0 +1,7 @@
+export interface Noticia {
+  id: number
+  titulo: string
+  fecha: string | null
+  contenido: string
+  enlace: string | null
+}