Vue Academy · Lezione

JSX in Vue 3 con Vite

@vitejs/plugin-vue-jsx, pragma JSX, componenti funzionali, compromessi tra JSX e template.

JSX in Vue 3 con Vite è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

JSX in Vue 3

JSX consente di scrivere una sintassi simile al markup all'interno di JavaScript, che viene compilata in chiamate a h. Vue 3 supporta JSX tramite un plugin Babel dedicato integrato in Vite.

Installare il plugin

Il pacchetto ufficiale è @vitejs/plugin-vue-jsx. Lo si installa come dipendenza di sviluppo insieme al normale plugin di Vue.

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

Configurare vite.config.ts

Aggiungere vueJsx() all'array plugins in vite.config.ts. Deve essere elencato affinché Vite trasformi i file JSX.

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

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

L'estensione .tsx

I componenti scritti in JSX usano l'estensione .tsx (o .jsx). Il plugin elabora solo i file con queste estensioni.

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

Un componente funzionale

Il componente più semplice è una funzione freccia che restituisce un elemento JSX. La classe e il testo appaiono proprio come in HTML.

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

export default Comp;

class, non className

A differenza di React, JSX di Vue usa class, non className. Lo stesso vale per for nelle label.

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

Valori dinamici

Incorporare le espressioni tra parentesi graffe. I ref reattivi vengono letti con .value all'interno del corpo di rendering.

import { ref } from "vue";

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

Gestori degli eventi in camelCase

I listener usano il prefisso on in camelCase: onClick, onInput, onMouseenter. Il gestore è una funzione.

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

Rendering condizionale

JSX non dispone di v-if. Usare operatori ternari o espressioni logiche per produrre elementi in modo condizionale.

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

Renderizzare le liste

Sostituire v-for con map. Fornire una key per ogni elemento, proprio come nei template.

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

Usare defineComponent per le props

Per avere props tipizzate e il supporto al ciclo di vita, racchiudere la logica in defineComponent. La funzione setup restituisce una funzione di rendering che a sua volta restituisce JSX.

import { defineComponent } from "vue";

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

Verifica rapida

Quale plugin abilita JSX in un progetto Vue 3 con Vite e dove va inserito?

Riepilogo

JSX in Vue 3 si abilita aggiungendo vueJsx() da @vitejs/plugin-vue-jsx all'array dei plugin di Vite e scrivendo i componenti in file .tsx. Usare class, non className, gestori onClick in camelCase e defineComponent quando servono props tipizzate.

Domande Frequenti

La lezione «JSX in Vue 3 con Vite» è gratuita?

Sì — il testo completo di «JSX in Vue 3 con Vite» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «JSX in Vue 3 con Vite»?

@vitejs/plugin-vue-jsx, pragma JSX, componenti funzionali, compromessi tra JSX e template. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «JSX in Vue 3 con Vite»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Approfondimento sulla funzione h()
JSX in Vue 3 con Vite
Componenti dinamici con le funzioni render
Pattern dei componenti higher-order (HOC)

← Torna a Vue Academy