Vue Academy · Lección

JSX en Vue 3 con Vite

@vitejs/plugin-vue-jsx, pragma de JSX, componentes funcionales y diferencias entre JSX y plantillas

JSX en Vue 3 con Vite es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

JSX en Vue 3

JSX permite escribir una sintaxis similar al marcado dentro de JavaScript, que se compila en llamadas a h. Vue 3 admite JSX mediante un plugin específico de Babel integrado en Vite.

Instalar el plugin

El paquete oficial es @vitejs/plugin-vue-jsx. Instálelo como dependencia de desarrollo junto con el plugin habitual de Vue.

npm install -D @vitejs/plugin-vue-jsx

Configurar vite.config.ts

Añada vueJsx() al array plugins de vite.config.ts. Debe incluirse para que Vite transforme los archivos JSX.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

La extensión de archivo .tsx

Los componentes escritos en JSX usan la extensión .tsx (o .jsx). El plugin solo procesa archivos con estas extensiones.

// Greeting.tsx
export default () => <div>Hello</div>;

Un componente funcional

El componente más sencillo es una función de flecha que devuelve un elemento JSX. La clase y el texto aparecen igual que en HTML.

const Comp = () => <div class="box">text</div>;

export default Comp;

class, no className

A diferencia de React, Vue JSX usa class, no className. Lo mismo se aplica a for en las etiquetas label.

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

Valores dinámicos

Inserte expresiones entre llaves. Las refs reactivas se leen con .value dentro del cuerpo de renderizado.

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

Manejadores de eventos con camelCase

Los listeners usan el prefijo on en camelCase: onClick, onInput, onMouseenter. El manejador es una función.

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

Renderizado condicional

JSX no tiene v-if. Use expresiones ternarias o lógicas para producir elementos de forma condicional.

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

Renderizar listas

Sustituya v-for por map. Proporcione una key para cada elemento, igual que en las plantillas.

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

Usar defineComponent para las props

Para usar props tipadas y el ciclo de vida, incluya su lógica en defineComponent. La función setup devuelve una función de renderizado que devuelve JSX.

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

Comprobación rápida

¿Qué plugin habilita JSX en un proyecto de Vue 3 con Vite y dónde se incluye?

Resumen

JSX en Vue 3 se habilita añadiendo vueJsx() de @vitejs/plugin-vue-jsx al array de plugins de Vite y escribiendo los componentes en archivos .tsx. Use class, no className, manejadores onClick en camelCase y defineComponent cuando necesite props tipadas.

Preguntas frecuentes

¿La lección «JSX en Vue 3 con Vite» es gratis?

Sí — el texto completo de «JSX en Vue 3 con Vite» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «JSX en Vue 3 con Vite»?

@vitejs/plugin-vue-jsx, pragma de JSX, componentes funcionales y diferencias entre JSX y plantillas Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «JSX en Vue 3 con Vite»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Análisis profundo de la función h()
JSX en Vue 3 con Vite
Componentes dinámicos con funciones render
Patrón de componentes de orden superior (HOC)

← Volver a Vue Academy