كيف تتفاعل بسرعة في دروبال

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

لكن أولاً ، ما هي React؟

حسب التعريف: "React هي مكتبة JavaScript معرّفة وفعالة ومرنة لبناء واجهات مستخدم الواجهة الأمامية. يتيح لك إنشاء واجهات مستخدم معقدة من أجزاء صغيرة ومعزولة من التعليمات البرمجية تسمى المكونات ".

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

يفضل الكثير من المطورين استخدام JSX لكتابة كود HTML في React. اقرأ لتكتشف لماذا.

لماذا JSX لـ React

يمكن أن يصبح أسلوب وصياغة الترميز في React معقدًا وليست صديقة للمطورين. كما ترى أدناه ، هذه هي الطريقة التي يتم بها إنشاء عنصر HTML في React.

 const element = React.createElement ( 'h1', {className: 'greeting'}, 'Hello, world!' );

وهذه هي الطريقة التي تكتب بها نفس الوظيفة في React باستخدام JSX:

 const element = <h1 className="greeting">Hello World!</h1>

باستخدام JSX ، يمكنك تحديد اسم الفئة كما هو مذكور أدناه باستخدام صيغة XML "className" المحددة مسبقًا. كما ترى ، من الأسهل بكثير ، وبديهية ، وأقل إسهابًا كتابة نفس الكود في JSX. ومن ثم ، يستخدم مجتمع React بأكمله تقريبًا JSX لكتابة رمز React.

ما هو JSX؟ JSX لتقف على JavaScript XML. XML هو بناء جملة سهل الاستخدام للغاية للمطورين. تسهل JSX كتابة وإضافة HTML في React.

ألق نظرة على الفرق بين إنشاء العناصر في React مقابل Javascript. ستلاحظ كيف يمنحك React مزيدًا من المرونة في كتابة التعليمات البرمجية والوصول إليها ، مما يجعل من السهل تطويرها وتصحيحها.

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

تفاعل نماذج البيانات

تحتوي مكونات React على شكلين من البيانات:

• الدعائم
الدعائم هي الخصائص التي تم تلقيها من الأسلاف في التسلسل الهرمي للمكونات. لا يمكن تغييرها أو تحويرها. على سبيل المثال ، لتمرير متغير من عنصر رئيسي إلى مكون فرعي ، يمكنك تمريره كعنصر خاص.
• الدولة
◦ الحالة محلية بالنسبة للمكون ، ويمكن تغييرها من خلال الأحداث. على سبيل المثال ، إذا كان لديك متغير حالة (state.text) ، فيمكن تغيير النص وفقًا لإجراءات مختلفة.

ملاحظة: يمكن أن تتلقى المكونات التابعة كلاً من قيم تلك الحالة والأحداث لتحديث تلك الحالة من خلال الدعائم

كيفية دمج React مع دروبال

سنبدأ أولاً بإنشاء وحدة مخصصة ثم ملف JSX.
لنقم الآن بإنشاء وحدة Drupal المخصصة كما هو موضح أدناه:
إنشاء وحدات / رد فعل / رد فعل. info.yml

 web > modules > react > ! react.info.yml 1 name: React 2 type: module 3 description: 'A module for basic React components.' 4 core_version_requirement: *8.7.7 || ^9

بعد ذلك ، دعنا ننشئ ملف React كما هو موضح أدناه. نقوم بإنشاء ترميز HTML بعلامة H1 ستتم طباعتها في معرف التطبيق التفاعلي.

قم بإنشاء وحدات / رد فعل / js / src / index.jsx

 web > modules > react > js > src > # index.jsx 1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 4 ReactDOM. render( 5 <h1>Hello there - world!</h1>, 6 document. getElementById( ' react—app') 7 );

الوصول إلى ملف JSX بواسطة دروبال

الآن ، لكي يتمكن دروبال من الوصول إلى ملف JSX الذي أنشأناه للتو واستخدامه ، ستحتاج إلى إعداد سلسلة أدوات JavaScript باستخدام Webpack.

على مستوى عالٍ ، نقوم بتهيئة عملية تأخذ ملفات جافا سكريبت المصدر الخاصة بنا ، مثل index.jsx ، وتمريرها عبر خطوات بناء مختلفة ستخرج في النهاية ملفًا واحدًا محسّنًا بتنسيق .js . تتيح لنا خطوة البناء هذه الاستفادة من النظام البيئي React / JavaScript بأكمله أثناء العمل على الوحدة النمطية أو السمة الخاصة بدروبال.

الخطوات الأساسية هي:

• قم بإعداد سلسلة أدوات تقوم بمعالجة أصول JavaScript الخاصة بك في واحد أو أكثر من ملفات JavaScript "المجمعة" مع موقع معروف لا يتغير
• قم بإنشاء مكتبة أصول دروبال تشير إلى الأصول المجمعة من سلسلة أدوات البناء الخاصة بك

الخطوة 1: قم بتثبيت React و Webpack و Babel

قبل تثبيت هذه ، سوف تحتاج إلى التأكد من أن لديك عقدة و nmp جاهزين في بيئة التطوير الخاصة بك. React هي مكتبة Javascript. Babel و webpack عبارة عن مجمّعين تحتاج إلى تحويل .jsx إلى جافا سكريبت للمتصفح. Babel هو أحد أفضل المجمعات المجتمعية لتجميع ملفات .jsx. لتثبيت React و Webpack و Babel ، قم بتشغيل الأوامر التالية من الدليل الجذر لوحدات السمة / رد فعل / ، في جهازك الطرفي

 1 # Create a package.json if you don't have one already. 2 npm init -y 3 # Install the required dependencies 4 npm install —-save react react-dom prop—types 5 npm install —-save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

الخطوة 2: قم بتكوين Webpack باستخدام ملف webpack.config.js

قم بإنشاء ملف webpack.config.js في جذر الوحدة النمطية الخاصة بك: modules / reaction / webpack.config.js

 1 const path = require('path'); 2 3 const config = { 4 entry: { 5 main: ["./js/src/index.jsx"] 6 }, 7 devtool:'source-map', 8 mode:'development', 9 output: { 10 path: path.resolve(__dirname, "js/dist"), 11 filename: '[name].min.js' 12 }, 13 resolve: { 14 extensions: ['.js', '.jsx'], 15 }, 16 module: { 17 rules: [ 18 { 19 test: /\.jsx?$/, 20 loader: 'babel-loader', 21 exclude: /node_modules/, 22 include: path.join(__dirname, 'js/src'), 23 } 24 ], 25 }, 26 }; 27 28 module.exports = config;

الخطوة 3: قم بتكوين Babel باستخدام ملف .babelrc

قم بتوفير بعض التكوين لـ Babel عن طريق إنشاء ملف .babelrc مع الإعدادات المسبقة التالية المتاحة بسهولة (والتي سيتم استخدامها أثناء تجميع كود React) في الدليل الجذر للوحدة النمطية: modules / reaction / .babelrc

 web > modules > react > .babelrc >... 1 { 2 "presets": [ 3 "@babel/preset-env", 4 "@babel/preset-react" 5 ] 6 }

الخطوة 4: أضف بعض البرامج النصية المساعدة إلى package.json

يعد هذا ضروريًا لتشغيل حزمة nmp الخاصة بك لأنها تشير دائمًا إلى حزمة الملف الأساسي package.json قبل أي إجراء.

 > Debug "scripts": { "build": "webpack", "build:dev": "webpack", "start": “webpack —-watch" },

الخطوة 5: قم بتشغيل build لتجميع ملفات jsx إلى ملف js واحد

الآن نحن جاهزون لتجميع ملف JSX.

npm run build (OR) npm run build: dev

يقوم هذا بشكل أساسي بتجميع الملف وفقًا للتكوين في ملف webpack.config والآن يقوم بإنشاء ملف js المترجم إلى المستودع js / src / dist المذكور.

الخطوة 6: تحديد مكتبة أصول دروبال

يمكنك الآن إضافة ملف JavaScript المترجم كأصل دروبال في المكتبة ( libraries.yml ).

 web > modules > react > ! react.libraries.yml 1 react_app: 2 version: 1.0 3 js: 4 js/dist/main.min.js: {minified: true}

أنت الآن جاهز وجاهز لإنشاء بعض مكونات React الرائعة في موقع Drupal الخاص بك.

إليك كيف بدت النتيجة النهائية (أدناه). يمكنك رؤية كتلة React التي قمت بإنشائها باستخدام علامة H1 "Hello Specbee".

افكار اخيرة

ألم يكن ذلك سهلا؟ عند إنشاء مكونات React في Drupal ، تأكد من أن لديك عنصر React dom الذي تم إنشاؤه في Drupal (' رد فعل التطبيق ') وقم دائمًا بإرفاق ملف Javascript (الذي قمنا بتجميعه من ملف React JSX) بمكتبة دروبال. أحب ما قرأته للتو؟ نحن نسعى جاهدين لنشر محتوى قيم لك كل أسبوع. اشترك في النشرة الإخبارية الأسبوعية لتبقى على اطلاع دائم بجميع رؤيتنا.