ما الذي يشغّله عارض JSX
مكوّن React، بلغة JSX أو TypeScript، مع الـ hooks والحالة الخاصة به: ما يكتبه Claude وChatGPT حين تطلب منهما تطبيقًا. أسطر import فيه تحمّل المكتبات التي يذكرها، مثل lucide-react وrecharts وframer-motion، ومكوّنات shadcn/ui من @/components/ui. وتأخذ أصناف Tailwind أنماطها أثناء الكتابة.
يعمل المكوّن في إطار معزول على عنوان آخر، فلا يستطيع قراءة solta.now ولا ملفات تعريف الارتباط ولا حساباتك. وما يسجّله، وكل خطأ، يظهر في «وحدة التحكم» تحت الصفحة، مع سطر الكود الذي جاء منه.
افتح Artifact بلغة React من Claude أو ChatGPT
- في المحادثة، انسخ كود المكوّن، من أول سطر
importحتى النهاية. - اضغط «الصق» في الأعلى، أو الصقه في الكود. تظهر الصفحة بجانبه، أو تحته على الهاتف.
- وإن لم يعمل شيء، تذكر «وحدة التحكم» الخطأ والسطر: أخبر بهما الذكاء الاصطناعي، والصق ما يرسله لك.
وإن فُتح الكود نفسه بأي طريقة أخرى، تظهر صفحة فارغة: لماذا يُفتح Artifact بلغة React فارغًا.
ما الذي قد يبدو مختلفًا في الرابط
تُبنى المعاينة هنا، في متصفحك. أما رابطك فيُبنى على خادم Solta، بالمكتبات نفسها وبالإصدارات نفسها ومكوّنات shadcn/ui نفسها، لكن ببرامج أخرى: esbuild بدل Sucrase لكود JSX، وملف أنماط يُجهَّز مسبقًا بدل نسخة Tailwind للمتصفح. وأحيانًا تبدو تفصيلة صغيرة مختلفة في الرابط، وغالبًا ما تكون نمطًا. افتح الرابط مرة قبل أن ترسله.
وهناك حدّان متماثلان في المكانين. المكوّن ملف واحد، لذلك لا يجد import لملف آخر من ملفاتك، مثل ./utils، شيئًا. والمكتبات تأتي من الإنترنت، لذلك تحتاج المعاينة إلى اتصال لتعرض المكوّن.
من المعاينة إلى رابط
حين يعمل، يبنيه «أنشئ رابطًا»، تحت الصفحة، وينشره على عنوانه الخاص، فيُفتح دون حساب على أي هاتف. وتُفتح صفحة HTML العادية في عارض HTML، ويبدأ مختبر HTML بصفحة تكتبها، و«وحدة التحكم» مفتوحة.
أسئلة
ما هو ملف JSX؟
JSX هو JavaScript فيه وسوم تشبه HTML، وهي الطريقة التي تُكتب بها مكوّنات React. ملف jsx أو tsx مكوّن وليس صفحة: يجب أن يُبنى قبل أن يستطيع المتصفح عرضه. وهذا العارض يبنيه أثناء الكتابة.
لماذا يظهر Artifact من Claude فارغًا حين أفتحه؟
الـ Artifact بلغة React مكوّن وليس صفحة. إن فتحته كملف، أو في عارض HTML عادي، فليس فيه ما يستطيع المتصفح رسمه، فيعرض صفحة فارغة. الصقه هنا، والعارض يبنيه.
ما المكتبات التي يستطيع تحميلها؟
React 18.3.1، والحزم التي يستخدمها Claude وChatGPT أكثر من غيرها: lucide-react وrecharts وframer-motion ومكوّنات shadcn/ui وغيرها، بالإصدارات التي يستخدمها أي موقع على Solta. وأي حزمة أخرى من npm تُحمَّل أيضًا، عبر esm.sh.
هل يعمل مع TypeScript؟
نعم. يعمل ملف tsx بعد أن تُحذف منه الأنواع. لا يتحقق العارض من الأنواع، لذلك لا يوقف خطأ في نوع المعاينة.
هل يُرسل الكود الخاص بي إلى أي مكان؟
يبقى محفوظًا في هذا المتصفح إلى أن تضغط «امسح». تجلب المعاينة المكتبات التي يستوردها كودك، من esm.sh ومن Solta، لكن لا تجلب كودك. ولا يُرسل منه شيء إلى Solta حتى تضغط «أنشئ رابطًا».
هل يمكنني فتح ملف jsx من الكمبيوتر؟
نعم. يقبل زر «افتح ملفًا» ملفات jsx وtsx وHTML. على الهاتف، يتناوب «الكود» و«الصفحة» على الشاشة، وعلى الكمبيوتر يعرض «الهاتف» الصفحة بعرض 390 بكسلًا.
كم يبقى الرابط متاحًا؟
الموقع المنشور دون حساب يبقى 24 ساعة. لتحتفظ به، سجّل الدخول من البطاقة التي تعرض عنوانه، فيبقى على العنوان نفسه.