0Pricing
Vue Academy · Lekcja

JSX w Vue 3 z Vite

@vitejs/plugin-vue-jsx, pragma JSX, komponenty funkcyjne oraz kompromisy między JSX a szablonem.

JSX w Vue 3 z Vite to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

JSX w Vue 3

JSX pozwala zapisywać składnię przypominającą znaczniki wewnątrz JavaScriptu, który jest kompilowany do wywołań h. Vue 3 obsługuje JSX za pośrednictwem dedykowanego pluginu Babel podłączonego do Vite.

Instalowanie pluginu

Oficjalny pakiet to @vitejs/plugin-vue-jsx. Należy zainstalować go jako zależność deweloperską razem ze standardowym pluginem Vue.

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

Konfigurowanie vite.config.ts

Należy dodać vueJsx() do tablicy plugins w pliku vite.config.ts. Musi się tam znajdować, aby Vite przekształcał pliki JSX.

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

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

Rozszerzenie pliku .tsx

Komponenty napisane w JSX używają rozszerzenia .tsx (lub .jsx). Plugin przetwarza tylko pliki z tymi rozszerzeniami.

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

Komponent funkcyjny

Najprostszy komponent to funkcja strzałkowa zwracająca element JSX. Klasa i tekst pojawiają się tak samo jak w HTML-u.

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

export default Comp;

class, nie className

W przeciwieństwie do Reacta JSX w Vue używa class, a nie className. To samo dotyczy for w etykietach.

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

Wartości dynamiczne

Wyrażenia umieszcza się w nawiasach klamrowych. Reaktywne refy odczytuje się za pomocą .value wewnątrz treści renderowania.

import { ref } from "vue";

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

Obsługa zdarzeń w camelCase

Nasłuchiwacze używają prefiksu on w zapisie camelCase: onClick, onInput, onMouseenter. Obsługa zdarzenia jest funkcją.

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

Renderowanie warunkowe

JSX nie ma odpowiednika v-if. Należy używać operatorów trójargumentowych lub wyrażeń logicznych, aby warunkowo tworzyć elementy.

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

Renderowanie list

Dyrektywę v-for należy zastąpić funkcją map. Każdemu elementowi należy nadać key, tak jak w szablonach.

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

Używanie defineComponent dla propsów

W przypadku typowanych propsów i cyklu życia należy umieścić logikę w defineComponent. Funkcja setup zwraca funkcję renderującą, która zwraca JSX.

import { defineComponent } from "vue";

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

Szybki test

Jaki plugin włącza JSX w projekcie Vue 3 z Vite i gdzie należy go dodać?

Podsumowanie

JSX w Vue 3 włącza się przez dodanie vueJsx() z pakietu @vitejs/plugin-vue-jsx do tablicy pluginów Vite oraz tworzenie komponentów w plikach .tsx. Należy używać class, a nie className, obsługi zdarzeń w camelCase, takich jak onClick, oraz defineComponent, gdy potrzebne są typowane propsy.

Często zadawane pytania

Czy lekcja „JSX w Vue 3 z Vite” jest bezpłatna?

Tak — pełny tekst „JSX w Vue 3 z Vite” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „JSX w Vue 3 z Vite”?

@vitejs/plugin-vue-jsx, pragma JSX, komponenty funkcyjne oraz kompromisy między JSX a szablonem. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „JSX w Vue 3 z Vite”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Dogłębne omówienie funkcji h()
  2. JSX w Vue 3 z Vite
  3. Dynamiczne komponenty z funkcjami render
  4. Wzorzec komponentów wyższego rzędu (HOC)
← Powrót do Vue Academy