عندما تكتب React، غالبًا ما ترى JSX - وهو بناء جملة يشبه HTML داخل كود JavaScript الخاص بك. ولكن هل تساءلت يومًا كيف يعمل هذا الرمز في المتصفح؟

هذا هو السحر: JSX غير صالح لجافا سكريبت! لا يمكن للمتصفحات فهمها مباشرة. خلف الكواليس، تتدخل أداة مثل Babel لتحويل (أو "تحويل") JSX إلى JavaScript عادي.

العملية:

1.أنت تكتب JSX - يبدو مثل HTML ولكنه موجود داخل مكونات React الخاصة بك. على سبيل المثال:

const element = 
Hello, World!
;

2.يحوله Babel – أثناء عملية الإنشاء، يقوم Babel بتحويل JSX إلى JavaScript خالص باستخدام React.createElement:

const element = React.createElement('h1', null, 'Hello, World!');

3.جافا سكريبت في المتصفح - أخيرًا، جافا سكريبت القياسية هذه هي ما ينفذه المتصفح، مما يؤدي إلى بناء DOM ديناميكيًا.

كيف تعمل بابل؟

Babel هو مترجم JavaScript قوي يمكّنك من استخدام أحدث ميزات JavaScript (بما في ذلك JSX في React) مع ضمان التوافق عبر المتصفحات والبيئات المختلفة. وفيما يلي تفصيل لكيفية عمل بابل:
1.التحليل
يبدأ Babel بتحليل كود JavaScript أو JSX الحديث الخاص بك إلى شجرة تركيب مجردة (AST). AST عبارة عن بنية مفصلة تشبه الشجرة تمثل الكود بطريقة سهلة لـ Babel (والأدوات الأخرى) للتحليل والتلاعب. خلال هذه الخطوة، يقرأ بابل الكود ولكنه لا يغيره بعد.
على سبيل المثال، يأخذ Babel كود JSX التالي:

const element = 
Hello, World!
;

ويولد AST، الذي يمثل بنية هذا الكود.
2.التحويل
بعد ذلك، يطبق بابل سلسلة من المكونات الإضافية على AST. كل مكون إضافي مسؤول عن تحويل أجزاء معينة من AST وفقًا للقواعد التي يحددها. يمكن أن تتضمن هذه التحويلات تحويل بناء جملة JavaScript الحديث (مثل وظائف الأسهم أو غير المتزامن/الانتظار) إلى إصدارات أقدم متوافقة مع المتصفح. بالنسبة لـ JSX، يقوم Babel بتحويل:

const element =

مرحبا بالعالم!

;

const element = 
Hello, World!
;

const element = React.createElement('h1', null, 'Hello, World!');

const element = React.createElement('h1', null, 'Hello, World!');

3. إنشاء الكود بمجرد الانتهاء من جميع التحويلات، يقوم Babel
بإنشاء كود JavaScript من AST المحول. هذه هي الخطوة الأخيرة حيث يتم إنتاج مخرجات يمكن قراءتها بواسطة الإنسان، والتي يمكن للمتصفح أو Node.js تنفيذها.

لنختتم...

لماذا يهم:

تسمح لك JSX بكتابة تعليمات برمجية أكثر سهولة لواجهة المستخدم تعتمد على المكونات، لكن Babel ووقت تشغيل JavaScript هو ما يضفي عليها الحيوية. يساعدك فهم هذا التحويل على استكشاف الأخطاء وإصلاحها بشكل أفضل وكتابة المزيد من تطبيقات React المحسنة.