1. Arquitectura de Plantillas React 18
Al iniciar un proyecto React 18 desde la galería de plantillas, GB Coder genera una estructura limpia con package.json, vite.config.ts y App.tsx con soporte completo para autocompletado en Monaco.
// src/App.tsx
import React, { useState } from 'react';
export function App() {
const [metricas, setMetricas] = useState({ peticiones: 120, latencia: 42 });
return (
<main className="p-6">
<h1 className="text-2xl font-bold">Panel de Control</h1>
<p>Peticiones procesadas: {metricas.peticiones}</p>
</main>
);
}2. Compilación de Componentes Vue 3 (.vue)
Las plantillas de Vue 3 compilan archivos .vue en la memoria del navegador usando @vue/compiler-sfc. Puedes utilizar la Composition API con <script setup> y estilos encapsulados.
<!-- src/App.vue -->
<template>
<div class="vue-card">
<h2>{{ mensaje }}</h2>
<button @click="contador++">Contador: {{ contador }}</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const mensaje = ref('Vue 3 en GB Coder');
const contador = ref(0);
</script>3. Ejecución de Comandos en la Terminal xterm.js
Abre la terminal integrada presionando Ctrl+` para ejecutar npm install, correr scripts de prueba o compilar versiones de producción directamente en el micro-SO WebContainer.