بيئة تشغيل JSX / React

1ما هي بيئة تشغيل JSX؟#

JSX امتداد لصيغة يستخدمه React يتيح لك كتابة كود يشبه HTML داخل JavaScript. المتصفحات وWebView لا تستطيع تشغيل JSX مباشرة، فيجب تجميعه أولًا.

ميزة بيئة تشغيل JSX تحمّل React وBabel Standalone في تطبيقك وقت التشغيل، فيعمل كود JSX الخام ببساطة، دون أدوات بناء.

2متى تستخدم هذا#

فعّل بيئة تشغيل JSX عندما:

• تكتب كود React/JSX في حقل JS المخصص
• ملفات HTML لديك تحتوي على وسوم <script type="text/babel">
• أنشأت كود JSX بالذكاء الاصطناعي
• تريد استخدام مكوّنات React دون إعداد خط بناء

⚠️ غير مطلوب إذا رفعت مشروع ZIP، فمُجمّع esbuild المدمج يتعامل مع JSX لرفع ZIP بالفعل.

3كيفية التفعيل#

1. اذهب إلى الخطوة 4 (الميزات المتقدمة) في المعالج
2. شغّل «⚛️ بيئة تشغيل JSX / React»
3. اكتب JSX في حقل JS المخصص أو في HTML الخاص بك
4. أنشئ APK كالمعتاد

سيحمّل التطبيق React 18 وBabel من CDN عند أول تحميل للصفحة.

4كتابة JSX في JS المخصص#

مع تفعيل بيئة تشغيل JSX، يمكنك كتابة كود React مباشرة في حقل JS المخصص:

const App = () => (
<div>

<h1>Hello from React!</h1>
<p>This JSX is compiled at runtime</p>

</div>
);

const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(<App />);

سيحوّل Babel كود JSX تلقائيًا قبل التنفيذ.

5استخدام <script type="text/babel"> في HTML#

إذا كان موقعك أو HTML دون اتصال يستخدم وسوم script مع JSX، فعلّمها بـ type="text/babel":

<script type="text/babel">
function Greeting({ name }) {

return <h1>Hello, {name}!</h1>;

}
ReactDOM.createRoot(document.getElementById('app'))

.render(<Greeting name="World" />);

</script>

يجد Babel Standalone هذه الوسوم ويجمّعها تلقائيًا.

6ملاحظات مهمة#

• يتطلب اتصالًا بالإنترنت عند أول تحميل (CDN)
• يضيف تأخيرًا في بدء التشغيل بنحو 200-500 ميلي ثانية لتجميع Babel
• يُحمَّل React 18 وReactDOM 18 تلقائيًا
• يعمل مع كل الميزات الأخرى (الإعلانات والإشعارات والقائمة الجانبية وغيرها)
• للتطبيقات الإنتاجية ذات قواعد الكود الكبيرة، فكّر في استخدام رفع ZIP مع تجميع esbuild بدلًا من ذلك، فهو أسرع ويعمل دون اتصال