Vue Academy · درس

‏JSX في Vue 3 باستخدام Vite

‏@vitejs/plugin-vue-jsx، وJSX pragma، والمكوّنات الوظيفية، ومقارنة JSX بالقوالب

‏JSX في Vue 3 باستخدام Vite درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

JSX في Vue 3

تتيح JSX كتابة صيغة شبيهة بالترميز داخل JavaScript، وتُترجم إلى استدعاءات h. يدعم Vue 3 JSX من خلال إضافة Babel مخصصة موصولة بـ Vite.

تثبيت الإضافة

الحزمة الرسمية هي @vitejs/plugin-vue-jsx. ثبّتوها كتَبعية تطوير إلى جانب إضافة Vue المعتادة.

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

تهيئة vite.config.ts

أضيفوا vueJsx() إلى مصفوفة plugins في vite.config.ts. يجب إدراجها حتى يحوّل Vite ملفات JSX.

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

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

امتداد الملف .tsx

تستخدم المكوّنات المكتوبة بـ JSX الامتداد .tsx (أو .jsx). ولا تعالج الإضافة إلا الملفات التي تستخدم هذين الامتدادين.

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

مكوّن وظيفي

أبسط المكوّنات هو دالة سهمية تُرجع عنصراً من JSX. وتظهر السمة والنص كما في HTML تماماً.

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

export default Comp;

class وليس className

على خلاف React، تستخدم Vue JSX class وليس className. وينطبق الأمر نفسه على for في التسميات.

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

القيم الديناميكية

ضمّنوا التعبيرات بين قوسين معقوفين. وتُقرأ المراجع التفاعلية باستخدام .value داخل نص التصيير.

import { ref } from "vue";

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

معالجات الأحداث باستخدام camelCase

تستخدم المستمعات السابقة on بصيغة camelCase: onClick وonInput وonMouseenter. وتكون المعالجة دالة.

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

التصيير الشرطي

لا تحتوي JSX على v-if. استخدموا العوامل الثلاثية أو التعبيرات المنطقية لإنتاج العناصر شرطياً.

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

تصيير القوائم

استبدلوا v-for بـ map. ووفروا key لكل عنصر كما تفعلون في القوالب.

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

استخدام defineComponent مع props

من أجل props المكتوبة وتتبّع دورة الحياة، غلّفوا المنطق داخل defineComponent. وتُرجع دالة setup دالة تصيير تُرجع JSX.

import { defineComponent } from "vue";

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

اختبار سريع

ما الإضافة التي تفعّل JSX في مشروع Vue 3 يستخدم Vite، وأين تُضاف؟

خلاصة

يُفعّل JSX في Vue 3 بإضافة vueJsx() من @vitejs/plugin-vue-jsx إلى مصفوفة إضافات Vite، وكتابة المكوّنات في ملفات .tsx. استخدموا class لا className، ومعالجات onClick بصيغة camelCase، وdefineComponent عندما تحتاجون إلى props مكتوبة.

الأسئلة الشائعة

هل درس «‏JSX في Vue 3 باستخدام Vite» مجاني؟

نعم — نص درس «‏JSX في Vue 3 باستخدام Vite» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏JSX في Vue 3 باستخدام Vite»؟

‏@vitejs/plugin-vue-jsx، وJSX pragma، والمكوّنات الوظيفية، ومقارنة JSX بالقوالب تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏JSX في Vue 3 باستخدام Vite»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

شرح متعمق للدالة h()
‏JSX في Vue 3 باستخدام Vite
المكوّنات الديناميكية باستخدام دوال render
نمط المكوّنات عالية الترتيب (HOC)

← العودة إلى Vue Academy