🚀 Template React - FiveM

Plantilla limpia con React 18 + Vite para crear NUI en FiveM.

📁 Estructura

template-react/
├── src/
│   ├── App.jsx          ← Panel React
│   └── main.jsx         ← Entry point
├── fivem/
│   ├── fxmanifest.lua   ← Manifest FiveM
│   ├── client.lua       ← Cliente (comando /testreact)
│   └── html/            ← Build se genera aquí
├── index.html           ← HTML desarrollo
├── vite.config.js       ← Config Vite (base: './')
└── package.json         ← Dependencias y scripts

🚀 Instalación

Crear proyecto desde npm (recomendado)

Usa tiged para clonar el paquete publicado en npm como plantilla:

npx tiged npm:template-react-fivem nombre-proyecto
cd nombre-proyecto
npm install
npm run build

Nota: npx tiged permite clonar paquetes de npm como si fueran plantillas. Si más adelante publicas un scaffolder (por ejemplo create-fivem-react), podrás usar:

npm create fivem-react@latest nombre-proyecto

1) Instalar dependencias

cd c:\xampp\htdocs\template-react
npm install

2) Desarrollo (navegador)

npm run dev

Abre: http://localhost:5173

Para simular el juego en el navegador, ejecuta en la consola:

window.postMessage({ action: 'show', username: 'Test' }, '*')

3) Build para FiveM

npm run build

Genera en fivem/html/:

• index.html
• script.js
• style.css

4) Copiar al servidor

fivem/ → TU_SERVIDOR/resources/[local]/template-react/

Renombra la carpeta fivem a template-react en tu servidor.

5) En FiveM

ensure template-react
/testreact

✨ Características

• ✅ React 18 con Vite
• ✅ GetParentResourceName() para NUI fetch dinámico
• ✅ Botón X y tecla ESC para cerrar
• ✅ Bloqueo de controles mientras está abierto
• ✅ Foco NUI robusto al cerrar

🎨 Personalizar

• Edita src/App.jsx para modificar UI/estilos.
• Edita fivem/client.lua para callbacks y lógica adicional.

Luego vuelve a compilar:

npm run build

📋 Comandos

| Comando | Descripción | |---------|-------------| | npm run dev | Desarrollo en navegador | | npm run build | Compilar para FiveM | | npm run watch | Build continuo |

🔧 Troubleshooting

• No carga CSS/JS: verifica que vite.config.js tenga base: './' y que fxmanifest.lua apunte a ui_page 'html/index.html'.
• No abre/cierra con teclas: revisa la consola F8 y confirma que el recurso está iniciado. Reinicia:

  restart template-react

Listo para usar y modificar. ¡Feliz desarrollo! 🎯