0Pricing
Vue Academy · Leçon

JSX dans Vue 3 avec Vite

@vitejs/plugin-vue-jsx, pragma JSX, composants fonctionnels et compromis entre JSX et template

JSX dans Vue 3 avec Vite est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

JSX dans Vue 3

JSX vous permet d'écrire une syntaxe semblable au balisage dans JavaScript, qui est compilée en appels à h. Vue 3 prend en charge JSX grâce à un module d’extension Babel dédié intégré à Vite.

Installer le module d’extension

Le paquet officiel est @vitejs/plugin-vue-jsx. Installez-le comme dépendance de développement aux côtés du module d’extension Vue habituel.

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

Configurer vite.config.ts

Ajoutez vueJsx() au tableau plugins dans vite.config.ts. Il doit y être listé pour que Vite transforme les fichiers 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'extension de fichier .tsx

Les composants écrits en JSX utilisent l'extension .tsx (ou .jsx). Le module d’extension traite uniquement les fichiers portant ces extensions.

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

Un composant fonctionnel

Le composant le plus simple est une fonction fléchée qui retourne un élément JSX. La classe et le texte apparaissent exactement comme en HTML.

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

export default Comp;

class et non className

Contrairement à React, le JSX de Vue utilise class, et non className. Il en va de même pour for sur les étiquettes.

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

Valeurs dynamiques

Intégrez des expressions entre accolades. Les références réactives se lisent avec .value dans le corps du rendu.

import { ref } from "vue";

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

Gestionnaires d'événements avec camelCase

Les écouteurs utilisent le préfixe on en camelCase : onClick, onInput, onMouseenter. Le gestionnaire est une fonction.

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

Rendu conditionnel

JSX ne possède pas de v-if. Utilisez des expressions ternaires ou logiques pour produire des éléments sous condition.

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

Rendre des listes

Remplacez v-for par map. Fournissez une key pour chaque élément, comme dans les modèles.

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

Utiliser defineComponent pour les propriétés

Pour des propriétés typées et la gestion du cycle de vie, encapsulez votre logique dans defineComponent. La fonction de configuration retourne une fonction de rendu qui renvoie du JSX.

import { defineComponent } from "vue";

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

Vérification rapide

Quel module d’extension active JSX dans un projet Vite avec Vue 3, et où faut-il le placer ?

Récapitulatif

Le JSX de Vue 3 est activé en ajoutant vueJsx(), provenant de @vitejs/plugin-vue-jsx, au tableau des modules d’extension de Vite, puis en écrivant les composants dans des fichiers .tsx. Utilisez class, et non className, des gestionnaires onClick en camelCase, et defineComponent lorsque vous avez besoin de propriétés typées.

Questions Fréquemment Posées

La leçon « JSX dans Vue 3 avec Vite » est-elle gratuite ?

Oui — le texte complet de « JSX dans Vue 3 avec Vite » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « JSX dans Vue 3 avec Vite » ?

@vitejs/plugin-vue-jsx, pragma JSX, composants fonctionnels et compromis entre JSX et template Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « JSX dans Vue 3 avec Vite » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. La fonction h() en profondeur
  2. JSX dans Vue 3 avec Vite
  3. Composants dynamiques avec les fonctions render
  4. Modèle des composants d’ordre supérieur (HOC)
← Retour à Vue Academy