مقدمة إلى Mitosis

Mitosis هي أداة حديثة تُستخدم لكتابة مكونات واجهة مستخدم واحدة يمكن تحويلها إلى كود متوافق مع أطر عمل متعددة مثل React، Vue، Svelte، Angular، وغيرها. تم تطويرها بواسطة فريق Builder.io، وتُركز على تقليل التكرار في كتابة الكود عند العمل على مشاريع تدعم منصات مختلفة. فلسفة Mitosis هي “اكتب مرة واحدة، انشر في أي مكان” (Write once, run everywhere)، مما يقلل من عبء صيانة الكود ويحسن قابلية إعادة الاستخدام. تعتمد Mitosis على كتابة المكونات بلغة JSX/TSX، ثم تترجمها إلى الكود المناسب لكل إطار عمل.

المزايا والعيوب

المميزات الرئيسية

• اكتب مرة واحدة، استخدم في كل مكان: يتم تحويل المكونات إلى React، Vue، Svelte، وغيرها.
• تعتمد على JSX: صيغة مألوفة لمعظم مطوري الواجهات الأمامية.
• مرونة عالية: يمكن تخصيص الكود الناتج لكل إطار عمل.
• تكامل سهل: يمكن استخدامها في المشاريع الحالية دون مشاكل.

التثبيت

💻 مثال لمكون بسيط

    
import { useState } from '@builder.io/mitosis';

export default function MyComponent(props) {
const [name, setName] = useState('World');

return (
  <div>
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
    <p>Hello, {name}!</p>
  </div>
);
}

  

🔗 روابط مفيدة

• الموقع الرسمي لـ Mitosis
• دليل البدء السريع