تصدير الكود (HTML وReact وTailwind)
صدّر شاشة واحدة أو مشروعًا كاملًا كودَ واجهة أمامية جاهزًا للإنتاج.
آخر تحديث
ما الذي يمكنك تصديره
- شاشة واحدة بصيغة HTML أو مكوّنًا في React.
- مشروعًا كاملًا مشروعَ React متعدد الشاشات، مجمَّعًا وقابلًا للتنزيل أرشيفًا.
والتنسيق بـ Tailwind CSS، مع نسق مشروعك معبَّرًا عنه برموز تصميم، فيحمل الكود النظام نفسه الذي تحمله اللوحة.
تصدير شاشة واحدة
- حدّد الشاشة.
- تصدير ← كود.
- اختر HTML أو React.
- انسخه، أو نزّله.
تصدير مشروع كامل
يجري تصدير المشروع عملًا في الخلفية — فيولّد كل شاشة، ثم يجمّعها في بنية مشروع واحدة. والمشاريع الأكبر تستغرق وقتًا أطول؛ ويمكنك متابعة التقدّم والتنزيل عند الانتهاء.
كيف يبدو الكود
هو كود واجهة أمامية حقيقي ومقروء: شيفرة دلالية، وأصناف Tailwind، ورموز نسق للألوان والخطوط، وصور مشار إليها بروابط من مخزن أصول مشروعك.
وأمران ينبغي الاستعداد لهما:
- الأصول بعيدة افتراضيًا. نزّلها إلى مستودعك قبل الإطلاق، حتى لا يعتمد موقع الإنتاج عندك على روابط أصول UXMagic.
- إنها واجهة أمامية. لا طبقة بيانات ولا توجيه ولا إدارة حالة — أنت من يوصلها بتطبيقك.
التجاوب
يعكس الكود المصدَّر الشاشة التي صدّرتها، بعرض تلك الشاشة. وإن كنت ولّدت نسختين منفصلتين للجوال وسطح المكتب، فصدّرهما معًا وادمجهما عند نقطة التوقف عندك. راجع النسخ المتجاوبة وحسب الجهاز.
مباشرةً إلى مستودع
يمكنك دفع الكود المصدَّر إلى GitHub مباشرة بدل تنزيله — راجع المزامنة مع GitHub.
هل كانت هذه المقالة مفيدة؟