Vue Academy · Pelajaran

JSX di Vue 3 dengan Vite

@vitejs/plugin-vue-jsx, pragma JSX, komponen fungsional, serta kompromi JSX dibandingkan template.

JSX di Vue 3 dengan Vite adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

JSX di Vue 3

JSX memungkinkan Anda menulis sintaks yang menyerupai markup di dalam JavaScript, yang dikompilasi menjadi pemanggilan h. Vue 3 mendukung JSX melalui pengaya Babel khusus yang terhubung ke Vite.

Menginstal Pengaya

Paket resminya adalah @vitejs/plugin-vue-jsx. Instal paket tersebut sebagai dependensi pengembangan bersama pengaya Vue biasa.

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

Mengonfigurasi vite.config.ts

Tambahkan vueJsx() ke array plugins di vite.config.ts. Pengaya ini harus dicantumkan agar Vite mengubah berkas JSX.

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

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

Ekstensi Berkas .tsx

Komponen yang ditulis dalam JSX menggunakan ekstensi .tsx (atau .jsx). Pengaya tersebut hanya memproses berkas dengan ekstensi ini.

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

Komponen Fungsional

Komponen paling sederhana adalah fungsi panah yang mengembalikan elemen JSX. Kelas dan teksnya tampil seperti pada HTML.

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

export default Comp;

Atribut Kelas, Bukan className

Berbeda dari React, JSX Vue menggunakan class, bukan className. Hal yang sama berlaku untuk for pada label.

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

Nilai Dinamis

Sisipkan ekspresi di dalam kurung kurawal. Ref reaktif dibaca dengan .value di dalam badan render.

import { ref } from "vue";

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

Penangan Peristiwa dengan camelCase

Pendengar menggunakan awalan on dalam camelCase: onClick, onInput, onMouseenter. Penangannya berupa fungsi.

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

Perenderan Bersyarat

JSX tidak memiliki v-if. Gunakan operator ternary atau ekspresi logis untuk menghasilkan elemen secara bersyarat.

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

Merender Daftar

Ganti v-for dengan map. Berikan key pada setiap elemen, sama seperti pada templat.

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

Menggunakan defineComponent untuk Properti

Untuk properti bertipe dan siklus hidup, bungkus logika Anda dalam defineComponent. Fungsi setup mengembalikan fungsi render yang mengembalikan JSX.

import { defineComponent } from "vue";

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

Pemeriksaan Singkat

Pengaya apa yang mengaktifkan JSX dalam proyek Vite Vue 3, dan di mana pengaya tersebut ditempatkan?

Ringkasan

JSX Vue 3 diaktifkan dengan menambahkan vueJsx() dari @vitejs/plugin-vue-jsx ke array pengaya Vite, lalu menulis komponen dalam berkas .tsx. Gunakan class, bukan className, gunakan penangan onClick dalam camelCase, dan gunakan defineComponent jika Anda memerlukan properti bertipe.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “JSX di Vue 3 dengan Vite” gratis?

Ya — teks lengkap “JSX di Vue 3 dengan Vite” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “JSX di Vue 3 dengan Vite”?

@vitejs/plugin-vue-jsx, pragma JSX, komponen fungsional, serta kompromi JSX dibandingkan template. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “JSX di Vue 3 dengan Vite” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy