Vista previa de JSX sin estructurar primero un proyecto de React
JSX no es HTML que se pueda hacer doble clic; Preview Kit y herramientas similares separan la generación de vistas previas del conjunto completo de configuración de Node y React, de modo que los componentes experimentales permanezcan temporales.
HTML sigue ofreciendo una de las estructuras de bucle más simples en el desarrollo web: se crea un archivo, se guarda, se hace doble clic sobre él y el navegador muestra una página. En cambio, las interfaces generadas con React o IA suelen presentarse de la siguiente manera:
App.jsx
Hacer doble clic muestra el código fuente, no una página. Buscar “¿cómo abrir un archivo JSX?” rápidamente conduce a tutoriales sobre herramientas de React. Esta discrepancia merece una explicación más clara, así como un método de vista previa más sencillo cuando el objetivo no es una aplicación completa.
El marcado familiar no convierte a JSX en HTML
A primera vista, JSX puede parecerse a HTML:
<div>
<h1>Hello World</h1>
<p>Welcome to my application.</p>
</div>
Los tags familiares no convierten al archivo en HTML con una extensión diferente. JSX es una sintaxis incrustada en el código de aplicaciones JavaScript, con mayor frecuencia en React, y puede combinar lógica con marcado:
function Welcome({ name }) {
return (
<div>
<h1>Hello, {name}</h1>
</div>
);
}
Las expresiones, propiedades y componentes implican que el navegador necesita una transformación y un proceso de ejecución. Renombrar:
App.jsx
a:
App.html
No se inventa ese pipeline.
Entonces, ¿cómo se supone que normalmente se debe ver JSX?
La ruta estándar es montar el componente dentro de una aplicación React. Una secuencia común sería:
Install Node.js
↓
Create React project
↓
Install dependencies
↓
Add JSX component
↓
Run development server
↓
Open browser
Ese flujo de trabajo es adecuado cuando se está desarrollando una aplicación real. Resulta excesivo cuando solo se necesita examinar un componente.
¿Qué pasa si solo se quiere previsualizar el componente?
Puede haber sido generado por IA. Puede haberlo enviado un compañero de equipo. Tal vez se estén comparando diseños o decidiendo si React es realmente la mejor opción. Crear toda una estructura de proyecto para esos casos parece desproporcionado.
La IA ha hecho que esta situación sea mucho más común
Con frecuencia, los asistentes devuelven JSX cuando alguien esperaba HTML estático. La respuesta instintiva es utilizar toda la tecnología del stack completo: React, Node, dependencias, un servidor de desarrollo y diversas herramientas, incluso cuando la única duda es si la interfaz se ve bien. Esa fricción motivó la creación de una herramienta dedicada a las vistas previas llamada Preview Kit.
El auge del “código temporal”
La velocidad de generación permite realizar más experimentos temporales:
dashboard-a.jsx
dashboard-b.jsx
dashboard-c.jsx
dashboard-d.jsx
Tal vez solo se lance una variante; las demás fueron pruebas. Cuando crear código es barato, inspeccionarlo y desecharlo también debería serlo.
Las vistas previas no son lo mismo que ejecutar una aplicación en producción
Ejecutar una aplicación puede implicar enrutamiento, estado, APIs, autenticación, bases de datos, gráficos de dependencias, optimización de compilación y pruebas. Previsualizar un prototipo suele requerir solo: ¿cómo se ve esta interfaz? Forzar que ambas tareas pasen por la misma configuración de proyecto añade fricción que ninguna de las partes necesita.
Dónde encaja una aplicación de previsualización dedicada
Preview Kit es una aplicación para Windows dirigida a la fase de previsualización: tienes un archivo, lo abres y ves su renderizado. Los formatos soportados incluyen:
JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS
y tipos relacionados. No reemplaza a VS Code, React, Vue ni a un servidor de desarrollo adecuado. Cubre el momento antes de que sea necesario utilizar esas herramientas.
Considere un componente TSX
Un asistente podría emitir:
function UserCard() {
return (
<div className="card">
<h2>Alex</h2>
<p>Frontend Developer</p>
<button>View Profile</button>
</div>
);
}
guardado como:
UserCard.tsx
Evaluar la tarjeta no requiere un formulario completo. Una vista previa impide que los experimentos pequeños se conviertan automáticamente en proyectos.
La misma idea se aplica a Vue
Puede recibir:
ProductCard.vue
con un template como este:
<template>
<div class="product-card">
<h2>Product Name</h2>
<button>Buy Now</button>
</div>
</template>
El acceso al código fuente para editar es diferente de ver el componente renderizado. Ambas vistas son importantes; no deberían requerir el mismo esfuerzo de configuración.
Markdown tiene el mismo concepto
Un encabezado como este:
# My Documentation
o texto de cuerpo como este:
This is **important**.## Installation1. Download the application.
2. Open the file.
3. Start working.
sirve en su formato original al editar y resulta útil una vez renderizado al leer. La lección no trata sobre extensiones. El código fuente y la vista previa son dos formas de ver el mismo elemento.
Por qué esto es más importante ahora
El trabajo asistido por IA genera archivos fuera de los árboles de proyecto tradicionales: maquetas de interfaz, componentes React o Vue, SVGs, notas en Markdown, experimentos con CSS. La necesidad principal suele ser la inspección, no el despliegue. Una vista previa rápida cierra esa brecha.
Un ciclo de experimentación mejor
En lugar de:
Generate code
↓
Create project
↓
Install dependencies
↓
Configure environment
↓
Run project
↓
See result
prefiera:
Generate
↓
Preview
↓
Evaluate
↓
Improve
y solo entonces:
Build the actual project
La experimentación y la producción permanecen separadas, lo cual coincide con la sensación real que se tiene al trabajar con flujos de trabajo generativos.
No todo archivo necesita un proyecto
Un archivo no implica necesariamente “crear un repositorio”. A veces significa “echarle un vistazo”. Los diseñadores envían SVGs; los modelos generan JSX; los compañeros comparten contenido en Markdown; las configuraciones llegan en formato JSON. La comprensión precede a la edición o al envío.
La brecha que motivó la herramienta
El producto nació de un pequeño problema: un archivo JSX generado que era más difícil de previsualizar de lo esperado. La generación se ha vuelto más sencilla; la previsualización no ha mantenido el mismo ritmo. La herramienta existe precisamente para cubrir ese paso faltante.
Acortar el camino desde el archivo hasta la renderización
El objetivo es reducir la distancia entre un archivo y su previsualización, partiendo de “veamos qué es esto” en lugar de “¿cómo configuro una cadena de herramientas?”. Esto ayuda con:
.jsx
.tsx
.vue
.html
.md
.json
.css
.scss
y otros formatos compatibles.
El panorama general
No se trata solo de JSX. Cuando generar código es más económico, los experimentos se multiplican. Cuando los experimentos aumentan, la inspección rápida cobra mayor valor. Las herramientas que eliminan la configuración innecesaria se ganan su lugar.
No siempre es necesario construir primero
A veces el orden correcto no es crear → probar → decidir. A veces es generar → ver vista previa → decidir → crear. Este ciclo más sencillo se aplica cuando se recibe un archivo .jsx inesperado y se desea ver el diseño antes de comprometerse con una aplicación React, una cadena de herramientas Node y un largo registro de instalación.
Preview Kit
Preview Kit es una aplicación para Windows que permite ver vistas previas de formatos relacionados con desarrollo y web, como JSX, TSX, Vue, HTML, Markdown, JSON, CSS y SCSS. Está diseñada para situaciones en las que el archivo ya existe y una configuración de desarrollo completa sería excesiva: basta con abrir el archivo, ver el resultado y luego decidir qué hacer a continuación.
Ficha de Preview Kit en Microsoft Store
Lecturas relacionadas
- JSX no es HTML dentro de JavaScript: es un paso de compilación — El JavaScript puro no puede analizar la interfaz de usuario con corchetes angulares; JSX es una sintaxis similar al HTML que Babel o Vite reescriben en llamadas a createElement antes de que el navegador la ejecute.
- Utiliza DHTMLX React Gantt con Remix para aplicaciones de planificación de proyectos — Conecta DHTMLX React Gantt a las rutas de Remix con una configuración estable, callbacks data.save y acceso opcional a la API imperativa, sin necesidad de soluciones alternativas para SSR.