React js في Magento 2 - المخطط التفصيلي للتكامل

Magento هي دائمًا منصة مفضلة للشركات لبدء متجرها على الإنترنت. ومع ذلك ، نظرًا لميزة Magento ، يقفز المزيد والمزيد من الشركات إلى هذا السوق لتوسيع فرصها وتجارب العملاء. لذلك ، يصبح سوق الإنترنت منافسًا تمامًا. إلى جانب ذلك ، يجب على الشركات التفكير في طرق لجعل متجرهم على Magento أكثر جاذبية. ثم يؤدي إلى تطوير الواجهة الأمامية. كل يوم ، يتم تقديم أدوات جديدة ، مع العديد من المكتبات والأطر للاختيار من بينها. ومن ثم أصبح من الصعب بشكل متزايد على أصحاب الأعمال اتخاذ القرار الأفضل. في هذه المقالة ، سوف نقدم لك إحدى الأدوات الشائعة وهي React js ، وكيفية استخدام React js في Magento 2 .

بعض النقاط البارزة التي يجب أن تعرفها عن React js

ما هو React.js؟

React.js عبارة عن حزمة JavaScript مفتوحة المصدر تهدف إلى إنشاء واجهات مستخدم للتطبيقات أحادية الصفحة. بالنسبة لتطبيقات الويب والأجهزة المحمولة ، يستخدمها الأشخاص لإدارة طبقة العرض. يمكننا أيضًا إنشاء مكونات واجهة مستخدم قابلة لإعادة الاستخدام باستخدام React. كان جوردان ووك ، مهندس برمجيات فيسبوك ، أول من أنشأ React. في عام 2011 ، تم إطلاق React على صفحة الأخبار على Facebook ، تلاها Instagram.com في عام 2012.

ليس من الضروري إعادة تحميل الصفحة عندما يستخدم المطورون React لبناء تطبيقات ويب ضخمة وتعديل البيانات. يتمثل الهدف الرئيسي لـ React في أن تكون سريعة وقابلة للتطوير وسهلة الاستخدام. إنه يعمل فقط على واجهات مستخدم التطبيق. يتعلق هذا بعرض نموذج MVC. يمكن دمجه مع مكتبات أو أطر عمل JavaScript أخرى ، مثل Angular JS في تطبيقات MVC. يُطلق على React JS أيضًا اسم React أو React.js

ما هي ميزات React.js؟

JSX

JSX هو امتداد نحوي لجافا سكريبت. إنها عبارة مستخدمة في React لتعريف مظهر واجهة المستخدم. يتيح لك JSX كتابة هياكل HTML مع كود JavaScript في نفس الملف.

 const name = 'Simplilearn';

 const greet = <h1>Hello, {name}</h1>;

يوضح الكود أعلاه كيفية استخدام JSX في React. إنها ليست سلسلة ولا جزء من HTML. بدلاً من ذلك ، يتم تضمين HTML في كود JavaScript.

نموذج كائن المستند الافتراضي (DOM)

يعتبر React هو نظير DOM الحقيقي خفيف الوزن هو Virtual DOM. تستغرق معالجة DOM في العالم الحقيقي وقتًا أطول بكثير من معالجة DOM الافتراضية. عندما تتغير حالة الكائن ، يقوم Virtual DOM فقط بتحديث هذا الكائن في DOM الحقيقي ، وليس جميعها.

ما هو نموذج كائن المستند (DOM)؟

يتعامل DOM (نموذج كائن الصفحة) مع مستند XML أو HTML كهيكل شجرة ، حيث تمثل كل عقدة قسمًا من المستند ككائن.

كيف يتفاعل Virtual DOM و React DOM مع بعضهما البعض؟

يتلقى VDOM تحديثات تلقائية عندما تتغير حالة كائن في تطبيق React. بعد ذلك ، يقارن حالته السابقة ويحدّث فقط تلك الكائنات الموجودة في DOM الحقيقي ، وليس جميعها. يسمح هذا للأشياء بالتحرك بسرعة ، خاصة عند مقارنتها بتقنيات الواجهة الأمامية الأخرى. لأنه يجب على الآخرين تحديث كل عنصر حتى إذا تغير عنصر واحد فقط في تطبيق الويب.

هندسة عامة

React هي `` عرض '' في بنية وحدة التحكم في عرض النموذج (MVC) ، وهي مسؤولة عن كيفية ظهور التطبيق وشعوره. النموذج والعرض والتحكم (MVC) هو نمط معماري يقسم طبقة التطبيق إلى ثلاثة أجزاء: النموذج ، العرض ، و تحكم. النموذج مسؤول عن جميع المنطق المتعلق بالبيانات ، بينما يكون العرض مسؤولاً عن منطق واجهة المستخدم للتطبيق ، وتعمل وحدة التحكم كحلقة وصل بين النموذج والعرض.

ملحقات

React هو "العرض" في بنية وحدة التحكم في عرض النموذج (MVC) ، وهو المسؤول عن كيفية ظهور التطبيق وشعوره. رد الفعل هو أكثر من مجرد إطار عمل لواجهة المستخدم ؛ يحتوي على عدد كبير من الامتدادات التي تغطي بنية التطبيق بالكامل. يساعد في تطوير تطبيقات الأجهزة المحمولة ويسمح بالعرض من جانب الخادم. يمكن تمديد React باستخدام Flux و Redux ، من بين أشياء أخرى.

ربط البيانات

تظل جميع العمليات معيارية وسريعة منذ ربط بيانات React أحادي الاتجاه. بسبب تدفق البيانات أحادي الاتجاه ، يكون تداخل المكونات الفرعية داخل المكونات الرئيسية أمرًا معتادًا عند العمل في مشروع React.

تصحيح

تطبيقات React بسيطة وسهلة الاختبار نظرًا لوجود مجتمع مطور كبير. يوفر Facebook امتدادًا للمتصفح يجعل تصحيح أخطاء React أسهل وأسرع ، على سبيل المثال ، يضيف هذا الامتداد علامة تبويب React إلى قسم أدوات المطور في متصفح الويب Chrome. تتيح لك علامة التبويب فحص مكونات React في الوقت الفعلي.

المكونات في React

• المكونات هي أجزاء بناء لتطبيق React ، كل منها يمثل جزءًا مختلفًا من واجهة المستخدم.
• بعض جوانب المكونات مذكورة أدناه.
• قابلية إعادة الاستخدام - تم استخدام أحد المكونات ليس فقط في جزء واحد من التطبيق ولكن أيضًا في جزء آخر. هذا يزيد من تطوير المنتج.
• المكونات المتداخلة - يمكن أن يشتمل المكون على مكون آخر.
• طريقة العرض - يجب أن يحدد المكون طريقة عرض تحدد كيفية عرض المكون إلى DOM في أبسط أشكاله.
• خصائص التمرير: يمكن تمرير الخصائص إلى المكون أيضًا. هذه هي الخصائص التي سلمها لها والدها من أجل تحديد القيم.

مزايا رد الفعل

استخدام DOM الظاهري هو كائن JavaScript. نظرًا لأن JavaScript الظاهري DOM أسرع من DOM التقليدي ، سيؤدي ذلك إلى زيادة سرعة التطبيق. إنه متوافق مع أطر مختلفة ويمكن لكل من العميل والخادم استخدامه. تعزز أنماط المكونات والبيانات إمكانية القراءة ، مما يجعل إدارة التطبيقات الكبيرة أسهل.

رد الفعل القيود

نظرًا لأنه لا يغطي سوى طبقة عرض التطبيق ، فستحتاج إلى اختيار تقنيات أخرى للحصول على مجموعة أدوات تطوير كاملة. قد يجد بعض المطورين أن القوالب المضمنة و JSX غير مريحة.

إذن الفوائد التي ستحصل عليها عند دمج React js في Magento 2؟

السؤال الرئيسي الذي يواجهنا الآن هو لماذا يجب أن نستخدم React. هناك العديد من الأنظمة الأساسية مفتوحة المصدر المتاحة للمساعدة في تطوير تطبيقات الويب الأمامية. دعنا نلقي نظرة على كيفية اختلاف React عن التقنيات أو الأطر المنافسة الأخرى. من الصعب تخصيص وقت لتعلم إطار عمل جديد عندما يتغير عالم الواجهة الأمامية على أساس يومي - خاصةً عندما يكون هذا الإطار في نهاية المطاف طريقًا مسدودًا. لذا ، إذا كنت تبحث عن أعظم شيء تالٍ ولكنك تضيع في غابة الإطار ، فإنني أوصي بتجربة React.

بساطة

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

سهل التعلم

React سهلة الفهم لأي شخص لديه فهم أساسي للبرمجة. في المقابل ، يتم وصف Angular و Ember على أنهما "لغات خاصة بالمجال" ، مما يعني أنه من الصعب تعلمها. ما عليك سوى فهم أساسي لـ CSS و HTML للتفاعل.

النهج الأصلي

قد تكون React أداة مفيدة لتطوير تطبيقات الأجهزة المحمولة (React Native). ولأن React من أشد المؤمنين بقابلية إعادة الاستخدام ، فهي تسمح بالكثير من إعادة استخدام الكود. نتيجة لذلك ، يمكننا تطوير تطبيقات لـ iOS و Android والويب في نفس الوقت.

ربط البيانات

يتم استخدام ربط البيانات أحادي الاتجاه في React ، وتنظم بنية تطبيق Flux تدفق البيانات إلى المكونات من خلال نقطة تحكم واحدة تسمى المرسل. من السهل تصحيح أخطاء المكونات المستقلة لتطبيقات ReactJS الكبيرة.

أداء

لا يوجد مفهوم لحاوية تبعية مضمنة في React. وحدات Browserify و Require JS و EcmaScript 6 ، والتي يمكننا الاستفادة منها عبر Babel ، ويمكن استخدام ReactJS-di جميعًا لحقن التبعيات تلقائيًا.

قابلية الاختبار

يعد اختبار تطبيقات ReactJS في غاية السهولة. قد نغير الحالة التي نمررها إلى عرض ReactJS وننظر إلى المخرجات والإجراءات المُفعَّلة والأحداث والوظائف وما إلى ذلك من خلال التعامل مع عروض React كوظائف للحالة.

ثلاث طرق لتطبيق React js في Magento 2

عندما يتعلق الأمر باستخدام React js في تطوير Magento 2 ، فهناك العديد من الخيارات التي يجب مراعاتها. إلى حد كبير ، يعتمد القرار على تفضيلات ومواهب المطور الذي ستوظفه لتطوير Magento PWA. دعنا نلقي نظرة على الخيارات الثلاثة الأساسية.

مع Just ReactJS

تتضمن الطريقة الأولى تعلم ReactJS من الألف إلى الياء. بدلاً من تخصيص الكتل الجاهزة ، فإن هذا يستلزم إنشاء مكونات من الألف إلى الياء. يجب عليك إنشاء الهندسة المعمارية وكل قطعة بمفردك في هذا السيناريو.

عبر PWA Studio

PWA Studio هو مشروع Magento الرسمي لإنشاء تطبيقات الويب التقدمية (PWAs). وهو يتألف من مجموعة من المكونات المبنية مسبقًا والهندسة المعمارية المطلوبة لإنشاء واجهة متجر Magento React.

تجدر الإشارة إلى أن مشروع PWA Studio لا يزال قيد التطوير ، مما يعني أن العديد من أقسام "مربع الأدوات" مفقودة الآن ، والبعض الآخر ليس جاهزًا للاستخدام ، ويفتقر إلى الموثوقية ، وغالبًا لا يعمل بشكل صحيح. ومع ذلك ، في هذه النظرة العامة ، يمكنك أن ترى كيف يتقدم مشروع Magento PWA Studio وتصفح الإمكانات المختلفة التي قد يستخدمها المطورون بالفعل.

استخدام سمات الطرف الثالث (مثل Scandi PWA)

بدائل PWA Studio هي الخيار الثالث الذي يتم استخدامه بشكل متكرر. هذه هي سمات PWA المستندة إلى ReactJS والتي ينتجها مطورو الطرف الثالث.

في وقت كتابة هذا التقرير ، وجدنا فقط سمة واحدة تعمل ، وهي سكاندي PWA. ومع ذلك ، نحن نعلم أن هناك عددًا كبيرًا من الشركات الأخرى التي تعمل على أفكار مماثلة.

من ناحية أخرى ، فإن Scandi PWA هو حل مفتوح المصدر يتضمن مكونات وقدرات جاهزة للاستخدام لإنشاء PWAs على Magento. في خارطة الطريق الشاملة هذه ، قد تتعلم المزيد عن الحلول التي تقدمها

يكمن الاختلاف الأساسي بين Scandi PWA و PWA Studio ، بعبارات بسيطة ، في بنية الوحدات بالإضافة إلى وظائف محددة. عندما يتعلق الأمر بالميزات ، من العدل أن نقول إن بعضها مدمج في Scandi PWA ، بينما يتوفر البعض الآخر في PWA Studio. ولكن ، لنكون صادقين ، فإن PWA Studio و Scandi PWA ليسا مختلفين. على الرغم من اختلاف بنيتهما ، إلا أنهما يحققان نفس النتائج في النهاية.

سيتم تحديد المسار الذي تسلكه من خلال الوظيفة التي ترغب في إضافتها إلى المتجر وميزانيتك وقدرات فريقك. يجب أن يكون لدى المطورين الذين توظفهم معرفة جيدة بـ React.js و Magento لإنشاء PWA مخصص للغاية. إذا كان فريق العمل لديك يفتقر إلى القدرات اللازمة ، فيمكنك الاعتماد على خدمات تطوير Magento PWA.

استنتاج

نوجهك خلال هذه المقالة على أمل أن: لديك نظرة عامة على React js في Magento 2 وكيفية إنشائها. مع الكثير من الميزات المذهلة ، من الجدير بالتأكيد القفز إلى زيادة فعالية متجرك عبر الإنترنت. لذلك ، يمكن لعملك أن يلبي طلب العملاء ويجلب المزيد من الفرص للتطوير في بيئة الإنترنت. ومع ذلك ، إذا كنت لا تزال مرتبكًا بشأن هذه التكنولوجيا ، فإن Magesolution على استعداد لتكون شريكًا لمساعدة عملك. مع العديد من الخبرات في هذا المجال ، نحن واثقون من تقديم أفضل خدمة: Magento Progressive Web Application Development . لذلك ، إذا كانت لديك أي أسئلة ، فاتصل بنا للحصول على مزيد من المعلومات.