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>

home/api_urls.py

@@ -0,0 +1,7 @@
+"""Rutas de la API JSON (islas React). Se montan bajo /api/ fuera de i18n_patterns."""
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('home/news/', views.home_news_api, name='api_home_news'),
+]

home/templates/partials/noticias.html

@@ -1,4 +1,5 @@
- <!-- main --> 
+{% load django_vite %}
+ <!-- main -->
  <div class="main-page">
             <div class="middle-content middle-content-index">
                 <div class="body-content">
@@ -60,24 +61,10 @@
 </div>
 <div class="box-content">
     <div class="body-box-content">
-        {% for noticia in noticias %}
-            <h3>{{ noticia.titulo }}</h3>
-            <span class="date">{{ noticia.fecha_publicacion }}</span>
-            <div class="noticia-contenido">
-                {{ noticia.contenido|safe }}
-            </div>
-            {% if noticia.enlace %}
-                <p>Enlace: <a href="{{ noticia.enlace }}" target="_blank" rel="noopener noreferrer">aquí</a></p>
-            {% endif %}
-            <br />
-            <hr />
-            <br />
-        {% empty %}
-            <p>No hay noticias disponibles en este momento.</p>
-        {% endfor %}
-        
-        <p class="centered third-brown"><i>* Mostrando las últimas 50 noticias</i></p>
-        <br />
+        <!-- Isla React (Vite): la lista de noticias se renderiza en TSX y se
+             alimenta del endpoint /api/home/news/. Migrado desde el bucle Django. -->
+        <div id="home-news-app"></div>
+        {% vite_asset 'src/entries/home.tsx' %}
     </div>
 </div>
 

home/views/__init__.py

@@ -16,3 +16,4 @@ from .guild import *  # noqa: F401,F403
 from .history import *  # noqa: F401,F403
 from .players import *  # noqa: F401,F403
 from .payments import *  # noqa: F401,F403
+from .api import *  # noqa: F401,F403

home/views/api.py

@@ -0,0 +1,21 @@
+from ._base import *
+
+# Endpoints JSON que alimentan las islas React/TSX del frontend (Vite).
+# Se montan bajo /api/ (fuera de i18n_patterns). De momento con JsonResponse;
+# si crece la superficie de la API se puede introducir DRF.
+
+
+def home_news_api(request):
+    """Últimas noticias para la isla de la portada."""
+    noticias = Noticia.objects.order_by('-fecha_publicacion')[:50]
+    data = [
+        {
+            "id": n.id,
+            "titulo": n.titulo,
+            "fecha": n.fecha_publicacion.isoformat() if n.fecha_publicacion else None,
+            "contenido": n.contenido,
+            "enlace": n.enlace or None,
+        }
+        for n in noticias
+    ]
+    return JsonResponse({"noticias": data})