Vue Academy · Ders

Vite ile Vue 3'te JSX

@vitejs/plugin-vue-jsx, JSX pragma'sı, işlevsel bileşenler ve JSX ile şablon arasındaki ödünler.

2. ders / 413 adım

Vite ile Vue 3'te JSX, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Vue 3'te JSX

JSX, JavaScript içinde işaretlemeye benzer bir sözdizimi yazmanızı ve bunun h çağrılarına derlenmesini sağlar. Vue 3, JSX'i Vite'e bağlanan özel bir Babel eklentisi aracılığıyla destekler.

Eklentiyi Yükleme

Resmî paket @vitejs/plugin-vue-jsx paketidir. Bu paketi, normal Vue eklentisinin yanında bir geliştirme bağımlılığı olarak yükleyin.

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

vite.config.ts Yapılandırması

vite.config.ts içindeki plugins dizisine vueJsx() ekleyin. Vite'in JSX dosyalarını dönüştürmesi için bu eklenti dizide yer almalıdır.

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

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

.tsx Dosya Uzantısı

JSX ile yazılan bileşenlerde .tsx (veya .jsx) uzantısı kullanılır. Eklenti yalnızca bu uzantılara sahip dosyaları işler.

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

İşlevsel Bileşen

En basit bileşen, bir JSX öğesi döndüren ok işlevsidir. Sınıf ve metin, HTML'deki gibi görünür.

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

export default Comp;

Sınıf, className Değil

React'ten farklı olarak Vue JSX'te className yerine class kullanılır. Aynı durum etiketlerdeki for için de geçerlidir.

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

Dinamik Değerler

İfadeleri süslü ayraçların içine yerleştirin. Reaktif başvurular, oluşturma gövdesi içinde .value ile okunur.

import { ref } from "vue";

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

camelCase ile Olay İşleyicileri

Dinleyiciler camelCase biçiminde on ön ekini kullanır: onClick, onInput, onMouseenter. İşleyici bir işlevdir.

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

Koşullu Oluşturma

JSX'te v-if yoktur. Öğeleri koşula bağlı olarak üretmek için üçlü veya mantıksal ifadeler kullanın.

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

Listeleri Oluşturma

v-for yerine map kullanın. Şablonlarda olduğu gibi her öğe üzerinde bir key belirtin.

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

Özellikler için defineComponent Kullanımı

Tür belirtilmiş özellikler ve yaşam döngüsü için mantığınızı defineComponent ile sarın. setup işlevi, JSX döndüren bir oluşturma işlevi döndürür.

import { defineComponent } from "vue";

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

Hızlı Kontrol

Bir Vue 3 Vite projesinde JSX'i hangi eklenti etkinleştirir ve bu eklenti nereye eklenir?

İnteraktif derste cevapla

Özet

Vue 3 JSX, @vitejs/plugin-vue-jsx paketindeki vueJsx() işlevinin Vite eklentileri dizisine eklenmesi ve bileşenlerin .tsx dosyalarında yazılmasıyla etkinleştirilir. className yerine class kullanın, camelCase biçimindeki onClick işleyicilerini tercih edin ve tür belirtilmiş özelliklere ihtiyaç duyduğunuzda defineComponent kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Vite ile Vue 3'te JSX” dersi ücretsiz mi?

Evet — “Vite ile Vue 3'te JSX” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vite ile Vue 3'te JSX” dersinde ne öğreneceğim?

@vitejs/plugin-vue-jsx, JSX pragma'sı, işlevsel bileşenler ve JSX ile şablon arasındaki ödünler. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Vite ile Vue 3'te JSX” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön