البرمجة: Reacthttps://academy.hsoub.com/programming/javascript/react/page/3/?d=2البرمجة: Reactarأساسيات بناء تطبيقات الويبhttps://academy.hsoub.com/programming/javascript/react/%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A7%D8%AA-%D8%A8%D9%86%D8%A7%D8%A1-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-%D8%A7%D9%84%D9%88%D9%8A%D8%A8-r1071/

قبل أن نبدأ البرمجة، سنستعرض بعض المبادئ المعتمدة في تطوير الويب من خلال الاطلاع على هذا التطبيق النموذجي عبر الرابط: studies.cs.helsinki.fi/exampleapp.

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

استعمل متصفح Chrome الآن ودائمًا خلال رحلتك في هذا المنهاج. ثم استخدمه في فتح التطبيق النموذجي، قد يستغرق ذلك وقتًا. القاعدة الأولى في تطوير الويب: ابق طرفية التطوير (Development Console) مفتوحةً دومًا في متصفحك. إن كنت تعمل على نظام التشغيل Windows اضغط زر F12 أو أزرار ctrl-shift-i معًا لفتحه. أما في نظام التشغيل MacOS فاضغط زر F12 أو الأزرار Option-cmd-i معًا.

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

console_001.png

تأكد أن نافذة (Network) مفتوحة، ثم ألغ تفعيل خيار (Disable Cache).

إن حفظ سجل العمل (log) قد يكون مفيدًا، إذ سيحفظ سجلات تنفيذ التطبيق عند إعادة تحميل الصفحة.

لاحظ جيدًا: إن أكثر النوافذ أهميةً في الطرفية هي (Network)، و سنستخدمها بكثرة في البداية.

الطلبية من النوع HTTP GET

يتواصل الخادم (Server) مع المتصفح باستخدام بروتوكول HTTP، وتعرض نافذة (Network) تفاصيل هذا التواصل. فعندما نطلب إعادة تحميل الصفحة ( الزر F5 أو الرمز ↺ على المتصفح)، ستُظهر الطرفية أن حدثين قد وقعا:

  • جلب المتصفح محتوى صفحة التطبيق من الخادم.

  • نزّل المتصفح الصورة Kuva.png.

network_window_002.png]

عليك تكبير شاشة الطرفية لترى ذلك إن كانت شاشة العرض صغيرة. ستظهر لك معلومات أكثر عند النقر على الحدث الأول:

network_window_headers_003.png

يظهر القسم العلوي (General)، أن المتصفح قدم طلبًا إلى العنوان: https://fullstack-exampleapp.herokuapp.com مستخدما أسلوب GET، وأن الطلب كان ناجحًا لأن الخادم استجاب معيدًا رمز حالة (Status Code) قيمته 200.

توجد العديد من الترويسات (Headers) للطلب والاستجابة، يُظهر الشكل التالي بعضها:

headers_004.png

تعطينا ترويسات الاستجابة (Response headers) معلومات عدة، مثل حجم الاستجابة مقدرة بالبايت والوقت الدقيق لها. كذلك الأمر تخبرنا ترويسة نوع المحتوى (Content_Type) أن الاستجابة كانت على شكل ملف نصي بصيغة utf-8، وتحدد المحتوى الذي سيظهر بتنسيق HTML. وبهذا يعلم المتصفح أن الاستجابة ستكون على شكل صفحة HTML قياسية، ليعرضها كصفحة ويب.

تُظهر نافذة (Response) بيانات الاستجابة على شكل صفحة HTML. حيث يحدد القسم Body هيكل الصفحة التي ستُعرض على الشاشة. وتحوي صفحة HTML أيضًا العنصر Div الذي يضم عناصر أخرى مثل معرّف العنوان h1 والرابط a إلى صفحة الملاحظات ومعّرف الصورimg وأخيرًا معرّف الفقرة p الذي يُظهر في مثالنا عدد الملاحظات التي تم إنشاؤها.

response_window_005.png

ونظرًا لوجود معرّف الصور img، أرسل المتصفح طلب HTTP جديد إلى الخادم لإحضار الصورة التي عنوانها kuva.png. يُظهر الشكل التالي تفاصيل الطلب:

headers_image_fetch_006.png

أُرسل طلب HTTP-GET إلى العنوان: https://fullstack-exampleapp.herokuapp.com/kuva.png وتخبرنا ترويسات الاستجابة أن حجم الاستجابة يعادل 89350 بايت، ومحتواها صورة بصيغة png. يستخدم المتصفح هذه المعلومات لإظهار الصورة بشكل صحيح على الشاشة.

يمثل المخطط التتابعي التالي، سلسلة الأحداث التي بدأت بفتح الصفحة https://fullstack-exampleapp.herokuapp.com:

follow_diagram_007.png

أرسل المتصفح في البداية، طلبًا إلى الخادم من نوع HTTP-GET للحصول على شيفرة HTML للصفحة. يخبر معرّف الصور img الموجود في شيفرة HTML المتصفح أن يحضر صورة بعنوان kuva.png. ثم يعالج المتصفح شيفرة HTML والصورة ويظهرهما على الشاشة. مع ذلك يصعب ملاحظة أن معالجة صفحة HTML بدأت قبل أن يحضر المتصفح الصورة من الخادم.

تطبيقات الويب التقليدية

يماثل عمل صفحة التطبيق النموذجي السابق عمل تطبيقات الويب التقليدية. فعند الدخول إلى الصفحة، يحضر المتصفح من الخادم ملف HTML الذي يُنسِّق طريقة عرض الصفحة ومحتواها النصي.

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

تظهر شيفرة HTML لصفحة التطبيق النموذجي بالشكل التالي: 

const getFrontPageHtml = (noteCount) => {
  return(`
    <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <div class='container'>
          <h1>Full stack example app</h1>
          <p>number of notes created ${noteCount}</p>
          <a href='/notes'>notes</a>
          <img src='kuva.png' width='200' />
        </div>
      </body>
    </html>
`)
} 

app.get('/', (req, res) => {
  const page = getFrontPageHtml(notes.length)
  res.send(page)
})

بالطبع ليس عليك استيعاب الشيفرة المكتوبة حاليًا.

يُحفظ محتوى صفحة HTML على شكل قالب نصي (Template String) أو على شكل سلسلة نصية تسمح على سبيل المثال، بتحديد قيمة المتغيرات الموجودة ضمنها. فالقسم الديناميكي (القابل للتغيير) في صفحة التطبيق النموذجي السابق هو القسم الذي يشير إلى عدد الملاحظات المدونة و يدعى notecount. يُستبدَل هذا القسم بالعدد الفعلي للملاحظات notes.length ضمن القالب النصي للصفحة. لاحظ أن وجود شيفرة HTML ضمن الشيفرة السابقة هو أمر غير مُحبَّذ، لكن مبرمجي مدرسة PHP التقليدية يعتبرون ذلك شيئًا طبيعيًا.

يُعتبَر المتصفح في تطبيقات الويب التقليدية "محايدًا". فوظيفته فقط إحضار بيانات HTML من الخادم الذي يقع على عاتقه القيام بكل العمليات المنطقية التي يحتاجها التطبيق. يمكن بناء الخادم باستعمال لغة Java Spring كالخادم الذي استخدم في منهاج Web-palvelinohjelmointi لجامعة هلسنكي، أو استعمال لغة Python Flask كمنهاج tietokantasovellus ، أو باستعمال Ruby and Rails. سيستعمل التطبيق السابق Express من Node.j.s، وسيستخدم هذا المنهاج التقنيتين السابقتين لبناء الخادم.

تشغيل التطبيق من المتصفح

ابق طرفية التطوير مفتوحةً، واحذف ما فيها بالنقر على ?. عندما تنقر الآن على رابط notes، سيرسل المتصفح أربع طلبات HTTP:

request_types_008.png

لهذه الطلبات أنواع مختلفة. ويمثل النوع (مستند document)، شيفرة HTML للصفحة ويظهر بالشكل التالي:

request_type_document_009.png

الآن، عندما نقارن الصفحة الظاهرة على المتصفح مع شيفرة HTML التي يعيدها الخادم، سنلاحظ أن الشيفرة لا تحتوي على قائمة الملاحظات. تحتوي ترويسة القسم html من الشيفرة على العنصر script الذي يطلب من المتصفح إحضار ملف JavaScript يدعى main.js. تظهر شيفرة JavaScript كالتالي: 

var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    const data = JSON.parse(this.responseText)
    console.log(data)

    var ul = document.createElement('ul')
    ul.setAttribute('class', 'notes')

    data.forEach(function(note) {
      var li = document.createElement('li')

      ul.appendChild(li)
      li.appendChild(document.createTextNode(note.content))
    })

    document.getElementById('notes').appendChild(ul)
  }
}

xhttp.open('GET', '/data.json', true)
xhttp.send()

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

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

بعد إحضار ماطلبه عنصرscript مباشرةً، يبدأ المتصفح بتنفيذ الشيفرة. حيث يشير السطرين الأخيرين إلى أن المتصفح سيرسل طلبا من نوع HTTP-GET إلى العنوان التالي data.json/ على الخادم: 

xhttp.open('GET', '/data.json', true)
xhttp.send()

سنكون بذلك قد وصلنا إلى آخر طلب سيظهر ضمن النافذة (Network). يمكننا بطبيعة الحال الوصول إلى هذا العنوان مباشرة من نافذة المتصفح كما في الشكل التالي:

json_data_in_browser_010.png

سنحصل عند فتح العنوان السابق على الملاحظات مكتوبة بصيغة بيانات غير معالجة (raw data) كالتي يستخدمها JSON. لا يمكن للمتصفح في الحالة الطبيعية إظهار هذه البيانات بشكل واضح، لذلك يمكن تثبيب إضافة (Plugin) للتعامل مع هذه الصيغة من البيانات. ثبت على سبيل المثال JSONView على متصفح Chrome ثم أعد تحميل الصفحة. ستظهر البيانات الآن بشكل مفهوم.

rawdata_jsonview_011.png

إذًا، تُحمِّل شيفرة HTML في صفحة الملاحظات Notes بيانات JSON تحتوي على الملاحظات، وترتبها على شكل قائمة نقاط. ويتم ذلك بتنفيذ الشيفرة التالية: 

const data = JSON.parse(this.responseText)
console.log(data)

var ul = document.createElement('ul')
ul.setAttribute('class', 'notes')

data.forEach(function(note) {
  var li = document.createElement('li')

  ul.appendChild(li)
  li.appendChild(document.createTextNode(note.content))
})

document.getElementById('notes').appendChild(ul)

تُنشأ الشيفرة بداية قائمة غير مرتبة ul كما يلي: 

var ul = document.createElement('ul')
ul.setAttribute('class', 'notes')

ثم تضيف العنصرli (الذي يمثل عنصرًا من قائمة نقاط) لكل ملاحظة، وتضع بداخله محتويات الحقل content فقط من الملاحظة. أما القيم الزمنية الموجودة في الحقل date، فلن تستخدم هنا. 

data.forEach(function(note) {
  var li = document.createElement('li')

  ul.appendChild(li)
  li.appendChild(document.createTextNode(note.content))
})

افتح الآن النافذة Console ضمن طرفية التطوير كالتالي:

console_window_012.png

سيظهر النص كاملًا عند النقر على المثلث الصغير في بداية السطر:

console_window_log_013.png

نتج النص السابق عن تعليمة console.log الموجودة في الشيفرة التالية: 

const data = JSON.parse(this.responseText)
console.log(data)

وبالتالي ستطبع الشيفرة تلك البيانات في الطرفية بعد استقبالها من الخادم. ستعتاد التعامل مع نافذة Console ومع تعليمة Console.log خلال مسيرتك في هذا المنهاج.

معالج الأحداث (Event Handler) و دوال رد النداء (Callback functions)

ستبدو لك بنية هذه الشيفرة غريبةً نوعا ما: 

var xhttp = new XMLHttpRequest()

xhttp.onreadystatechange = function() {
    // الشيفرة التي ستعالج استجابة الخادم
}

xhttp.open('GET', '/data.json', true)
xhttp.send()

لقد أُرسِل الطلب إلى الخادم في آخر سطر من الشيفرة، لكن التعليمات التي تعالج الاستجابة أتت في البداية. ما الذي يحدث؟ في هذا السطر: 

xhttp.onreadystatechange = function () {

تم تحديد معالج (handler) للحدث onreadystatechange، الخاص بالكائن xhttp، أثناء إرسال الطلب إلى الخادم. فعندما تتغير حالة هذا الكائن، يستدعي المتصفح الدالة التي تمثل معالج هذا الحدث، ثم تتحق الدالة من أن قيمة الخاصة 'readystate' تساوي 4 (والتي تشير إلى أن العملية قد اكتملت)، وأن قيمة رمز الحالة (status code) لبروتوكول HTTP عند الاستجابة تساوي 200. 

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      // الشيفرة التي ستعالج استجابة الخادم 
  }
}

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

نموذج كائن المستند (Document Object Model DOM)

يمكنك التفكير بصفحة HTML على أنها بنًى شجرية متداخلة. 

html
  head
    link
    script
  body
    div
      h1
      div
        ul
          li
          li
          li
      form
        input
        input

يمكن مشاهدة بنًى كهذه ضمن الطرفية /نافذة Elements:

console_elements_014.png

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

تضيف الشيفرة التالية عقدة جديدة للمتغيِّر ul، ثم تضيف عقدًا ضمنه (عقد أبناء): 

var ul = document.createElement('ul')

data.forEach(function(note) {
  var li = document.createElement('li')

  ul.appendChild(li)
  li.appendChild(document.createTextNode(note.content))
})

وأخيرًا، بعد اكتمال فرع الشجرة الذي يمثله المتحول ul، سنضمه إلى شجرة HTML الممثلة لكامل صفحة الويب في مكانه المناسب. 

document.getElementById('notes').appendChild(ul)

إجراء التعديلات على DOM من الطرفية

يمكننا القيام بالعديد من العمليات على صفحة الويب باستخدام واجهة DOM-API. تدعى العقدة الأعلى في شجرة ملف HTML، كائن document. وللوصول إلى كائن مستند صفحة الويب من الطرفية اكتب كلمة document في النافذة Console.

console_document_015.png

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

list = document.getElementsByTagName('ul')[0]

بعد ذلك سننشئ عنصر li جديد ونكتب نصًا ما داخله: 

newElement = document.createElement('li')
newElement.textContent = 'Page manipulation from console is easy'

وأخيرًا سنضيف العنصر الجديد إلى القائمة: 

list.appendChild(newElement)

console_document_016.png

على الرغم من أن محتوى الصفحة قد تغير على متصفحك، إلا أنَّ هذا التغيير مؤقت. فلو حاولت إعادة تحميل الصفحة ستختفي التغيرات التي أجريتها، ذلك أن التغيرات لم ترفع إلى الخادم. إذًا، ستنشئ شيفرة JavaScript التي أحضرها المتصفح، قائمة بالملاحظات الموجودة فقط في العنوان https://fullstack-exampleapp.herokuapp.com/data.json

صفحات الأنماط الانسيابية Cascading Style Sheets CSS

يحتوي عنصر head في ملف HTML المرتبط بالصفحة Notes، عنصر ارتباط Link، يخبر المتصفح ضرورة إحضار ملف CSS من العنوان main.css. وتعتبر ملفات CSS لغة وصفية (Markup) تستخدم بكثرة في التحكم بمظهر صفحات الويب.

يظهر ملف CSS الذي سيحضره المتصفح كالتالي: 

.container {
  padding: 10px;
  border: 1px solid; 
}

.notes {
  color: blue;
}

يعرّف الملف محددي صنف (Class Selectors). يستخدم محدد الصنف لاختيار أجزاء من صفحة الويب، يطبق عليها قواعد محددة للتحكم بمظهرها. يبدأ سطر تعريف محدد الصنف بنقطة (.)، يليها اسم لهذا الصنف. وتعتبر هذه الأصناف (خاصيات attributes) يمكن إضافتها إلى عناصر HTML للتحكم بمظهر هذه العناصر.

يمكن تفحص خاصيات CSS ضمن نافذة Elements في الطرفية:

console_elements_css_017.png]

لاحظ أن العنصر div يمتلك الصنف container، بينما يمتلك العنصر ul الصنف notes. وبالعودة إلى ملف CSS، فإن أي عنصر يمتلك الصنف container سيُحاط بمربع مستمر سماكته 1 بكسل وسيُضبط بعد العنصر عن محيطه (padding) بمقدار 10 بكسل، وأي عنصر يمتلك الصنف notes سيكون النص فيه أزرق اللون.

يمكن لعناصر HTML امتلاك خاصيات أخرى غير classes. فالعنصر div الذي يحتوي الملاحظات notes، يمتلك خاصية تدعىid. تستخدم JavaScript هذه الخاصية لإيجاد العنصر.

يمكن استخدام النافذة Elements في الطرفية لتغيير مظهر العناصر. وكما هي الحال لن تكون التغييرات التي نجريها دائمة. إن أردت تغييرات دائمة، عليك أن تحفظها في مستند CSS الموجود على الخادم.

console_elements_css_change_018.png

تحميل صفحة تحتوي على شيفرة JavaScript (نظرة ثانية)

دعونا نعيد النظر إلى ما يجري عندما نفتح الصفحة https://fullstack-exampleapp.herokuapp.com/notes من خلال المتصفح.

  • يحضر المتصفح شيفرة HTML التي تحدد هيكل ومحتوى الصفحة من الخادم عبر طلب HTTP-GET.

  • تطلب العناصر link في شيفرة HTML من المتصفح إحضار ملف CSS عنوانه main.css وكذلك ملف JavaScript عنوانه main.js من الخادم.

  • ينفذ المتصفح شيفرة JavaScript.

  • ترسل الشيفرة طلب HTTP-GET إلى العنوان https://fullstackexampleapp.herokuapp.com/data.json الذي سيستجيب بإرسال الملاحظات على شكل بيانات JSON.

  • عندما تصل البيانات، سينفذ المتصفح الشيفرة الموجودة ضمن معالج حدث، وهذا الأخير سيظهر الملاحظات على صفحة الويب مستخدمًا الواجهة DOM-API.

follow_diagram_requests_019.png

الاستمارات Forms وطلبات HTTP-POST

دعونا نتفحص الآن كيف أُضيفت ملاحظة جديدة. تحتوي الصفحة Notes على عنصر استمارة Form، عندما ننقر على الزر الموجود في الاستمارة، سيرسل المتصفح المعلومات التي أدخلها المستخدم إلى الخادم.

form_020.png

لنفتح النافذة Network ولنرى كيف يتم إرسال الاستمارة:

form_send_021.png

نتج عن إرسال الاستمارة خمس طلبات HTTP. يمثل الأول حدث إرسال الاستمارة (Form Submit Event)، وهو طلب HTTP-POST إلى العنوان new_note الموجود على الخادم. سيستجيب الخادم برمز حالة رقمه 302، ويعني هذا أن عملية تحويل عنوان (URL-redirect) قد تمت. في هذه العملية يطلب الخادم من المتصفح إن يرفع طلب HTTP-GET جديد إلى العنوان notes الذي نجده ضمن الموقع Location الذي يمثل جزءًا من ترويسة الاستجابة التي أرسلها الخادم. سيعيد الخادم إذًا، تحميل صفحة الملاحظات. وتسبب تلك العملية ثلاثة طلبات HTTP:

  • إحضار ملف CSS باسم main.css

  • إحضار ملف JavaScript باسم main.js

  • إحضار ملف البيانات data.json

form_send_requests_022.png

يمكن أن نشاهد البيانات التي أرسلت أيضًا في نافذة Network:

form_send_requests_network_023.png

يمتلك معرّف الاستمارةForm خاصيتي action وmethod اللتان تشيرا إلى أن إرسال الاستمارة سيكون على شكل طلب HTTP-POST إلى العنوان new_notes.

form_attributes_024.png

تعتبر الشيفرة الموجودة على الخادم والمسؤولة عن الاستجابة إلى طلب المتصفح بسيطة (لاحظ: هذه الشيفرة موجودة على الخادم، وليست جزءًا من ملف JavaScript الذي يحضره المتصفح): 

app.post('/new_note', (req, res) => {
  notes.push({
    content: req.body.note,
    date: new Date(),
  })

  return res.redirect('/notes')
})

ترسل البيانات ضمن جسم (Body) طلب الإرسال (Post-Request) حيث يتمكن الخادم عندها من الوصول إلى البيانات الموجودة في جسم كائن من النوع Request يدعى req باستعمال الطريقة req.body. ومن ثم ينشأ الخادم كائنًا جديدًا من النوع note، ويضيفه إلى مصفوفة تدعى notes: 

notes.push({
  content: req.body.note,
  date: new Date(),
})

يضم الكائن note حقلين، يدعى الأول content يحوي نص الملاحظة، ويدعى الآخرdate ويحوي معلومات عن تاريخ ووقت إنشاء الملاحظة. طبعًا، لم يحفظ الخادم هذه الملاحظة ضمن قاعدة بيانات، وبالتالي ستختفي الملاحظة الجديدة بانتهاء جلسة العمل.

تقنية AJAX

اعتمدت صفحة Notes في التطبيق السابق أسلوبًا قديمًا في تطوير الويب، بالإضافة إلى استخدامه تقنية AJAX التي تصدرت قائمة تقنيات الويب بداية العقد الماضي.

تأتي التسمية AJAX من (Asynchronous JavaScript and XML). قدم هذا المصطلح في فبراير (شباط) عام 2005، على خلفية التطورات في تقنية المتصفح، لتقدم مقاربةً ثوريةً جديدةً تمكن المتصفح من إحضار محتوى صفحات الويب باستخدام شيفرة JavaScript مدمجة ضمن HTML، دون الحاجة لإعادة تكوين (Rerender) الصفحة من جديد.

استخدمت جميع تطبيقات الويب أسلوب التطبيق النموذجي الذي استعرضناه سابقًا قبل ظهور Ajax. فجميع البيانات التي تعرض في الصفحة، يتم إحضارها عند تنفيذ شيفرة HTML التي أنشأها الخادم. استخدمت صفحة Note تقنية AJAX لإحضار البيانات، بينما استخدمت الطريقة التقليدية في إرسال الاستمارة. وتعكس العناوين التي استخدمها التطبيق أسلوب الزمن القديم اللامبالي، حيث أحضرت بيانات JSON من العنوان: https://fullstack-exampleapp.herokuapp.com/data.json وأرسلت الملاحظات الجديدة إلى العنوان: https://fullstack-exampleapp.herokuapp.com/new_note. لاتعتبر هذه العناوين مقبولة حاليًا، كونها لا تتقيد بالتفاهمات العامة التي جرى الاتفاق عليها بخصوص واجهة التطبيقات RESTful التي سنراها في القسم 3. شاع مصطلح AJAX كثيرًا لدرجة أنه اعتبر من المسلمات، ثم تلاشى في عالم النسان ولم يعد يسمع به أحد من الأجيال الجديدة.

تطبيق من صفحة واحدة

تسلك الصفحة الرئيسية في المثال النموذجي الذي عملنا عليه سلوك صفحة الويب التقليدية. حيث تجري العمليات المنطقية للتطبيق على الخادم، بينما يكّون المتصفح ملف HTML بمقتضى الشيفرة المكتوبة. أما صفحة Notes، فتلقي على المتصفح بعض المسؤولية في توليد شيفرة HTML لعرض الملاحظات الموجودة. إذ ينفذ شيفرة JavaScript التي أحضرها من الخادم، وستحضر هذه الشيفرة بدورها الملاحظات على شكل بيانات JSON، ثم يضيف إليها المتصفح عناصر HTML لعرض الملاحظات على الصفحة مستخدمًا DOM-API.

سادت فكرة تصميم تطبيق من صفحة واحدة (Single-page application (SPA، في السنوات الأخيرة. فمواقع الويب التي تستخدم هذا الأسلوب، لاتحضر صفحاتها من الخادم بشكل منفصل كما فعل التطبيق النموذجي السابق، بل تضم جميع الصفحات في صفحة HTML واحدة وتحضرها، ويتم التعامل معها لاحقًا بواسطة شيفرة JavaScript التي تُنفَّذ ضمن المتصفح.

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

يحوي العنوان التالي https://fullstack-exampleapp.herokuapp.com/spa نسخة الصفحة الواحدة من تطبيقنا النموذجي. حيث نلاحظ للوهلة الأولى تطابق الطريقتين. فللطريقتين شيفرة HTML نفسها، لكن ملف JavaScript مختلف ويدعى (spa.js)، وكذلك حصل تغيير بسيط في كيفية استخدام معرّف الاستمارة Form، فلا تمتلك الاستمارة الآن خاصيات method و action لتحدد كيف وأين سترسل البيانات المدخلة ضمنها.

spa_form_025.png

افتح نافذة Network، وامسح محتواها بالنقر على الرمز ?. ستلاحظ أن طلبًا واحدًا فقط أرسل إلى الخادم عند إنشاء ملاحظة جديدة.

spa_form_request_026.png

يتضمن طلب الإرسال POST إلى العنوان new_note_spa ملاحظة جديدة بصيغة بيانات JSON، تضم محتوى الملاحظة content وتوقيتها date: 

{
  content: "single page app does not reload the whole page",
  date: "2019-05-25T15:15:59.905Z"
}

يفهم الخادم أن البيانات الواردة إليه مكتوبة بصيغة JSON، عن طريق الخاصية Content-Type من ترويسة الطلب. ومن غير هذه الترويسة، لن يعرف المتصفح كيف يفسر البيانات بشكل صحيح.

spa_form_request_header_027.png

يستجيب الخادم معلنًا نجاح عملية إنشاء الملاحظة الجديدة معيدًا رمز الحالة 201. لن يطلب من المتصفح هذه المرة إعادة توجيه الصفحة إلى عنوان آخر، بل يبقى المتصفح على نفس الصفحة دون أن يرسل أية طلبات HTTP أخرى.

لاترسل نسخة SPA من التطبيق بيانات الاستمارة بالطريقة التقليدية، بل تستخدم شيفرة JavaScript التي تحضرها من الخادم. سنلقي نظرة سريعة على هذه الشيفرة، لكن ليس عليك الآن فهم تفاصيلها. 

var form = document.getElementById('notes_form')
form.onsubmit = function(e) {
  e.preventDefault()

  var note = {
    content: e.target.elements[0].value,
    date: new Date(),
  }

  notes.push(note)
  e.target.elements[0].value = ''
  redrawNotes()
  sendToServer(note)
}

تطلب التعليمة ('document.getElementById('notes_form إحضار العنصر Form من الصفحة، وربطه بمعالج أحداث ليتعامل مع حدث إرسال الاستمارة. يستدعي معالج الأحداث مباشرة التابع ()e.preventDefault لإيقاف الاستجابة الافتراضية لحدث الإرسال. هذه الاستجابة التي لانريد حصولها، هي من ترسل البيانات إلى الخادم من خلال طلب GET جديد. بعدها ينشأ معالج الأحداث ملاحظة جديدة ويضيفها إلى قائمة الملاحظات باستعمال التعليمة (notes.push(note ثم يعيد تكوين هذه القائمة على الصفحة ويرسل الملاحظة إلى الخادم.

تمثل الشيفرة التالية تعليمات إرسال الملاحظة إلى الخادم: 

var sendToServer = function(note) {
  var xhttpForPost = new XMLHttpRequest()
  // ...

  xhttpForPost.open('POST', '/new_note_spa', true)
  xhttpForPost.setRequestHeader(
    'Content-type', 'application/json'
  )
  xhttpForPost.send(JSON.stringify(note))
}

تحدد التعليمات السابقة طريقة إرسال البيانات على شكل طلب HTTP-POST وأنها بصيغة JSON، ومن ثم ترسل البيانات على شكل سلسلة JSON النصية.

تتوفر شيفرة التطبيق على العنوان https://github.com/mluukkai/example_app. وعليك أن تتذكر أن التطبيق قد صمم لإبراز مفاهيم المنهاج فقط، وأنه اعتمد أسلوبًا ضعيفًا نسبيًا لايجب عليك اتباعه عند كتابة تطبيقاتك الخاصة. وينطبق كلامنا أيضًا على طريقة استخدام العناوين التي لا تتماشى مع معايير البرمجة الأفضل المعتمدة حاليًا.

مكتبات JavaScript

صمم التطبيق السابق بما يسمى vanilla Javascript أي باستعمال جافاسكربت فقط، التي تستخدم DOM-API و JavaScript في تغيير بنية الصفحة. وبدلًا من استخدام التقنيتين السابقتين فقط، تستخدم مكتبات مختلفة تحتوي على أدوات يسهل التعامل معها مقارنة بتقنية DOM-API. وتعتبر JQuery أحد أشهر هذه المكتبات.طورت المكتبة JQuery في الوقت الذي استخدمت فيه تطبيقات الويب الأسلوب التقليدي المتمثل بإنشاء الخادم لصفحة HTML، وقد حسَّن ظهورها فعالية المتصفح باستخدام JavaScript المكتوبة اعتمادًا على هذه المكتبة. يعتبر أحد أسباب نجاح JQuery توافقها مع المتصفحات المختلفة (cross-browser). حيث تعمل المكتبة أيًّا كان المتصفح أو الشركة التي أنتجته، وبالتالي انتفت الحاجة إلى حلول خاصة بكل متصفح.

لا تُستخدَم JQuery اليوم بالشكل المتوقع، على الرغم من تطور أسلوب Vanilla JS -أي كما ذكرنا الاعتماد على جافاسكربت الصرفة- والدعم الجيد الذي تقدمه أشهر المتصفحات لوظائفها الأساسية. دفع انتشار التطبيق وحيد الصفحة بتقنيات أحدث من jQuery إلى الواجهة، حيث جذبت BackboneJS الموجة الأولى من المطورين. لكن سرعان ما أصبحت AngularJS التي قدمتها غوغل، المعيار الفعلي لتطوير تطبيقات الويب الحديثة، بعد إطلاقها عام 2012. لكن شعبيتها انخفضت بعد أن صرّح فريق العمل في أكتوبر (تشرين الأول) لعام 2014، أن دعم النسخة الأولى سينتهي، وأن النسخة الثانية لن تكون متوافقة معها. لذلك لم تلق Angular بنسختيها ترحيبًا حارًا جدًا.

تعتبر حاليًا مكتبة React التي أنتجها Facebook، الأكثر شعبية في مشاركة المتصفح عند تنفيذ منطق تطبيقات الويب. وسنتعلم خلال مسيرتنا في هذا المنهاج التعامل معها وكذلك التعامل مع مكتبة Redux التي سنستخدمها مع React بشكل متكرر. تبدو React حاليًا في موقع قوة، لكن عالم JavaScript دائم التغير. فالقادم الجديد لهذه العائلة VueJS يلقى اهتماما متزايدًا الآن (يمكنك الاطلاع على سلسلة "مقدمة إلى Vue.js" للتعرف على هذه المكتبة الرائعة).

التطوير الشامل لتطبيق الويب

ما الذي يعنيه مصطلح «التطوير الشامل لتطبيق الويب» (Full stack web development)؟. هذا المصطلح الذي يردده الجميع دون معرفة فعلية بمضمونه أو على الأقل ليس هناك اتفاق على تعريف محدد له.

تمتلك جميع تطبيقات الويب من الناحية العملية مستويين: الأول مستوى العمل مع المتصفح وهو الأقرب إلى المستخدم النهائي (End-User) ويعتبر المستوى الأعلى. والثاني هو مستوى الخادم وهو المستوى الأدنى. وتوضع أحيانًا قواعد البيانات في مستوًى أخفض من مستوى الخادم. وبالتالي يمكننا التفكير بهندسة تطبيقات الويب على أنها مستويات متراكمة.

يتم الحديث أحيانًا عن واجهة أمامية (frontend) وعن واجهة خلفية (backend). سيمثل المتصفح وشيفرة JavaScript التي ينفذها الواجهة الأمامية، بينما يمثل الخادم الواجهة الخلفية.

يُفهم من مصطلح التطوير الشامل في سياق هذا المنهاج، أن العمل سيكون على كل المستويات سواء الواجهة الأمامية أو الخلفية، وكذلك على قواعد البيانات. وقد تعتبر البرمجيات الخاصة بالخادم ونظام تشغيله جزءًا من مستويات التطوير، لكننا لن ندخل في هذا الموضوع. سنكتب شيفرة الواجهة الخلفية بلغة JavaScript مستخدمين بيئة التشغيل Node.js. وسيمنح استخدام نفس لغة البرمجة على مستويات التطوير جميعها بعدًا جديدًا لعملية التطوير الشامل، علمًا أن هذا الأمر ليس ملزمًا.

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

جافاسكربت المتعبة

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

التمارين 0.1 - 0.6

ارفع حلول التمارين على منصة GitHub، وينبغي عليك الإشارة إلى إتمام عملية التحميل ضمن منظومة تسليم الملفات submission system.

يمكنك تحميل جميع التمارين في نفس المكان، أو استخدم أماكن مختلفة. اعط أسماء مناسبة للمجلدات إن رفعت التمارين التي تعود لأقسام مختلفة من المنهاج إلى نفس المكان، وأضف اسم mluukkai إلى قائمة المتعاونين، إن حمَّلت ملفاتك إلى مجلدات خاصة.

تعتبر الطريقة التالية جيدة في تسمية المجلدات: 

part0
part1
     Courseinfo   
  unicafe
  anecdotes
part2
  phonebook
  countries

لاحظ أن لكل قسم مجلده الخاص الذي يضم مجلدات فرعية لكل تمرين (مثل تمرين unicafe في القسم1). وانتبه جيدًا لرفع كل التمارين العائدة لقسم محدد معًا، فلو رفعت تمرينًا واحدًا فقط، لن تتمكن من رفع أية تمارين أخرى تعود لنفس القسم.

1- التمرين 0.1 (HTML)

راجع أساسيات HTML بقراءة هذه الدورة التعليمية من Mozilla. لاترفع هذا التمرين إلى GitHub، يكفي أن تطلع على الدورة.

2- التمرين 0.2 (CSS)

راجع أساسيات CSS بقراءة هذه الدورة التعليمية من Mozilla. لاترفع هذا التمرين إلى GitHub، يكفي أن تطلع على الدورة.

3- التمرين 0.3 (HTML forms)

تعلم أساسيات استخدام استمارات HTML بقراءة هذه الدورة التعليمية من Mozilla. لاترفع هذا التمرين إلى GitHub، يكفي أن تطلع على الدورة.

4- التمرين 0.4 (ملاحظة جديدة new note)

في فقرة تحميل صفحة تحتوي على شيفرة JavaScript (نظرة ثانية)، عرضت سلسلة الأحداث الناتجة عن فتح هذه الصفحة على شكل مخطط تتابعي أُنجز باستخدام خدمة websequencediagrams كالتالي: 

browser-`server: HTTP GET https://fullstack-exampleapp.herokuapp.com/notes
server--`browser: HTML-code
browser-`server: HTTP GET https://fullstack-exampleapp.herokuapp.com/main.css
server--`browser: main.css
browser-`server: HTTP GET https://fullstack-exampleapp.herokuapp.com/main.js
server--`browser: main.js

note over browser:
browser starts executing js-code
that requests JSON data from server 
end note

browser-`server: HTTP GET https://fullstack-exampleapp.herokuapp.com/data.json
server--`browser: [{ content: "HTML is easy"، date: "2019-05-23" }، ...]

note over browser:
browser executes the event handler
that renders notes to display
end note

أنشئ مخططًا مماثلًا لتوضيح الحالة التي ينشأ فيها المستخدم ملاحظة جديدة في الصفحة https://fullstack-exampleapp.herokuapp.com/notes، وذلك بكتابة شيء ما في حقل النص ونقر زر إرسال.

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

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

5- تمرن 0.5 (تطبيق من صفحة واحدة SPA)

أنشئ مخططًا لتوضيح الحالة التي ينتقل فيها المستخدم إلى صفحة نسخة تطبيق من صفحة واحدة من تطبيق الملاحظات على الرابط https://fullstack-exampleapp.herokuapp.com/spa.

6- تمرين 0.6 (ملاحظة جديدة new note)

أنشئ مخططًا لتوضيح الحالة التي ينشئ فيها المستخدم ملاحظة جديدة مستخدمًا نسخة التطبيق ذو الصفحة الواحدة.

بهذا التمرين نصل إلى نهاية القسم. لقد حان الوقت لترفع إجاباتك على GitHub. لا تنسى أن تشير إلى إتمام عملية التحميل ضمن منظومة تسليم الملفات submission system.

يمكنك اقتراح تعديلات على القسم أيضًا إن أحببت في المقال الأصلي.

ترجمة -وبتصرف- للفصل Fundamentals of web apps من سلسلة Deep Dive Into Modern Web Development

]]>1071Wed, 11 Nov 2020 13:00:00 +0000مدخل إلى التحريك في React Nativehttps://academy.hsoub.com/programming/javascript/react/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%A7%D9%84%D8%AA%D8%AD%D8%B1%D9%8A%D9%83-%D9%81%D9%8A-react-native-r925/

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

أولًا سنلقي نظرة على خلفية المكتبة وتاريخها.

بداية التحريكات في React Native وتطوّرها

عند تشغيل برنامج عابر للمنصّات مكتوب بلغة جافاسكريبت تحتاج مكوّنات React Native على هاتفك إلى تبادل المعلومات بواسطة عنصر يسمّى الجسر (Bridge). التبادل عبر هذا العنصر غير متزامن (Asynchronous)، وهو ما يجعل التطبيقات المبنية على إطار العمل React Native تصبح بطيئة لأن الطلبات غير المتزامنة المارّة على الجسر تسدّ المسار أمام شفرة جافاسكريبت التي تتفاعل مع أجزاء إطار العمل.

للحصول على أداء عال يجب أن تصيّر (Render) التحريكات على خيط (Thread) واجهة المستخدم الأصلي في نظام التشغيل، وبما أن البيانات تحتاج للسَّلسَلة (Serialization) عبر الجسر فإن ذلك يؤدّي غالبًا إلى منع خيط جافاسكريبت، ممّا يتسبّب في نقص عدد الإطارات (Frame) على الشاشة. بقي هذا المشكل حاضرًا منذ 2015 حين كانت التحريكات تمثّل واحدة من العقبات الكبرى أمام إطار العمل React Native.

لحسن الحظ، تحسّنت الحالة منذ ذلك الوقت بفضل الدعم الكبير من أعضاء مجتمع المطورين، إذ أصبح من الشائع الآن إنجاز 60 إطارًا في الثانية الواحدة (Frame per second, FPS) في عمليات التحريك ضمن React Native. سهّلت واجهات تطبيقات برمجيّة تصريحيّة (Declarative API) مثل Animated عمليّة تنفيذ التحريكات التفاعلية.

استخدام واجهة التطبيقات البرمجية Animated لتحسين الأداء

يواجه المطورون حتى الآن العديد من القضايا المتعلقة بالأداء خاصة عندما يعملون على رسومات متحركة معقّدة.

كما ذكرنا سابقًا، تتسبب الاختناقات في الأداء التي تحدث عند تنفيذ الرسوم في React Native، بأعباء عمل كبيرة على خيوط جافاسكربت (JavaScript threads)، مما يقلّل من معدل إظهار الإطارات، وبالتالي يتسبّب في البطء عند استخدام البرنامج، وللتغلب على هذه المشكلة نحتاج إلى الحفاظ على معدل 60 إطارًا في الثانية الواحدة.

إن أفضل حل للحفاظ على معدّل الإطارات بالثانية هو استخدام Animated API لأنها تحسّن الزمن المطلوب للسَّلسَلة وعكسها (Serialization/Deserialization). تعمل Animated API عبر استخدام واجهة تطبيقات تصريحية لوصف التحريكات. الفكرة التي تقوم عليها هي التصريح بالتحريك كاملًا مرةً واحدة مقدّمًا لكي تُمكِن سَلسَلة التصريح في جافاسكريبت وإرسالها إلى الجسر. ينفّذ مشغّلٌ (Driver) التحريكاتِ إطارًا بعد الآخر.

تنفيد التحريكات ضمن React Native

توجد طرق عدة لتطبيق التحريك في React Native. في ما يلي الطرق التي أجد أن لديها فائدة أكبر.

القيم المتحرّكة Animated values

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

فلننظر إلى المثال التالي. 

Animated.timing(this.valueToAnimate, {
    toValue: 42;
    duration: 1000;
}).start()

نلاحظ في المثال السابق أننا أسندنا القيمة 42 إلى value.ToAnimate والتي ستنفّذ بعد 1000 ميلي ثانية.

كما يمكن التصريح عن قيم خاصيات التحريك الأخرى مثل الشفافية opacity أو الموضع position. في ما يلي مثال تطبيقي على الشفافية بقيم متحرّكة. 

<Animated.View style={{ opacity: myAnimatedOpacity }} />

مشغلات التحريك: Animated.timing و Animated.event و Animated.decay

انظر إلى المشغّلات على أنها عُقد في مخطّط بياني (Graph) تغيّر قيمةً متحرّكة مع كل إطار. على سبيل المثال، ستزداد القيمة المسندة إلى Animated.timing، بينما ستنقص القيمة المسندة إلى Animated.decay في كل إطار. لنلق نظرة على المثال التالي: 

Animated.decay(this.valueToAnimate, {
   velocity: 2.0,
   deceleration: 0.9
}).start();

في هذا المثال، ستنفَّذ الرسوم المتحركة انطلاقًا من سرعة محددة بالقيمة 2.0، ثم تتناقص تدريجيًا خلال الوقت المحدَّد. أصبحت هذه الطريقة شائعة في التطبيقات العابرة للمنصّات مع بداية ظهور التوثيقات عن التصميم المسطّح (Material design). تبدو التحريكات بمظهر جيّد، وتوجد طرق عدّة لجعل التجربة لا تنسى.

يمكن كذلك استخدام Animated.event لتشغيل قيمة عند تمرير المستخدم: 

<ScrollView onScroll={Animated.event(
  [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
)}
>
</ScrollView>

في المثال السابق يُعيد Animated.event دالّة تعدّل قيمة الخاصيّة nativeEvent.content.offset.y في المكوّن scrollView لتأخد قيمة scrollY الحالية.

عمومًا، يمكن استخدام مشغلّات التحريك مع القيم المتحركة أو مع مشغّلات أخرى.

ملحوظة جانبية: انتبه إلى أنه عندما يحدّث المشغّل كل إطار فإن القيمة الجديدة تحدّث مباشرةً قيمة الخاصيّة View، وبالتالي يجب أن تكون حذرًا عند التصريح بالمتغيّرات وتنتبه إلى نطاقها أثناء استخدامها.

توابع التحويل Transform methods

تتيح لك توابع التحويل تحويل قيمة متحرّكة إلى قيمة متحرّكة جديدة. يمكنك استخدام توابع مثل Animated.add()‎ وAnimated.multiply()‎ وAnimated.interpolate()‎ لتنفيذ عمليّات تحويل بين القيم. يمكنك تنفيذ عمليّة تحويل على أي عقدة في المخطّط البياني قيد التحريك كالتالي: 

newAnimated.Value(55).interpolate(.....) // Transformation operation using Animated.interpolate() method

تحريك الخاصيّات

الخاصيّات المتحرّكة هي عقد خاصّة تربط بين القيم المتحرّكة وخاصيّة في مكوّن. تُولَّد تلك الخاصيّات عند تصيير الخاصيّة Animated.view وإسناد خاصيّات لها.

فلننظر إلى الشفرة التالية: 

Var opacity = new Animated.Value(0.7);
<Animated.View style={{ opacity }} />

أضفنا خاصيّة متحرّكة تُحوِّل القيمة 0.7 إلى خاصية. في حال حدّث التابع تلك القيمة، سينعكس التغيير على خاصية View.

تعمل التوابع الموصوفة أعلاه أساسًا بالتزامن مع الكائنات المتحرّكة (Animated objects) في React، كما أن توابع التحويل تؤدّي دورًا أساسيًّا في عمل تلك الكائنات.

يغيّر مشغّل التحريك (Animated.Timing أو Animated.Event أو Animated.Decay) قيم التحريك في كل إطار ثم تُمرر النتيجة عبر أي تابع من توابع التحويل لتُخزَّن بصيغة خاصية عرض (الشفافية Opacity أو قيمة التحويل).

يسلم مفسّر جافاسكريبت النتيجة إلى Native React حيث تُحدَّث الواجهة من خلال استدعاء التابع setNativeProps. في الأخير تُمرَّر الخاصيّة إلى iOS أو Android حيث يتسلم المكوّن UIView أو Android.View التحديثات.

تنفيذ الرسوم المتحركة باستخدام Animated API و Native Driver

تشرف مشغلات جافاسكريبت منذ ظهور Animated API على عملية تنفيذ التحريك، ولكن هذه الطريقة سببت تباطؤًا في عملية التحريك بسبب قلة عدد الإطارات المعروضة في الثانية ويعود السبب في ذلك أن العمل كله يتم في الخيط (Thread) الخاص بجافاسكريبت.

request_animation_frame.png

لتجاوز هذه المشكلة أضيفت مشغلات خاصة بإطار العمل React Native وبالتالي أصبحت قادرة على تنفيذ عملية التحريك كاملةً، إطارًا بعد الآخر، ضمن React Native.

عند استخدام المشغل الخاصة بإطار العمل React native مع Animated API فإن ذلك يسمح بتحديث العرض مباشرة دون الحاجة إلى إعادة حساب القيم مرة أخرى في جافاسكربت.

لاستخدام المشغّل الخاص بإطار العمل React يجب تعيين القيمة true إلى الخاصيّة useNativeDriver أثناء ضبط التحريكات. 

useNativeDriver: true

استخدام PanResponder للتعامل مع لمس الشاشة في React Native

يمكن لواجهة التطبيقات Animated API تنفيذ غالبية الأعمال الروتينية عند عمل التحريكات في React Native، إلّا أنها محدودة في التعامل مع لمس الشاشة للتفاعل مع التحريكات، فهي غير قادرة على التجاوب مع الحركات التي تحدث خارج المكوّن ScrollView.

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

يمكن التعامل مع حركات اللمس في React Native بسلاسة باستخدام PanResponder مع Animated API.

يدمج PanResponder لمسات عدّة في حركة خاصّة، ويجعل لمسة واحدة تتجاوب مع لمسات إضافية لكي تعمل حركات اليد بسلاسة.

افتراضيًّا، يتمثّل PanResponder في مقبض InteractionManager يمنع الأحداث العاملة على خيط جافاسكريبت من تعطيل حركات اللمس.

تحسين زمن التشغيل لانتقالات التصفح البطيئة

عادةً يحتاج أي تحريك يستدعي الانتقال من شاشة إلى أخرى في React Native إلى استخدام مكوّنات التصفّح. تُستخدَم مكوّنات التصفّح مثل React Navigation عادةً للانتقالات أثناء التصفح.

تحدث الانتقالات أثناء التصفّح في React Native عادةً في خيوط جافاسكريبت، ممّا قد يتسبّب في انتقالات بطيئة في الأجهزة الرخيصة أو ذات الذاكرة المحدودة (أجهزة أندرويد أساسًا إذ أن الأجهزة العاملة بنظام iOS تتعامل مع الأمر بفاعلية أكبر). تحدث انتقالات التصفح البطيئة عادة عندما يحاول React Native تصيير شاشة جديدة في حين أنه ما زالت تُنفَّذ تحريكات في الخلفية.

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

تحريك التخطيطات Layouts

تعمل واجهة التطبيقات البرمجية LayoutAnimation على تحريك الشاشة تلقائيًّا إلى الوضعية الموالية عندما يحدث التخطيط (Layout) الموالي. تُنفَّذ واجهة التطبيقات تلك ضمن خيط واجهة المستخدم (UI Thread) وهو ما يجعلها ذات أداء عال.

تُطبَّق التحريكات المعدَّة عن طريق LayoutAnimation، فور استدعائها، على كل المكوّنات؛ بخلاف واجهة Animated التي يمكنك عن طريقها التحكّم في القيم المخصوصة بتحريكها. يمكن لواجهة LayoutAnimation تحريك كل شيء في التصيير القادم، لذا يجب استدعاؤها قبل استدعاء setState.

يضمن إعداد تحريك للتخطيط قبل استدعاء setState تحريكات سلسة في خيط Native ويحول دون تأثر التحريكات بتنفيذ شفرة برمجية عند إطلاق دور setState أخرى (وهو ما يتسبّب - في الظروف العادية - في تهديد تحريكات تطبيقك).

توجد طريقة أخرى لاستخدام LayoutAnimation وتتمثّل في استدعائها داخل التابع WillReceiveProps. استدع بكل بساطة التابع LayoutAnimation.configureNext مع تمرير الوسائط المناسبة لإعداد التحريك، كما هو موضَّح أدناه: 

LayoutAnimation.configureNext(animationConfiguration, callbackCompletionMethod); 
this.setState({ stateToChange: newStateValue });

لا تدعم واجهة LayoutAnimation سوى خاصيّتين هما الشفافية (Opacity) وقابلية التكيّف (Scalability).

تتعرّف الواجهة على العروض (Views) باستخدام مفاتيحها الفريدة وحساب وضعيّتها المتوقّعة. علاوة على ذلك، تحرّك تغيّرات الإطارات ما دام العرض يحتفظ بالمفتاح نفسه بين تغيّر الحالات.

تعمل التحريكات المطبَّقة بواسطة LayoutAnimation ضمن الخيط الأصلي لواجهة المستخدم في نظام التشغيل، وهو أمر جيّد من ناحية الأداء، إلّا أنه يمثّل تحديًّا إذا دعت الحاجة لتحريك كل الخاصيّات بين حالات الإطارات.

خاتمة

لا يدخل هذا المقال في تفاصيل التحريكات في React Native ويكتفي بأمور سطحية، إلّا أن هناك قاعدة أساسية عند التعامل مع إطار العمل React Native وهي استخدام واجهة التطبيقات البرمجية Animated API ما دام ذلك ممكنا. بالنسبة لحركات اللمس، استخدم PanResponder بجانب Animated API.

يمكن التغلّب على الكثير من المشاكل التي تواجهها بالاستفادة من مشغّل Native driver إلى جانب واجهة Animated. إنْ استمرّت مشاكل الأداء رغم ذلك فالزم LayoutAnimation.

ترجمة - وبتصرّف - للمقال Getting started with React Native animations لصاحبه Rakshit Soral.

]]>925Tue, 23 Jun 2020 12:42:09 +0000دليل Airbnb لتنسيق شيفرات React/JSXhttps://academy.hsoub.com/programming/javascript/react/%D8%AF%D9%84%D9%8A%D9%84-airbnb-%D9%84%D8%AA%D9%86%D8%B3%D9%8A%D9%82-%D8%B4%D9%8A%D9%81%D8%B1%D8%A7%D8%AA-reactjsx-r924/

القواعد الأساسية

  • لا تضع إلا مكوِّن React واحدًا فقط في كل ملف.
    • مع ذلك، يُسمح بوضع أكثر من مكوّن من الدوال عديمة الحالة (Stateless functions) في ملف واحد. استعن بقاعدة react/no-multi-comp في ESLint.
  • استخدم دائمًا أسلوب الصياغة JSX.
  • لا تستخدم التابع React.createElement إلا إذا كنت تهيئ التطبيق من ملف لا يستخدم صياغة JSX.

Class مقابل React.createClass مقابل stateless

  • استخدم class extends React.Component بدلًا من React.createClass إذا كانت لديك حالة أو مراجع (Refs) داخلية أو هما معًا. 

    // سيّئ
const Listing = React.createClass({
  // ...
  render() {
    return <div>{this.state.hello}</div>;
  }
});

// جيّد
class Listing extends React.Component {
  // ...
  render() {
    return <div>{this.state.hello}</div>;
  }
}

     

  • أما إذا لم تكن لديك حالة داخلية أو مرجعية، فمن الأفضل استخدام الدوال العادية (وليس الدوال السهمية) بدلًا من استخدام الأصناف. 

// سيّئ
class Listing extends React.Component {
  render() {
    return <div>{this.props.hello}</div>;
  }
}

// سيّئ (يُنصَح بعدم الاعتماد على استنباط اسم الدالة)

const Listing = ({ hello }) => (
  <div>{hello}</div>
);

// جيّد
function Listing({ hello }) {
  return <div>{hello}</div>;
}

الخلائط (Mixins)

  • تجنب استخدام الخلائط.
    • لماذا؟ لأنها تنطوي على اعتمادات (Dependencies) ضمنية، كما قد تتسبب في اشتباك الأسماء، وترفع درجة التعقيد. يمكن استبدال الخلائط في معظم الحالات بطرق أفضل عبر المكوّنات (Components)، أو المكوّنات ذات المستوى العالي (Higher-order components) أو الوحدات المساعدة.

التسمية

  • الامتدادات: استخدم الامتداد jsx. لمكوّنات React .
  • اسم الملف: استخدم أسلوب التسمية PascalCase لأسماء الملفات. على سبيل المثال، ReservationCard.jsx.
  • تسمية المراجع: استخدم أسلوب التسمية PascalCase لمكوّنات React وأسلوب camelCase لنسخ الكائنات (Instances). 
// سيّئ
import reservationCard from './ReservationCard';

// جيّد
import ReservationCard from './ReservationCard';

// سيّئ
const ReservationItem = <ReservationCard />;

// جيّد
const reservationItem = <ReservationCard />;
  • تسمية المكوّنات: استخدم اسم الملف كاسم للمكوّن. على سبيل المثال، ReservationCard.jsx ينبغي أن يكون اسم مرجعها ReservationCard. بالنسبة للمكوّنات الجذرية للمجلد (Root components)، استخدم index.jsx لاسم للملف واستخدم اسم المجلد لاسم المكوّن: 
// سيّئ
import Footer from './Footer/Footer';

// سيّئ
import Footer from './Footer/index';

// جيّد
import Footer from './Footer';

  • تسمية المكوّنات ذات المستوى العالي (Higher-order Componen): استخدم مزيجًا من اسم المكوّن ذي المستوى العالي واسم المكوِّن المُمرَّر ليكون قيمة الخاصيّة displayName في المكوّن المُولَّد.على سبيل المثال، إذا مُرّر للمكوّن ذي المستوى العالي ()withFoo المكوّن Bar فإن الناتج ستكون قيمة الخاصيّة displayName لديه هي withFoo(Bar).

    لماذا ا؟ يمكن استخدام الخاصيّةdisplayName في أدوات المطوّرين أو في رسائل الخطأ، وعندما تعكس قيمتها تلك العلاقة بوضوح، فسيساعد ذلك على فهم ما يحدث. 

// سيّئ
export default function withFoo(WrappedComponent) {
  return function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }
}

// جيّد
export default function withFoo(WrappedComponent) {
  function WithFoo(props) {
    return <WrappedComponent {...props} foo />;
  }

  const wrappedComponentName = WrappedComponent.displayName
    || WrappedComponent.name
    || 'Component';

  WithFoo.displayName = `withFoo(${wrappedComponentName})`;
  return WithFoo;
}

  • تسمية الخاصيّات (Props) : تجنب استعمال أسماء مكوّنات DOM لأغراض مختلفة. لماذا؟ يتوقع المطوّرون أنّ خاصيّات مثل style وclassName تعني أشياء محددة. تغيير الواجهة البرمجية هذه في جزء من تطبيقك يجعل الشفرة البرمجية أقل قابلية للقراءة والصيانة، ويمكن أن يتسبب في أعطاب. 

    // سيّئ
<MyComponent style="fancy" />

// جيّد
<MyComponent className="fancy" />

// جيّد
<MyComponent variant="fancy" />

     

التصريح Declaration

  • لا تستخدم displayName لتسمية المكوّنات. بدلًا من ذلك، سمّ المكوّنات بمراجعها. 

    // سيّئ
export default React.createClass({
  displayName: 'ReservationCard',
  // stuff goes here
});

// جيّد
export default class ReservationCard extends React.Component {
}

     

المحاذاة Alignment

  • اتبع الأساليب التالية للمحاذاة في صياغة JSX. استعن بقاعدتيْ react/jsx-closing-bracket-location وreact/jsx-closing-tag-location في ESLint. 

    // سيّئ
<Foo superLongParam="bar"
     anotherSuperLongParam="baz" />

// جيّد
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
/>

// if props fit in one line then keep it on the same line
<Foo bar="bar" />

// children get indented normally
<Foo
  superLongParam="bar"
  anotherSuperLongParam="baz"
>
  <Quux />
</Foo>

     

الاقتباس Quotes

  • استخدم دائمًا علامات الاقتباس المزدوجة (") لخاصيّات JSX، وعلامات الاقتباس المفردة (') لبقية عناصر جافاسكريبت. استعن بقاعدة jsx-quotes في ESLint.

    لماذا؟ تستخدم خاصيّات HTML عادةً علامات الاقتباس المزدوجة بدلًا من المفردة، لذا فخاصيّات JSX تتبع هذا الاصطلاح. 

    // سيّئ
<Foo bar='bar' />

// جيّد
<Foo bar="bar" />

// سيّئ
<Foo style={{ left: "20px" }} />

// جيّد
<Foo style={{ left: '20px' }} />

     

إدراج المسافات Spacing

  • أضف دائمًا مسافةً واحدةً في الوسوم المنغلقة على ذاتها (Self-closing tags). استعن بالقاعدتين no-multi-spaces وreact/jsx-tag-spacing. 

    // سيّئ
<Foo/>

// سيّئ جدًّا
<Foo                 />

// سيّئ
<Foo
 />

// جيّد
<Foo />

     

  • لا تحش أقواس JSX المعقوصة بمسافات. استعن بالقاعدة react/jsx-curly-spacing. 

    // سيّئ
<Foo bar={ baz } />

// جيّد
<Foo bar={baz} />

     

الخاصيات Props

  • استخدم دائمًا أسلوب التسمية camelCase لتسمية الخاصيّات. 

    // سيّئ
<Foo
  UserName="hello"
  phone_number={12345678}
/>

// جيّد
<Foo
  userName="hello"
  phoneNumber={12345678}
/>

     

  • احذف قيمة الخاصيّة عندما تكون قيمتها تساوي true على نحو صريح. استعن بالقاعدة react/jsx-boolean-value. 

    // سيّئ
<Foo
  hidden={true}
/>

// جيّد
<Foo
  hidden
/>

// جيّد
<Foo hidden />

     

  • أضف دومًا الخاصيّة alt في وسوم الصور(<img>). إذا كانت الصورة تقديمية (Presentational)، فيمكن للخاصيّة alt أن تكون نصًّا فارغًا وإلّا فيجب أن يحتوي الوسم <img> على الخاصيّة ‎role="presentation". 

    // سيّئ
<img src="hello.jpg" />

// جيّد
<img src="hello.jpg" alt="Me waving hello" />

// جيّد
<img src="hello.jpg" alt="" />

// جيّد
<img src="hello.jpg" role="presentation" />

     

  • لا تستخدم كلمات مثل "image" أو "photo " أو "picture" أو "صورة" في خاصيّات alt الخاصة بوسوم <img>. استعن بالقاعدة jsx-a11y/img-redundant-alt.

    لماذا؟ تعلم برامج قراءة الشاشة أن <img> تعني صورة، لذلك لا توجد حاجة لإدراج هذه المعلومة في النص البديل (alt text). 

    // سيّئ
<img src="hello.jpg" alt="صورة مني وأنا أشير بيدي للترحيب" />

// جيّد
<img src="hello.jpg" alt="أشير بيدي للترحيب" />

     

  • لا تستخدم إلّا أدوار ARIA الصالحة وغير المجردة. استعن بالقاعدة jsx-a11y/aria-role. 

    // سيّئ، ليس من أدوار ARIA
<div role="datepicker" />

// سيّئ، دور ARIA مجرّد
<div role="range" />

// جيّد
<div role="button" />

     

  • لا تستخدم الخاصيّة accesskey على العناصر. استعن بالقاعدة jsx-a11y/no-access-key.

    لماذا؟ تعقّد التناقضات بين اختصارات لوحة المفاتيح وأوامر لوحة المفاتيح التي يستعملها مَن يستخدمون برامج قراءة الشاشة ولوحة المفاتيح، تعقّد قابلية الوصول (Accessibility). 

    // سيّئ
<div accessKey="h" />

// جيّد
<div />

     

  • تجنب استخدام فهرس مصفوفة (Array index) ليكون خاصيّة key. استخدم معرّفًا فريدًا بدلًا من ذلك. (لماذا؟). 

    // سيّئ
{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

// جيّد
{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}
    • عرّف دائمًا قيمًا افتراضيّة (defaultProps) للخاصيّات غير المطلوبة.

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

    // سيّئ
function SFC({ foo, bar, children }) {
  return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};

// جيّد
function SFC({ foo, bar, children }) {
  return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
  foo: PropTypes.number.isRequired,
  bar: PropTypes.string,
  children: PropTypes.node,
};
SFC.defaultProps = {
  bar: '',
  children: null,
};

     

  • لا تُسرف في استخدام الخاصيّات الممدَّدة (Spread props).

لماذا؟ لكي تتجنب قدر الإمكان تمرير الخاصيّات التي لا داعي لها إلى المكوّنات. بالنسبة للإصدار React v15.6.1 والإصدارت الأقدم، ستتجنب كذلك تمرير سمات HTML غير صالحة إلى نموذج DOM.

استثناءات:

  • المكوّنات ذات المستوى العالي التي تغلّف الخاصيّات وترفع الخاصيّة propTypes إلى أعلى النطاق (Hoist): 

    	function HOC(WrappedComponent) {
	  return class Proxy extends React.Component {
	    Proxy.propTypes = {
	      text: PropTypes.string,
	      isLoading: PropTypes.bool
	    };
	
	    render() {
	      return <WrappedComponent {...this.props} />
	    }
	  }
	}

  • تمديد الكائنات بخاصيّات معروفة وواضحة يمكن أن يكون مفيدًا خصوصًا عند اختبار مكوّنات React بالتركيب forEach في Mocha. 

    export default function Foo {
  const props = {
    text: '',
    isPublished: false
  }

  return (<div {...props} />);
}

     

  • ملحوظة: حاول تصفية الخاصيّات التي لا داعي لها، واستخدم prop-types-exact لمساعدتك على تجنب العلل. 

    // جيّد
render() {
  const { irrelevantProp, ...relevantProps  } = this.props;
  return <WrappedComponent {...relevantProps} />
}

// سيّئ
render() {
  const { irrelevantProp, ...relevantProps  } = this.props;
  return <WrappedComponent {...this.props} />
}

     

المرجعيّات Refs

  • استخدم دائمًا رد نداء (Callback) للمراجع (Refs). استعن بالقاعدة react/no-string-refs. 

    // سيّئ
<Foo
  ref="myRef"
/>

// جيّد
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

     

الأقواس

  • ضع وسوم JSX بين أقواس إذا امتدت على أكثر من سطر واحد. استعن بالقاعدة react/jsx-wrap-multilines. 

    // سيّئ
render() {
  return <MyComponent variant="long body" foo="bar">
           <MyChild />
         </MyComponent>;
}

// جيّد
render() {
  return (
    <MyComponent variant="long body" foo="bar">
      <MyChild />
    </MyComponent>
  );
}

// جيّد، بالنسبة لسطر واحد
render() {
  const body = <div>hello</div>;
  return <MyComponent>{body}</MyComponent>;
}

     

الوسوم Tags

  • استخدم دائمًا الإغلاق الذاتي (Self-close) للوسوم التي لا أبناء لها. استعن بالقاعدة react/self-closing-comp. 

    // سيّئ
<Foo variant="stuff"></Foo>

// جيّد
<Foo variant="stuff" />

     

  • اجعل إغلاق الوسوم في سطر جديد إذا كان للمكوّن خاصيّات متعددة الأسطر. استعن بالقاعدة react/jsx-closing-bracket-location. 

    // سيّئ
<Foo
  bar="bar"
  baz="baz" />

// جيّد
<Foo
  bar="bar"
  baz="baz"
/>

     

التوابع Methods

  • استخدم الدوال السهمية في المتغيرات المحلية. 

    function ItemList(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <Item
          key={item.key}
          onClick={() => doSomethingWith(item.name, index)}
        />
      ))}
    </ul>
  );
}

     

  • اربط معالجات الأحداث الخاصّة بتابع التصيير (Render methode) داخل المنشئ. استعن بالقاعدة react/jsx-no-bind.

    لماذا؟ استدعاء bind في مسار التصيير (Render path) يُنشئ دالة جديدة لكل تابع تصيير. 

    	// سيّئ
	class extends React.Component {
	  onClickDiv() {
	    // do stuff
	  }
	
	  render() {
	    return <div onClick={this.onClickDiv.bind(this)} />;
	  }
	}
	
	// جيّد
	class extends React.Component {
	  constructor(props) {
	    super(props);
	
	    this.onClickDiv = this.onClickDiv.bind(this);
	  }
	
	  onClickDiv() {
	    // do stuff
	  }
	
	  render() {
	    return <div onClick={this.onClickDiv} />;
	  }
	}

  • لا تستخدم الشرطة السفلية (_) في بداية أسماء التوابع الداخلية لمكوّنات React .

    لماذا؟ تُستخدَم الشرطات السفلية في بداية أسماء المتغيّرات في لغات أخرى للدلالة على الخصوصية. ولكن، خلافًا لتلك اللغات، لا يوجد دعم أصيل للخصوصية في جافاسكريبت، فكل شيء فيها عام. إضافة شرطة سفلية في بداية أسماء الخاصيات، بغض النظرعن نواياك، لا يجعلها خاصة، ويجب أن تُعامَل كل الخاصيات (مسبوقة بالشرطة السفلية أو لا) على أنها عامة. انظر إلى النقاش حول 1024# وenter link description here للتعمّق. 

    // سيّئ
React.createClass({
  _onClickSubmit() {
    // do stuff
  },

  // other stuff
});

// جيّد
class extends React.Component {
  onClickSubmit() {
    // do stuff
  }

  // other stuff
}

     

  • تأكد من إرجاع قيمة في توابع التصيير. استعن بالقاعدة react/require-render-return. 

    // سيّئ
render() {
  (<div />);
}

// جيّد
render() {
  return (<div />);
}

     

الترتيب Ordering

  • الترتيب عند تمديد الصنف React.Component لإنشاء مكوّن React جديد (class extends React.Component):
  1. التوابع الثابتة (static) الاختيارية،
  2. constructor
  3. getChildContext
  4. componentWillMount
  5. componentDidMount
  6. componentWillReceiveProps
  7. shouldComponentUpdate
  8. componentWillUpdate
  9. componentDidUpdate
  10. componentWillUnmount
  11. معالجات الأحداث والنقر مثل ‎onClickSubmit‎()‎ أو ‎onChangeDescription‎()‎
  12. توابع الوصول الخاصة بـ render مثل getSelectReason()‎ أو getFooterContent()‎
  13. توابع render الاختيارية مثل renderNavigation()‎ أو renderProfilePicture()‎.
  14. render.

  • كيفية تعريف propTypes وdefaultProps وcontextTypes 

    import React from 'react';
import PropTypes from 'prop-types';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>;
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

    • الترتيب الخاص بـ React.createClass. استعن بالقاعدة react/sort-comp.

  1. displayName
  2. propTypes
  3. contextTypes
  4. childContextTypes
  5. mixins
  6. statics
  7. defaultProps
  8. getDefaultProps
  9. getInitialState
  10. getChildContext
  11. componentWillMount
  12. componentDidMount
  13. componentWillReceiveProps
  14. shouldComponentUpdate
  15. componentWillUpdate
  16. componentDidUpdate
  17. componentWillUnmount
  18. معالجات الأحداث والنقر مثل ‎onClickSubmit‎()‎ أو ‎onChangeDescription‎()‎
  19. توابع الوصول الخاصة بـ render مثل getSelectReason()‎ أو getFooterContent()‎
  20. توابع render الاختيارية مثل renderNavigation()‎ أو renderProfilePicture()‎.
  21. render

  • لا تستخدم isMounted. استعن بالقاعدة react/no-is-mounted

    لماذا؟ استخدام isMounted غير مجدٍ (Anti-pattern)، وهو غير متوفر عند استخدام أصناف ES6، كما أنه سيُلغى رسميًّا قريبا.

ترجمة - وبتصرّف - للمقال Airbnb React/JSX Style Guide.

]]>924Tue, 23 Jun 2020 12:32:26 +0000حالة مكون component state) React)https://academy.hsoub.com/programming/javascript/react/%D8%AD%D8%A7%D9%84%D8%A9-%D9%85%D9%83%D9%88%D9%86-component-state-react-r836/

سنناقش في هذا الدرس حالة المكوِّنات (component state).

ما هي حالة المكون (Component State)؟

أغلبية المكونات تأخذ الخاصيات props وتصيّر العنصر، لكن تتيح المكونات الحالة أيضًا، والتي يمكن أن تستخدم لتخزين معلومات حول المكوِّن التي يمكن أن تتغير مع مرور الوقت. وعادةً يأتي التغيير نتيجةً لأحداث المستخدم أو أحداث النظام (مثل رد لمدخلات المستخدم، أو طلبية للخادم بعد مرور فترة زمنية معيّنة).

بعض الأمور التي يجب أخذها بالحسبان حول حالة مكوِّنات React:

  1. إذا كان للمكوِّن حالة فيمكن ضبط الحالة الافتراضية this.setState()‎ في الدالة البانية‎.
  2. تغيرات الحالة هي ما تجعلنا نعيد تصيير المكوِّن وجميع المكونات الفرعية التابعة له.
  3. يمكنك إعلام المكوِّن بتغيّر الحالة باستخدام this.setState()‎ لضبط حالةٍ جديدة.
  4. يمكن أن تدمج تغيرات الحالة البيانات الجديدة مع البيانات القديمة التي ما تزال محتواةً في الحالة (أي this.state).
  5. عند تغيير الحالة، فستجري عملية إعادة التصيير داخليًا، ولا يفترض بك استدعاء this.render()‎ مباشرةً أبدًا.
  6. يجب أن يحتوي كائن الحالة على القدر الأدنى من البيانات اللازم لواجهة المستخدم؛ فلا تضع البيانات المحسوبة أو مكونات React الأخرى أو الخاصيات props في كائن الحالة.

العمل مع حالة المكونات

يتطلب التعامل مع حالة المكونات عادةً ضبط الحالة الافتراضية، والوصول إلى الحالة الحالية، وتحديث الحالة.

سننشِئ في المثال الآتي المكوِّن الذي يبيّن استخدام this.state.[STATE]‎ وthis.setState()‎. إذا ضغطتَ على المكوِّن في متصفح الويب (أي الوجه المبتسم) فستجد أنَّ المكوِّن سيبدِّل بين الحالات المتاحة (أي الأوجه المبتسمة)، وبالتالي تكون هنالك ثلاثة حالات ممكنة للمكوِّن وهي مرتبطة بالواجهة الرسومية ومعتمدة على نقرات المستخدم في واجهة المستخدم: 

class MoodComponent extends React.Component {

  state = {mood: ':|'};


  constructor(props){

    super(props);

    this.changeMood = this.changeMood.bind(this)

  }

  changeMood(event,a){

    const moods = [':)',':|',':('];

    const current = moods.indexOf(event.target.textContent);

    this.setState({mood: current === 2 ? moods[0] : moods[current+1]});

  }

  render() {

    return (

      <span style={{fontSize:'60',border:'1px solid #333',cursor:'pointer'}} 

          onClick={this.changeMood}>

        {this.state.mood}

    </span>

    )

  }

};


ReactDOM.render(< MoodComponent />, app);

لاحظ أنَّ للمكوِّن حالةً افتراضيةً هي :|، وهي مضبوطة باستخدام state = {mood: ':|'};‎ وهي تستخدم في المكوِّن عند تصييره لأول مرة عبر {this.state.mood}.

أضفنا مستمعًا للأحداث لتغيير الحالة، وهي هذه الحالة سيؤدي حدث النقر (onClick) على عقدة إلى استدعاء الدالة changeMood، وداخل هذه الدالة سنستخدم this.setState()‎ للتبديل إلى الحالة التالية اعتمادًا على قيمة الحالة الحالية. بعد إجراء هذا التحديث (لاحظ أنَّ setState()‎ ستدمج التعديلات) فسيعاد تصيير العنصر وستتغير واجهة المستخدم.

بعض الأمور التي علينا إبقاؤها في ذهننا عند الحديث عن حالة مكوِّنات React:

  1. إذا كان للمكوِّن حالة فيمكن ضبط الحالة الافتراضية الخاصية state‎.
  2. تغيرات الحالة هي ما تجعلنا نعيد تصيير المكوِّن وجميع المكونات الفرعية التابعة له.
  3. يمكنك إعلام المكوِّن بتغيّر الحالة باستخدام this.setState()‎ لضبط حالةٍ جديدة. هنالك طرائق أخرى (مثل forceUpdate()‎) ولكن لا يجدر بناء استخدامها إلا إذا أردنا دمج React مع مكتباتٍ من طرف ثالث.
  4. يمكن أن تدمج تغيرات الحالة البيانات الجديدة مع البيانات القديمة التي ما تزال محتواةً في الحالة (أي this.state). لكن هذا دمجٌ أو تحديثٌ سطحي، فلن يجرى عملية دمج عميقة.
  5. عند تغيير الحالة، فستجري عملية إعادة التصيير داخليًا، ولا يفترض بك استدعاء this.render()‎ مباشرةً أبدًا.
  6. يجب أن يحتوي كائن الحالة على القدر الأدنى من البيانات اللازم لواجهة المستخدم؛ فلا تضع البيانات المحسوبة أو مكونات React الأخرى أو الخاصيات props في كائن الحالة.

الفروقات بين الحالة والخاصيات props

هنالك أرضيةٌ مشتركة بين الحالة state والخاصيات props:

  1. كلاهما كائنات JavaScript عادية.
  2. يمكن لكليهما أن يمتلك قيمًا افتراضية.
  3. يمكن الوصول إليها باستخدام this.props أو this.state، لكن لا يجوز أن نضبط قيمهما بهذه الطريقة، إذ سيكون كلاهما للقراءة فقط عند استخدام this.

لكنهما يستخدمان لأغراضٍ مختلفة وبطرائق مختلفة.

الخاصيات props:

  1. تُمرَّر الخاصيات إلى المكوِّنات من البنية الأعلى منها، سواءً كانت من مكوِّنٍ أب أو بداية المجال حيث صُيَّرت React من الأساس.
  2. الغرض من الخاصيات هو تمرير قيم الضبط إلى المكوِّن. تخيل أنها كالوسائط المُمرَّرة إلى دالة (وإن لم تكن تستعمل صيغة JSX فهذا ما تفعله تحديدًا).
  3. الخاصيات غير قابلة للتعديل في المكوِّن الذي يستقبلها، أي لا يمكننا تعديل الخاصيات المُمرَّرة إلى المكوِّن من داخل المكوِّن نفسه.

الحالة (state):

  1. الحالة هي تمثيلٌ للبيانات الذي سيرتبط في مرحلةٍ ما مع الواجهة الرسومية.
  2. يجب أن تبدأ الحالة دومًا بقيمةٍ افتراضية، ثم ستُعدّل الحالة داخليًا في المكوِّن باستخدام setState()‎.
  3. يمكن تعديل الحالة باستخدام المكوِّن الذي يحتوي عليها فقط، أي أنها خاصة.
  4. لا يفترض تعديل حالة المكوِّنات الأبناء، ويجب ألا يشارك المكوِّن حالةً قابلةً للتعديل.
  5. يجب أن يحتوي كائن الحالة على القدر الأدنى من البيانات اللازم لواجهة المستخدم؛ فلا تضع البيانات المحسوبة أو مكونات React الأخرى أو الخاصيات props في كائن الحالة.

إنشاء مكونات عديمة الحالة (Stateless Components)

عندما يكون المكون نتيجةً لاستخدام الخاصيات props فقط دون وجود حالة state، فيمكن كتابة المكوِّن على شكل دالة صرفة مما يجعلنا نتفادى إنشاء نسخة من مكوِّن React. ففي المثال الآتي سيكون MyComponent نتيجةً لاستدعاء دالة ناتجة عن React.createElement()‎. 

var MyComponent = function(props){

    return <div>Hello {props.name}</div>;

};


ReactDOM.render(<MyComponent name="doug" />, app);

إذا ألقينا نظرةً على شيفرة JavaScript الناتجة عن عملية تحويل JSX، فستبدو الأمور جليةً وواضحةً لنا: 

var MyComponent = function MyComponent(props) {

    return React.createElement(

        "div",

        null,

        "Hello ",

        props.name

    );

};


ReactDOM.render(React.createElement(MyComponent, { name: "doug" }), app);

إنشاء مكوِّن React دون اشتقاق الصنف React.Component‎ يشار إليه عادةً بمكوِّن عديم الحالة.

لا يمكن تمرير خيارات الضبط إلى المكونات عديمة الحالة (مثل render أو componentWillUnmount …إلخ.)؛ لكن يمكن ضبط ‎.propTypes و ‎.defaultProps على الدالة.

الشيفرة الآتية توضِّح مكوِّنًا عديم الحالة يستخدم ‎.propTypes و ‎.defaultProps: 

import PropTypes from 'prop-types';

var MyComponent = function(props){

    return <div>Hello {props.name}</div>;

};


MyComponent.defaultProps = {name:"John Doe"};

MyComponent.propTyes = {name: PropTypes.string};


ReactDOM.render(<MyComponent />, app);

ملاحظات

  • حاول أن تجعل أكبر عدد من المكونات عديمَ الحالة.

ترجمة -وبتصرف- للفصل React Component State من كتاب React Enlightenment

]]>836Wed, 04 Mar 2020 08:07:01 +0000خاصيات مكونات React Component Properties) React)https://academy.hsoub.com/programming/javascript/react/%D8%AE%D8%A7%D8%B5%D9%8A%D8%A7%D8%AA-%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-react-component-properties-react-r835/

سنناقش في هذا الدرس استخدام خاصيات مكوِّنات React والتي تعرف بالخاصيات props.

ما هي خاصيات المكونات؟

أسهل طريقة لشرح خاصيات المكوِّنات هي القول أنَّها تسلك سلوك خاصيات HTML. بعبارةٍ أخرى، توفِّر الخاصيات خيارات الضبط للمكوِّن. فمثلًا، الشيفرة الآتية فيها المكوِّن Badge الذي يتوقع إرسال الخاصية name عند تهيئة المكوِّن: 

class Badge extends React.Component {

  render() {

    return <div>{this.props.name}</div>;

  }

};

class BadgeList extends React.Component {

  render() {

    return (<div>

      <Badge name="Bill" />

      <Badge name="Tom" />

    </div>);

  }

};


ReactDOM.render(<BadgeList />, document.getElementById('app'));

داخل دالة التصيير للمكوِّن وعندما نستخدم المكوِّن ستُضاف الخاصية name إلى المكوِّن بنفس الطريقة التي نضيف فيها خاصية HTML إلى عنصر HTML (أي)؛ ثم ستستخدم الخاصية name من المكوِّن Badge (عبر this.props.name) كعقدة نصية للعقدة التي ستصيَّر عبر المكون Badge. هذا شبيهٌ بطريقة أخذ العنصر في HTML الخاصية value التي ستُستخدَم قيمتها لعرض نص داخل حقل الإدخال.

طريقة أخرى للتفكير في خاصيات المكوِّنات هي تخيلها كأنها قيم لخيارات الضبط المُرسَلة إلى المكوِّن. فإذا نظرتَ إلى نسخة لا تحتوي على صيغة JSX من المثال السابق فسيبدو لك جليًا أنَّ خاصيات المكوِّن ما هي إلا كائنٌ يُمرَّر إلى الخاصية createElement()‎ (أي React.createElement(Badge, { name: "Bill" })‎): 

class Badge extends React.Component {

  render() {

    return React.createElement(

      "div",

      null, // null لم تُعرَّف خاصيات لذا ستكون القيمة 

      this.props.name // كقيمة نصية this.prop.name استخدام  

    );

  }

};




class BadgeList extends React.Component {

  render() {

    return React.createElement(

      "div",

      null,

      React.createElement(Badge, { name: "Bill" }),

      React.createElement(Badge, { name: "Tom" })

    );

  }

};


ReactDOM.render(React.createElement(BadgeList, null), document.getElementById('app'));

هذا شبيهٌ بطريقة ضبط الخاصيات مباشرةً على عقد React. لكن عند تمرير تعريف المكوِّن Badge إلى الدالة createElement()‎ بدلًا من قعدة، فستصبح الخاصيات props متاحةً على المكوِّن نفسه (أي this.props.name). تُمكِّننا خاصيات المكوِّنات من إعادة استخدام المكوِّن  مع أي اسم.

في الشيفرة التي ألقينا إليها نظرةً في هذا القسم، لاحظنا أنَّ المكوِّن BadgeList يستخدم مكونَي Badge مع كائن this.props خاصٌ بكلٍ واحدٍ منها. يمكننا التأكد من ذلك بعرض قيمة this.props عندما يُهيَّئ المكوِّن Badge: 

class Badge extends React.Component {

  render() {

    return <div>{this.props.name}{console.log(this.props)}</div>;

  }

};


class BadgeList extends React.Component {

  render() {

    return (<div>

      <Badge name="Bill" />

      <Badge name="Tom" />

    </div>);

  }

};


ReactDOM.render(<BadgeList />, document.getElementById('app'));

نلاحظ أنَّ كل نسخة من مكوِّنات React تملك نسخةً خاصةً بها من خاصيةٍ اسمها props التي تكون كائن JavaScript فارغ، ثم سيُملَأ هذا الكائن عبر المكوِّن الأب باستخدام أي قيمة أو مرجعية في JavaScript، ثم ستُستخدَم هذه القيمة من المكوِّن أو تُمرَّر إلى المكونات الأبناء.

ملاحظات

  • في البيئات التي تستخدم ES5، لن نتمكن من تعديل الخاصية this.props لأنها كائنٌ مجمَّد (أي Object.isFrozen(this.props) === true;‎).
  • يمكنك أن تعدّ this.props على أنها كائنٌ للقراءة فقط.

إرسال الخاصيات props إلى مكوِّن

تُرسَل الخاصيات إلى المكوِّن عند إضافة قيم شبيهة بخاصيات HTML إلى المكوِّن عند استخدمه وليس عند تعريفه، فمثلًا، سنجد في الشيفرة الآتية أنَّ المكوِّن Badge قد عُرِّفَ أولًا، ثم أرسلنا خاصيةً له وهي name="Bill"‎ أثناء استخدامه (أي عند تصيير ``): 

class Badge extends React.Component {

  render() {

    return <div>{this.props.name}</div>;

  }

};


ReactDOM.render(<Badge name="Bill" />, document.getElementById('app'));

أبقِ في ذهنك أنَّ بإمكاننا إرسال خاصية إلى المكوِّن في أي مكان يمكن أن يُستخدَم المكوِّن فيه. فعلى سبيل المثال، يبيّن المثال من القسم السابقة استخدام المكوِّن Badge والخاصية name ضمن المكوِّن BadgeList: 

class Badge extends React.Component {

  render() {

    return <div>{this.props.name}</div>;

  }

};


class BadgeList extends React.Component {

  render() {

    return (<div>

      <Badge name="Bill" />

      <Badge name="Tom" />

    </div>

    );

  }

};


ReactDOM.render(<BadgeList />, document.getElementById('app'));

ملاحظات

  • يجب أن تُعدّ خاصيات المكوِّن غيرُ قابلةٍ للتعديل، ويمكن عدم تعديل الخاصيات المُرسَلة من مكوِّن آخر. فلو احتجتَ إلى تعديل قيمة خاصيات أحد المكوِّنات ثم إعادة تصييره، فلا تضبط الخاصيات باستخدام this.props.[PROP] = [NEW PROP].

الحصول على خاصيات المكوِّن

كما ناقشنا في الدرس السابق، يمكن الوصول إلى إلى نسخة المكوِّن من أيٍّ من خيارات الضبط التي تستعمل دالةً عبر الكلمة المحجوزة this. ففي المثال الآتي استخدمنا الكلمة المحجوزة this للوصول إلى خاصيات props المكوِّن Badge من خيار الضبط render بكتابة this.props.name: 

class Badge extends React.Component {

  render() {

    return <div>{this.props.name}</div>;

  }

};


ReactDOM.render(<Badge name="Bill" />, document.getElementById('app'));

ليس من الصعب معرفة ما يحدث إذا ألقينا نظرةً على شيفرة JavaScript المحوَّلة من JSX: 

class Badge extends React.Component {

  render() {

    return React.createElement(

      "div",

      null,

      this.props.name

    );

  }

};


ReactDOM.render(React.createElement(Badge, { name: "Bill" }), document.getElementById('app'));

أُرسِل الكائن { name: "Bill"‎ } إلى الدالة createElement()‎ إضافةً إلى مرجعيةٍ إلى المكوِّن Badge. القيمة { name: "Bill"‎ } ستُضبَط كخاصية للمكوِّن قابلةٌ للوصول من الكائن props، أي أنَّ this.props.name === "Bill"‎.

ملاحظات

  • تذكَّر أنَّ this.props للقراءة فقط، ولا يجوز ضبط الخاصيات باستخدام this.props.PROP = 'foo'‎.

ضبط قيم افتراضية لخاصيات المكوِّن

يمكن ضبط الخاصيات الافتراضية عند تعريف المكوِّن باستخدام خيار الضبط getDefaultProps.

المثال الآتي يبيّن كيف عرَّفنا خيار ضبط افتراضي للمكوِّن Badge للخاصية name: 

class Badge extends React.Component {

  static defaultProps = {

    name:'John Doe'

  }

  render() {

    return <div>{this.props.name}</div>;

  }

};


class BadgeList extends React.Component {

  render() {

    return (<div>

      <Badge />

      <Badge name="Tom Willy" />

    </div>);

  }

};


ReactDOM.render(<BadgeList />, document.getElementById('app'));

ستُضبَط الخاصيات الافتراضية على الكائن this.props إذا لم تُرسَل خاصيات إلى المكوِّن. يمكنك التحقق من ذلك بملاحظة أنَّ المكوِّن Badge الذي لم تُضبَط الخاصية name فيه ستأخذ القيمة الافتراضية 'John Doe'.

خاصيات المكونات هي أكثر من مجرد سلاسل نصية

قبل أن نلقي نظرةً على التحقق من الخاصيات، علينا أن نستوعب أولًا أنَّ خاصيات المكونات يمكن أن تكون أي قيمة صالحة في JavaScript.

في المثال أدناه، سنضبط عدِّة خاصيات افتراضية تحتوي على مختلف قيم JavaScript: 

class MyComponent extends React.Component {

  static defaultProps = {

      propArray: [],

      propBool: false,

      propFunc: function(){},

      propNumber: 5,

      propObject: {},

      propString: 'string'

  }

  render() {

    return (<div>

      propArray: {this.props.propArray.toString()} 

      <br /><br />

      propFunc returns: {this.props.propFunc()} 

    </div>) ;

  }

};




ReactDOM.render(<MyComponent propArray={[1,2,3]} propFunc={function(){return 2;}} />, document.getElementById('app'));

لاحظ كيف أعيدت الكتابة على الخاصيتين propArray و propObject مع قيم جديدة عند إنشاء نسخة من المكوِّن MyComponent.

الفكرة الرئيسية من هذا القسم هو توضيح أنَّنا لسنا محدودين بالقيم النصية عند تمرير قيم للخاصيات.

التحقق من خاصيات المكوِّنات

لاستخدامٍ سليمٍ للخاصيات ضمن المكوِّنات، يجب أن نتحقق من قيمتها عند إنشاء نسخ المكوِّنات.

عند تعريف خيار الضبط propTypes يمكننا أن نضبط كيف يجب أن تكون الخاصيات وكيف نتحقق منها. سنتحقق في المثال أدناه لنرى إن كانت الخاصيتان propArray و propObject من نوع البيانات الصحيح وسنرسلها إلى المكوِّن عند تهيئته: 

import PropTypes from 'prop-types';

class MyComponent extends React.Component {

  static propTypes = {

    propArray: PropTypes.array.isRequired,

    propFunc: PropTypes.func.isRequired,

  }




  render() {

    return (<div>

      propArray: {this.props.propArray.toString()} 

      <br /><br />

      propFunc returns: {this.props.propFunc()} 

    </div>);

  }

};

// لهذا المكوِّن خاصياتٌ خطأ

ReactDOM.render(<MyComponent propArray={{test:'test'}} />, document.getElementById('app'));




// لهذا المكوِّن خاصياتٌ صحيحة

// ReactDOM.render(<MyComponent propArray={[1,2]} propFunc={function(){return 3;}} />, document.getElementById('app'));

لم نرسل الخاصيات الصحيحة المُحدَّدة عبر propTypes لتوضيح أنَّ فعل ذلك سيؤدي إلى حدوث خطأ. ستؤدي الشيفرة السابقة إلى ظهور رسالة الخطأ الآتية: 

Warning: Failed propType: Invalid prop `propArray` of type `object` supplied to `MyComponent`, expected `array`

Warning: Failed propType: Required prop `propFunc` was not specified in `MyComponent`.

Uncaught TypeError: this.props.propFunc is not a function

توفِّر React عددًا من المتحققات الداخلية (مثل PropTypes[VALIDATOR]‎) والتي سأشرحها بإيجاز فيما يلي، إضافةً إلى إمكانية إنشاء متحققات مخصصة.

(انتقلت إلى مكتبة مختلفة*)

المتحققات الأساسية من الأنواع

React.PropTypes.string إذا اُستخدِمَت خاصيةٌ، فتحقق أنها سلسلة نصية
React.PropTypes.bool إذا اُستخدِمَت خاصيةٌ، فتحقق أنها قيمة منطقية
React.PropTypes.func إذا اُستخدِمَت خاصيةٌ، فتحقق أنها دالة
React.PropTypes.number إذا اُستخدِمَت خاصيةٌ، فتحقق أنها عدد
React.PropTypes.object إذا اُستخدِمَت خاصيةٌ، فتحقق أنها كائن
React.PropTypes.array إذا اُستخدِمَت خاصيةٌ، فتحقق أنها مصفوفة
React.PropTypes.any إذا اُستخدِمَت خاصيةٌ، فتحقق أنها من أي نوع من الأنواع

متحققات القيم المطلوبة

React.PropTypes.[TYPE].isRequired‎ إضافة ‎.isRequired إلى أي نوع من المتحققات سيؤدي إلى جعل الخاصية مطلوبةً (مثال ذلك propTypes:{propFunc:React.PropTypes.func.isRequired})

متحققات العناصر

React.PropTypes.element الخاصية هي عنصر React.
React.PropTypes.node أي شيء يمكن تصييره: الأرقام، أو السلاسل النصية، أو العناصر، أو مصفوفة تحتوي هذه الأنواع

المتحققات المتعددة

React.PropTypes.oneOf(['Mon','Fri'])‎ الخاصية هي أحد أنواع القيم المُحدَّدة
React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.number])‎ الخاصية هي كائن يمكن أن يكون أحد أنواع القيم المُحدَّدة

متحققات المصفوفات والكائنات

React.PropTypes.arrayOf(React.PropTypes.number)‎ الخاصية هي مصفوفة تحتوي على نوع واحد من القيم
React.PropTypes.objectOf(React.PropTypes.number)‎ هي كائن يحتوي على أحد أنواع القيم
React.PropTypes.instanceOf(People)‎ هي كائن يكون نسخةً من دالةٍ بانية معينة (كما في الكلمة المحجوزة instanceof)
React.PropTypes.shape({color:React.PropTypes.string,size: React.PropTypes.number})‎ هي كائن يحتوي على خاصيات من أنواعٍ معينة

المتحققات المخصصة

function(props, propName, componentName){}‎

توفير دالة خاصة بك للتحقق

ترجمة -وبتصرف- للفصل React Component Properties من كتاب React Enlightenment

]]>835Tue, 25 Feb 2020 08:41:24 +0000مكونات React الأساسية (React Components)https://academy.hsoub.com/programming/javascript/react/%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-react-%D8%A7%D9%84%D8%A3%D8%B3%D8%A7%D8%B3%D9%8A%D8%A9-react-components-r834/

يبيّن هذا الدرس كيفية استخدام عقد React لإنشاء مكوِّنات React أساسية.

ما هي مكونات React؟

سنشرح في هذا القسم طبيعة مكونات React ونغطي بعض التفاصيل التي تتعلق بإنشاء مكونات React.

عادةً تكون واجهة المستخدم (تدعى بالشجرة tree) مقسمةً إلى أقسامٍ منطقية تسمى بالفروع (branches)، وتصبح هذه الشجرة نقطة البداية للمكوِّن وكل قسم في واجهة المستخدم يصبح مكونًا فرعيًا التي يمكن بدورها أن تُقسَّم إلى مكونات فرعية؛ ويؤدي ذلك إلى تنظيم واجهة المستخدم ويسمح أيضًا لتغيرات البيانات والحالات أن تمر من الشجرة إلى الفروع ومنها إلى الفروع الداخلية.

إذا كان الشرح السابق لمكونات React مبهمًا فأقترح عليك أن تعاين واجهة المستخدم لأي تطبيق وتحاول ذهنيًا تقسيمها إلى أقسام منطقية. من المحتمل تسمية هذه الأقسام بالمكونات. مكوِّنات React هي تجريد برمجي (programmatic abstraction) لعناصر واجهة المستخدم وللأحداث ولتغيرات الحالة ولتغيرات DOM والغرض منها هو تسهيل إنشاء هذه الأقسام والأقسام الفرعية. فعلى سبيل المثال، الكثير من واجهات المستخدم للتطبيقات تحتوي على مكوِّن للتخطيط (layout) كأحد المكونات الرئيسية في واجهة المستخدم، وهذا المكون يحتوي بدوره على على مكونات فرعية مثل مكوِّن البحث ومكوِّن قائمة التنقل. ويمكن تقسيم مكوِّن البحث مثلًا إلى مكونات فرعية، فيمكن أن يكون حقل الإدخال منفصلًا عن زر البحث. وكما ترى، يمكن بسهولة أن تصبح واجهة المستخدم مكونةً من شجرةٍ من المكونات، وتُنشَأ العديد من واجهات المستخدم للتطبيقات حاليًا باستخدام مكونات ذاتُ غرضٍ وحيد. توفِّر React الطرائق اللازمة لإنشاء هذه المكونات عبر React.Component إذا كنتَ تستخدم الأصناف في ES6. تقبل الدالة createReactClass()‎ من الحزمة create-react-class كائن ضبط وتُعيد نسخةً (instance) من مكوِّن React.

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

إنشاء مكونات React

يمكن إنشاء مكوِّن React الذي قد تكون له حالة state باستدعاء الدالة createReactClass()‎ من الحزمة create-react-class (أو اشتقاق React.Component إذا كنتَ تستخدم الأصناف في ES6). هذه الدالة (أو الدالة البانية) تأخذ وسيطًا واحدًا هو كائن يُستخدَم لتوفير تفاصيل المكوِّن. الجدول الآتي يبيّن خيارات الضبط المتاحة لمكوِّنات React:

خيار الضبط الشرح
render قيمة مطلوبة، وتُمثِّل عادةً دالةً تُعيد عقد React أو مكوِّنات React الأخرى أو القيمة null أو false.
getInitialState كائن يحتوي على القيمة الابتدائية للخاصية this.state، يمكنك الحصول على قيمتها إذا كنت تستعمل الأصناف في ES6 عبر استخدام this.state في الدالة البانية.
getDefaultProps كائن يحتوي على القيم التي ستُضبَط في الخاصية this.props، يمكنك ضبط قيمتها إذا كنت تستعمل الأصناف في ES6 باستخدام الخاصية static defaultProps في الصنف المشتق.
propTypes كائن يحتوي على مواصفات التحقق من الخاصيات props.
mixins مصفوفة من المخاليط (mixins، وهي كائنات تحتوي على توابع [methods]) التي يمكن مشاركتها بين المكوِّنات. لاحظ أن ES6 لا تدعم المخاليط، فلن تتمكن من استعمالها إذا كنتَ تستعمل الأصناف في ES6.
statics كائن يحتوي على التوابع الساكنة (static methods).
displayName سلسلة نصية تعطي اسمًا للمكوِّن، وتُستخدَم في رسائل التنقيح، وستُضبَط هذه القيمة تلقائيًا إذا كنّا نستعمل JSX.
componentWillMount دالة رد نداء (callback function) التي ستستدعى مرةً واحدةً تلقائيًا قبل التصيير الابتدائي مباشرةً‎.
componentDidMount دالة رد نداء (callback function) التي ستستدعى مرةً واحدةً تلقائيًا بعد التصيير الابتدائي مباشرةً‎.
UNSAFE_componentWillReceiveProps دالة رد نداء (callback function) التي ستستدعى تلقائيًا عندما يستلم المكوِّن خاصياتٍ props جديدة‎.
shouldComponentUpdate دالة رد نداء (callback function) التي ستستدعى تلقائيًا عندما يستلم المكوِّن خاصياتٍ props جديدة‎ أو تغيّرت حالته state.
UNSAFE_componentWillUpdate دالة رد نداء (callback function) التي ستستدعى تلقائيًا قبل أن يستلم المكوِّن خاصياتٍ props جديدة‎ أو تغيّرت حالته state.
componentDidUpdate دالة رد نداء (callback function) التي ستستدعى تلقائيًا بعد نقل التحديثات التي جرت على المكوِّن إلى DOM.
componentWillUnmount دالة رد نداء (callback function) التي ستستدعى تلقائيًا قبل إزالة المكوِّن من شجرة DOM.

أهم خيارات ضبط المكوِّنات هو render، وهذا الخيار مطلوبٌ وهو دالةٌ تعيد عقد ومكونات React. وجميع خيارات ضبط المكوِّنات الأخرى اختيارية.

الشيفرة الآتية هي مثالٌ عن إنشاء المكوِّن Timer من عقد React باستخدام createReactClass()‎ (سنستخدم الحزمة create-react-class في هذا المثال لترى كيف تستعمل، وسنستعمل الأصناف في ES6 لإنشاء بقية مكونات React لاحقًا).

احرص على قراءة التعليقات في الشيفرة: 

var createReactClass = require('create-react-class');

// وتمرير كائن من خيارات الضبط Timer إنشاء المكون
var Timer = createReactClass({ 

  	 // this.state دالة تعيد كائنًا والذي سيصبح قيمة 
    getInitialState: function() { 

        return {

            secondsElapsed: Number(this.props.startTime) || 0

        };

    },

    tick: function() { // تابع مخصص

        this.setState({

            secondsElapsed: this.state.secondsElapsed + 1

        });

    },

    componentDidMount: function() { 
         // دالة رد النداء لدورة حياة المكوِّن
        this.interval = setInterval(this.tick, 1000);

    },

    componentWillUnmount: function() { 
         // دالة رد النداء لدورة حياة المكوِّن
        clearInterval(this.interval);

    },

    render: function() {    
         // JSX باستخدام صيغة React دالة تعيد عقد
        return (

            <div>

                Seconds Elapsed: {this.state.secondsElapsed}

            </div>

        );

    }

});


ReactDOM.render(< Timer startTime="60" />, app); // startTime تمرير قيمة الخاصية

تبدو الشيفرة السابقة طويلةً، لكن أغلبية الشيفرة السابقة تُنشِئ المكوِّن بتمرير كائن إلى الدالة createReactClass()‎ لإنشاء مكوِّنٍ مع كائن ضبط يحتوي على خمس خاصيات (وهي getInitialState و tick و componentDidMount و componentWillUnmount و render).

لاحظ أنَّ اسم المكوِّن Timer يبدأ بحرفٍ كبير، فعند إنشاء مكوِّنات React مخصصة، عليك أن تجعل أول حرفٍ من اسمها كبيرًا. أضف إلى ذلك أنَّ القيمة this ضمن خيارات الضبط تُشير إلى نسخة المكوِّن المُنشَأة. سنناقش الواجهة البرمجية للمكوِّنات بالتفصيل في نهاية هذا الدرس، لكن دعنا نتأمل خيارات الضبط المتاحة عند تعريف مكوِّن React وكيف استطعنا الإشارة إلى المكوِّن باستخدام الكلمة المحجوزة this. لاحظ أيضًا أنني أضفت في المثال السابق تابعًا خاصًا بالمكوِّن (وهو tick).

بعد تركيب (mount) المكوِّن، فيمكننا استخدام الواجهة البرمجية التي تحتوي على أربعة توابع، وهي مبيّنة في الجدول الآتي:

التابع مثال الشرح
setState()‎ this.setState({mykey: 'my new value'}); this.setState(function(previousState, currentProps) { return {myInteger: previousState.myInteger + 1}; });‎ التابع الرئيسي التي يُستخدَم لإعادة تصيير المكوِّن ومكوناته الفرعية.
ForceUpdate()‎ this.forceUpdate(function(){//callback});‎ استدعاء التابع forceUpdate()‎ سيؤدي إلى استخدام التابع render()‎ دون استدعاء shouldComponentUpdate()‎.

أكثر تابع مستخدم في واجهة المكوِّنات البرمجية هو التابع setState()‎، وسيُشرَح استخدامه في درس حالة مكونات React.

ملاحظات

  • تسمى دوال رد النداء في خيارات ضبط المكوِّن (وهي componentWillUnmount و componentDidUpdate و UNSAFE_componentWillUpdate و shouldComponentUpdate و UNSAFE_componentWillReceiveProps و componentDidMount و UNSAFE_componentWillMount)‎ بتوابع دورة الحياة (lifecycle methods) لأنَّ هذه التوابع المختلفة ستُنفَّذ في نقاط معيّنة في دورة حياة المكوِّن.
  • الدالة createReactClass هي دالة تُنشِئ نسخةً من المكوِّنات وهي موجودة في الحزمة create-react-class.
  • الدالة render()‎ هي دالة صرفة، وهذا يعني أنها لا تعدّل حالة المكوِّن، وتعيد نفس النتيجة في كل مرة تستدعى فيها، ولا تقرأ أو تكتب إلى DOM أو تتفاعل مع المتصفح (باستخدام setTimout على سبيل المثال). فإذا أردت التعامل مع المتصفح، فافعل ذلك في التابع componentDidMount()‎ أو غيره من توابع دورة الحياة. الإبقاء على الدالة render()‎ صرفةً يجعل التصيير عمليًا ويُسهِّل التفكير في المكوِّنات.

المكونات تعيد عقدة أو مكون واحد

قيمة خيار الضبط render التي تُعرَّف عند إنشاء المكوِّن يجب أن تعيد مكوِّن أو عقدة React واحدة فقط. هذه العقدة أو المكون يمكن أن تحتوي على أي عدد من الأبناء.

عقدة البداية في الشيفرة الآتية يمكن أن تحتوي هذه العقدة على أي عدد من العقد الأبناء: 

class MyComponent extends React.Component {

  render() {

    return <reactNode> <span>test</span> <span>test</span> </reactNode>;

  }

};


ReactDOM.render(<MyComponent />, app);

لاحظ أننا تستطيع إعادة عقد React بجعلها على عدّة أسطر، ويمكنك أن تحيط القيمة المعادة بقوسين هلاليين (). لاحظ كيف أعدنا المكوِّن MyComponent المُعرَّف باستخدام JSX بوضعه بين قوسين: 

class MyComponent extends React.Component {

  render() {

    return (

      <reactNode> 

          <span>test</span>

          <span>test</span> 

      </reactNode>

    );

  }

};




ReactDOM.render(<MyComponent />, app);

سيحدث خطأ إذا حاولنا إعادة أكثر من عقدة React واحدة. يمكنك أن تفكر فيها مليًا، فالخطأ يحدث لأنَّ من غير الممكن إعادة دالتَي React.createElement()‎ باستخدام JavaScript. 

class MyComponent extends React.Component {

  render() {

    return (

       

          <span>test</span>

          <span>test</span> 

      

    );

  }

};




ReactDOM.render(<MyComponent />, app);

ستؤدي الشيفرة السابقة إلى حدوث الخطأ الآتي: 

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (8:3)




   6 |     return (

   7 |                  <span>test</span>

\>  8 |                  <span>test</span>

     |                  ^

   9 |  );

  10 |   }

  11 | });

من الشائع أن نرى المطورين يضيفون عنصر حاوي لتفادي هذا الخطأ.

هذه المشكلة تؤثر على المكوِّنات أيضًا كما تؤثر على عقد React. فلا يمكن إعادة إلا مكوِّنٍ وحيد، ولكن يمكن أن يمتلك هذا المكوِّن عددًا غير محدودٍ من الأبناء. 

class MyComponent extends React.Component {

  render() {

    return (

      <MyChildComponent/>

    );

  }

};



class MyChildComponent extends React.Component {

  render() {

    return <test>test</test>;

  }

};


ReactDOM.render(<MyComponent />, app);

إذا أعدتَ مكونين متجاورين، فسيحدث نفس الخطأ: 

var MyComponent = createReactClass({

  render: function() {

    return (

        <MyChildComponent/>

        <AnotherChildComponent/>

    );

  }

});




var MyChildComponent = createReactClass({

  render: function() {return <test>test</test>;}

});




var AnotherChildComponent = createReactClass({

  render: function() {return <test>test</test>;}

});


ReactDOM.render(<MyComponent />, app);

رسالة الخطأ: 

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (8:2)




   6 |     return (

   7 |          <MyChildComponent/>

\>  8 |          <AnotherChildComponent/>

     |          ^

   9 |  );

  10 |   }

  11 | });

الإشارة إلى نسخة المكون

عندما يُصيّر أحد العناصر (render) فستُنشأ نسخة من مكوِّن React من الخيارات المُمرَّرة إليه، يمكننا الوصول إلى هذه النسخة (instance) وخاصياتها (مثل this.props) وتوابعها (مثل this.setState()‎) بطريقتين.

أوّل طريقة هي استخدام الكلمة المحجوزة this داخل دالة ضبط المكوِّن. ففي المثال الآتي، جميع تعابير console.log(this) ستُشير إلى نسخة المكوِّن: 

class Foo extends React.Component {

  componentWillMount(){ console.log(this); }

  componentDidMount(){ console.log(this); }

  render() { return <div>{console.log(this)}</div>; }

};




ReactDOM.render(<Foo />, document.getElementById('app'));

الطريقة الأخرى للحصول على مرجعية لنسخة المكوِّن تتضمن استخدام القيمة المُعادة من استدعاء الدالة ReactDOM.render()‎. بعبارةٍ أخرى، ستُعيد الدالة ReactDOM.render()‎ مرجعيةً إلى أعلى مكوِّن جرى تصييره: 

class Bar extends React.Component {

  render() {

    return <div></div>;

  }

};


var foo; // تخزين مرجعية إلى النسخة خارج دالة


class Foo extends React.Component {

  render() {

    return <Bar>{foo = this}</Bar>;

  }

};

var FooInstance = ReactDOM.render(<Foo />, document.getElementById('app'));


// Foo التأكد أنَّ القيمة المُعادة هي مرجعية إلى نسخة
console.log(FooInstance === foo); // true الناتج

ملاحظات

  • تُستخدَم الكلمة المحجوزة this داخل المكوِّن للوصول إلى خصائص المكوِّن كما في this.props.[NAME OF PROP] و this.props.children و this.state. يمكن أن تستخدم أيضًا لاستدعاء خاصيات وتوابع الصنف التي تتشاركها جميع المكوِّنات مثل this.setState‎.

تعريف الأحداث في المكونات

يمكن إضافة الأحداث إلى عقد React داخل خيار الضبط render كما ناقشنا سابقًا.

سنضبط -في المثال الآتي- حدثَي React (وهما onClick و onMouseOver) على عقد React بصيغة JSX كما لو كنّا نضبط خيارات المكوِّن: 

class MyComponent extends React.Component {

  mouseOverHandler(e) {

    console.log('you moused over');

    console.log(e); // sysnthetic event instance

  }

  clickHandler(e) {

    console.log('you clicked');

    console.log(e); // sysnthetic event instance

  }

  render(){

    return (

<div onClick={this.clickHandler} onMouseOver={this.mouseOverHandler}>click or mouse over</div>

    )

  }

};


ReactDOM.render(<MyComponent />, document.getElementById('app'));

عندما تُصيّر React مكوِّنًا فستبحث عن خاصيات ضبط الأحداث في React (مثل onClick)، وتعامل هذه الخاصيات معاملةً مختلفةً عن بقية الخاصيات (جميع أحداث React مذكورة في الجدول أدناه). ومن الجلي أنَّ الأحداث في شجرة DOM الحقيقية سترتبط مع معالجاتها وراء الكواليس.

أحد جوانب هذا الارتباط هو جعل سياق دالة معالجة الحدث في نفس مجال (scope) نسخة المكوِّن. لاحظ أنَّ قيمة this داخل دالة معالجة الحدث ففي المثال الآتي ستُشير إلى نسخة المكوِّن نفسها. 

class MyComponent extends React.Component {

  constructor(props) {

    super(props);



 
    // this هذا الربط ضروري لتعمل 

    this.mouseOverHandler = this.mouseOverHandler.bind(this);

  }




  mouseOverHandler(e) {

    console.log(this); // إلى نسخة الكائن this تشير  

    console.log(e); // sysnthetic event instance

}

  render(){

    return (

      <div onMouseOver={this.mouseOverHandler}>mouse over me</div>

    )

  }

};




ReactDOM.render(<MyComponent />, document.getElementById('app'));

تدعم React الأحداث الآتية:

نوع الحدث الأحداث خاصيات متعلقة به
الحافظة
  • OnCopy onCut onPaste
  • DOMDataTransfer
  • clipboardData

التركيب

  • OnCompositionEnd
  • onCompositionStart
  • onCompositionUpdate
  • data

لوحة المفاتيح

  • OnKeyDown
  • onKeyPress
  • onKeyUp
  • AltKey charCode
  • ctrlKey
  • getModifierState(key)
  • key keyCode locale
  • location metaKey
  • repeat shiftKey which

التركيز

  • OnChange onInput onSubmit
  • DOMEventTarget
  • relatedTarget

النماذج

  • OnFocus onBlur

 

الفأرة

  • OnClick
  • onContextMenu
  • onDoubleClick
  • onDrag
  • onDragEnd
  • onDragEnter
  • onDragExit
  • onDragLeave
  • onDragOver
  • onDragStart
  • onDrop
  • onMouseDown
  • onMouseEnter
  • onMouseLeave
  • onMouseMove
  • onMouseOut
  • onMouseOver
  • onMouseUp
  • AltKey button buttons
  • clientX
  • clientY
  • ctrlKey
  • getModifierState(key)
  • metaKey
  • pageX
  • pageY DOMEventTarget
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

الاختيار

  • onSelect

 

اللمس

  • OnTouchCancel onTouchEnd onTouchMove onTouchStart
  • AltKey DOMTouchList
  • changedTouches
  • ctrlKey
  • getModifierState(key)
  • metaKey shiftKey
  • DOMTouchList
  • targetTouches
  • DOMTouchList touches

واجهة المستخدم

  • onScroll
  • Detail
  • DOMAbstractView
  • view

الدولاب

  • onWheel
  • DeltaMode deltaX deltaY deltaZ

الوسائط

  • OnAbort
  • onCanPlay
  • onCanPlayThrough
  • onDurationChange
  • onEmptied
  • onEncrypted
  • onEnded
  • onError
  • onLoadedData
  • onLoadedMetadata
  • onLoadStart
  • onPauseonPlay
  • onPlaying
  • onProgress
  • onRateChange
  • onSeeked
  • onSeeking
  • onStalled
  • onSuspend
  • onTimeUpdate
  • onVolumeChange
  • onWaiting

 

الصور

  • onLoad onError

 

الحركات

  • onAnimationStart
  • onAnimationEnd
  • onAnimationIteration
  • animationName
  • pseudoElement
  • elapsedTime

الانتقالات

  • onTransitionEnd
  • propertyName
  • pseudoElement
  • elapsedTime

ملاحظات

  • توحِّد React التعامل مع الأحداث لكي تسلك سلوكًا متماثلًا في جميع المتصفحات.
  • تنطلق الأحداث في React في مرحلة الفقاعات (bubbling phase). لإطلاق حدث في مرحلة الالتقاط (capturing phase) فأضف الكلمة "Capture" إلى اسم الحدث، أي أنَّ الحدث onClick سيصبح onClickCapture).
  • إذا احتجتَ إلى تفاصيل كائن الأحداث المُنشَأ من المتصفح، فيمكنك الوصول إليه باستخدام الخاصية nativeEvent في كائن SyntheticEvent المُمرَّر إلى دالة معالجة الأحداث في React.
  • لا تربط React الأحداث إلى العقد نفسها، وإنما تستخدم «تفويض الأحداث» (event delegation).
  • يجب استخدام e.stopPropagation()‎ أو e.preventDefault()‎ يدويًا لإيقاف انتشار الأحداث بدلًا من استخدام return false;‎.
  • لا تدعم React جميع أحداث DOM، لكن ما يزال بإمكاننا الاستفادة منها باستخدام توابع دورة الحياة في React.

تركيب المكونات

إذا لم يكن واضحًا لك أنَّ مكوِّنات React تستطيع أن تستخدم مكوِّنات React الأخرى فاعلم أنَّها تستطيع فعل ذلك. فيمكن أن تحتوي دالة الضبط render عند تعريف أحد مكوِّنات React إشارةً إلى المكونات الأخرى. فعندما يحتوي مكوِّنٌ ما على مكوِّنٍ آخر فيمكننا أن نقول أنَّ المكوِّن الأب «يمتلك» مكوِّنًا ابنًا (وهذا يسمى بالتركيب [composition]).

في الشيفرة أدناه، يحتوي (أو يمتلك) المكوِّن BadgeList المكوِّنين BadgeBill و BadgeTom: 

class BadgeBill extends React.Component {

  render() {return <div>Bill</div>;}

};


class BadgeTom extends React.Component {

  render() {return <div>Tom</div>;}

};

class BadgeList extends React.Component {

  render() {

    return (

    <div>

      <BadgeBill/>

      <BadgeTom />

    </div>);


  }

};


ReactDOM.render(<BadgeList />, document.getElementById('app'));

جعلتُ الشيفرة السابقة بسيطةً عمدًا لتوضيح كيفية تركيب المكونات، وسنلقي في الدرس القادم نظرةً عن كيفية كتابة شيفرات التي تستخدم الخاصيات props لإنشاء مكوِّن Badge عام (generic). يمكن أن يأخذ المكوِّن العام Badge أي قيمة مقارنةً مع كتابة Badge مكتوبٌ فيه الاسم سابقًا.

ملاحظات

  • سمة أساسية لكتابة واجهات مستخدم قابلة للصيانة والإدارة هو تركيب المكوِّنات. صُمِّمَت مكوِّنات React لتحتوي على مكوِّناتٍ أخرى.
  • لاحظ كيف تندمج شيفرة HTML والمكونات المُعرَّفة مسبقًا مع بعضهما بعضًا في دالة الضبط render()‎.

استيعاب دورة حياة المكوِّن

تمرّ مكوِّنات React بأحداث خلال حياتها وتسمى هذه الأحداث بدورة الحياة (lifecycle events). ترتبط هذه الأحدث بتوابع دورة الحياة. يمكنك أن تتذكر أننا ناقشنا بعض تلك التوابع في بداية هذا الدرس عندما ناقشنا عملية إنشاء المكوِّنات.

توابع دورة الحياة توفِّر ارتباطات مع مراحل وطبيعة المكوِّن. ففي المثال الآتي الذي استعرته من أحد الأقسام السابقة، سنُسجِّل وقوع أحداث دورة الحياة componentDidMount و componentWillUnmount و getInitialState: 

var createReactClass = require('create-react-class');

// وتمرير كائن من خيارات الضبط Timer إنشاء المكون 
var Timer = createReactClass({  

     // this.state دالة تعيد كائنًا والذي سيصبح قيمة
    getInitialState: function() {  

        return {

            secondsElapsed: Number(this.props.startTime) || 0

        };

    },

    tick: function() { // تابع مخصص

        this.setState({

            secondsElapsed: this.state.secondsElapsed + 1

        });

    },

    componentDidMount: function() { // دالة رد النداء لدورة حياة المكوِّن

        this.interval = setInterval(this.tick, 1000);

    },

    componentWillUnmount: function() { // دالة رد النداء لدورة حياة المكوِّن

        clearInterval(this.interval);

    },

    render: function() {    
         // JSX باستخدام صيغة React دالة تعيد عقد
        return (

            <div>

                Seconds Elapsed: {this.state.secondsElapsed}

            </div>

        );

    }

});


ReactDOM.render(< Timer startTime="60" />, app); // startTime تمرير قيمة الخاصية

يمكن تقسيم هذه التوابع إلى ثلاثة تصنيفات: مرحلة التركيب (mount) والتحديث (update) والإزالة (unmount).

سأعرض جدولًا في كل تصنيف يحتوي على توابع دورة الحياة الخاصة به.

مرحلة التركيب

تحدث مرحلة التركيب (mounting phase) مرةً واحدةً في دورة حياة المكوِّن، وهي أول مرحلة وتبدأ عندما نُهيِّئ المكوِّن، وفي هذه المرحلة ستُعرَّف وتُضبَط خاصيات وحالة المكوِّن، وسيُركَّب المكوِّن مع جميع أبنائه إلى واجهة المستخدم المُحدَّدة (سواءً كانت DOM أو UIView أو غيرها). وفي النهاية يمكننا أن نجري بعض عمليات المعالجة إن كان ذلك لازمًا.

التابع الشرح
getInitialState()‎ سيستدعى قبل تركيب المكوِّن، ويجب أن تعرِّف المكونات ذات الحالة (stateful) هذا التابع وتعيد بيانات الحالة الابتدائية.
componentWillMount()‎ سيستدعى مباشرةً قبل تركيب المكوِّن.
componentDidMount()‎ سيستدعى مباشرةً بعد تركيب المكوِّن. عملية التهيئة التي تتطلب وجود عقد DOM ستُعرَّف في هذا التابع.

مرحلة التحديث

تقع مرحلة التحديث (updating phase) مرارًا وتكرارًا خلال دورة حياة المكوِّن، وفي هذه المرحلة يمكننا إضافة خاصيات جديدة أو تغيير الحالة أو معالجة تفاعلات المستخدم أو التواصل مع شجرة المكوِّنات، وسنقضي جُلَّ وقتنا في هذه المرحلة.

التابع الشرح
componentWillReceiveProps(object nextProps)‎ *
shouldComponentUpdate(object nextProps, object nextState)‎ سيستدعى عندما يقرر المكوِّن أنَّ أي تغييرات ستحتاج إلى تحديث شجرة DOM. إذا أردت استخدامه فيجب أن تقارن this.props مع nextProps و this.state مع nextState وتُعيد القيمة false لتخبر React بإمكانية تجاوز التحديث.
componentWillUpdate(object nextProps, object nextState)‎ سيستدعى مباشرةً قبل وقوع التحديث. لا يمكنك استدعاء this.setState()‎ هنا.
componentDidUpdate(object prevProps, object prevState)‎ سيستدعى مباشرةً بعد وقوع التحديث.

مرحلة الإزالة

تقع مرحلة الإزالة (unmounting phase) مرةً واحدةً في دورة حياة المكوِّنات، وهي تحدث عند إزالة نسخة المكوِّن من واجهة المستخدم. ويمكن أن يحدث ذلك عندما ينتقل المستخدم إلى صفحة أخرى أو تتغير واجهة المستخدم أو اختفى المكوِّن …إلخ.

التابع الشرح
componentWillUnmount()‎ سيستدعى مباشرةً قبل إزالة المكوِّن وحذفه. يجب أن تأتي عمليات «التنظيف» هنا.

ملاحظات

  • التابعان componentDidMount و componentDidUpdate هما مكانان جيدان تضع فيهما البنى المنطقية للمكتبات.
  • راجع توثيق React في موسوعة حسوب لتأخذ نظرةً تفصيليةً حول أحداث دورة حياة مكونات React.
  • ترتيب مرحلة التركيب:
  • التهيئة الابتدائية
    1. getDefaultProps()‎ ‏(React.createClass) أو MyComponent.defaultProps (صنف ES6)
    2. getInitialState()‎ ‏(React.createClass) أو this.state (دالة بانية في ES6)
    3. componentWillMount()‎
    4. render()‎
  • عملية تهيئة الأبناء وضبط دورة حياتهم
    1. componentDidMount()‎
  • ترتيب مرحلة التحديث:
    1. componentWillReceiveProps()‎
    2. shouldComponentUpdate()‎
    3. render()‎
  • توابع دورة الحياة للأبناء
    1. componentWillUpdate()‎
  • ترتيب مرحلة الإزالة:
    1. componentWillUnmount()‎
    2. توابع دورة الحياة للأبناء
    3. إزالة نسخة المكوِّن

الوصول إلى المكونات أو العقد الأبناء

إذا احتوى مكوِّنٌ على مكونات أبناء أو عقد React داخله (كما في أو test) فيمكن الوصول إلى عقد React أو نسخ المكوِّنات الأبناء باستخدام الخاصية this.props.children.

عند استخدام المكوِّن Parent في الشيفرة التالية، الذي يحتوي على عنصرَي

والتي بدورها تحتوي على عقد React نصية. يمكن الوصول إلى جميع نسخ الأبناء داخل المكوِّن باستخدام this.props.children. وسأحاول في المثال الآتي أن أصل إليها داخل تابع دورة الحياة componentDidMount للعنصر الأب Parent: 
class Parent2 extends React.Component {

  componentDidMount() {

    // <span>child2text</span> الوصول إلى  
     // ولا حاجة لاستخدام مصفوفة لطالما كان هنالك ابن واحد فقط

    console.log(this.props.children);

    // <span> لأننا نحصل على ابن العنصر child2text سينتج   

    console.log(this.props.children.props.children);


  }

  render() {return <div />;}

}


class Parent extends React.Component {

  componentDidMount() {

    // <div>test</div><div>test</div> الوصول إلى مصفوفة تحتوي على 

    console.log(this.props.children);

    // في المصفوفة <div> لأننا نصل إلى أول عنصر childtext سينتج

    console.log(this.props.children[1].props.children);

  }

  render() {return <Parent2><span>child2text</span></Parent2>;}

}




  ReactDOM.render(

  <Parent><div>child</div><div>childtext</div></Parent>,

  document.getElementById('app')

  );

تعيد الخاصية this.props.children للمكوِّن Parent مصفوفةً تحتوي على إشارات لنسخ كائنات عقد React الأبناء. سنعرض هذه المصفوفة باستخدام console.log، أضف إلى ذلك أننا سنعرض في المكوِّن Parent قيمة العنصر الابن للعقدة الأولى (أي سنعرض قيمة العقدة النصية).

لاحظ عندما استخدمنا المكوِّن Parent2 داخل المكوِّن Parent كان المكوِّن Parent2 يحتوي على عقدة React وحيدة هي child2text وبالتالي ستكون قيمة الخاصية this.props.children في تابع دورة الحياة componentDidMount للمكوِّن Parent2 هي إشارة مباشرة إلى عقدة في React، وليست مصفوفةً تحتوي على عنصرٍ وحيد.

ولمّا كان من المحتمل أن تعيد الخاصية this.props.children مجموعةً واسعةً من العقد، فتوفِّر React مجموعةً من الأدوات للتعامل معها، وهذه الأدوات مذكورة في الجدول أدناه.

الأداة الشرح
React.Children.map(this.props.children, function(){})‎ تستدعي دالة لكل عنصر ابن مباشر موجود ضمن children مع تعيين this إلى قيمة thisArg. إن كان children عبارة عن جزء (fragment) مع مفتاح أو مصفوفة فلن تُمرَّر الدالة للكائن الحاوي. إن كانت قيمة children هي null أو undefined فستُعيد null أو undefined بدلًا من المصفوفة.
React.Children.forEach(this.props.children, function(){})‎ مماثلة للتابع React.Children.map()‎ ولكن لا تُعيد مصفوفة.
React.Children.count(this.props.children)‎ تُعيد العدد الكلي للمكوّنات الموجود ضمن children، مُكافئ لعدد المرات التي يُمرَّر فيها رد النداء إلى map أو التي يُستدعى فيها forEach.
React.Children.only(this.props.children)‎ تتحقّق من أنّ children يمتلك فقط ابنًا واحدًا (عنصر React) وتُعيده. فيما عدا ذلك سيرمي هذا التابع خطأً.
React.Children.toArray(this.props.children)‎ تُعيد بنية البيانات children كمصفوفة مع تعيين مفتاح لكل عنصر ابن. تكون مفيدةً إن أردت التعامل مع مجموعة من العناصر الأبناء في توابع التصيير لديك، خاصّة إن أردت إعادة ترتيب أو تجزئة this.props.children قبل تمريره.

ملاحظات

  • عندما يكون هنالك عنصرٌ ابن وحيد، فستكون قيمة this.props.children هي العنصر نفسه دون أن يحتوى في مصفوفة. وهذا يوفِّر عملية تهيئة المصفوفة.
  • قد يربكك بدايةً أنَّ قيمة children ليست ما يعيده المكوِّن، وإنما ما هو محتوى داخل المكوِّن.

استخدام الخاصيات ref

تجعل الخاصية ref من الممكن تخزين نسخة من عنصر أو مكوِّن React معيّن باستخدام دالة الضبط render()‎. وهذا مفيدٌ جدًا عندما تريد الإشارة من داخل المكوِّن إلى عنصر أو مكوِّن آخر محتوى داخل الدالة render()‎.

لإنشاء مرجعية، ضع الخاصية ref مع ضبط دالة كقيمةٍ لها في أي عنصر أو مكوِّن، ثم من داخل الدالة سيكون أول معامل (parameter) داخل مجال الدالة يشير إلى العنصر أو المكوِّن الذي عُرِّفَت الخاصية ref عليه.

على سبيل المثال، سنعرض المحتويات المرجعية المشار إليها باستخدام ref عبر console.log: 

class C2 extends React.Component {

  render() {return <span ref={function(span) {console.log(span)}} />}

}

class C1 extends React.Component {

  render() {

    return(

    <div>

      <C2 ref={function(c2) {console.log(c2)}}></C2>

      <div ref={function(div) {console.log(div)}}></div>

  </div>);

  }

}

ReactDOM.render(<C1 ref={function(ci) {console.log(ci)}} />,document.getElementById('app'));

لاحظ أنَّ الإشارات إلى المرجعيات تعيد نسخ المكوِّنات، بينما الإشارات إلى عناصر React تعيد مرجعيات إلى عناصر DOM في شجرة DOM الحقيقية (أي ليست مرجعيةً تشير إلى شجرة DOM الافتراضية، وإنما شجرة DOM الحقيقية).

استخدامٌ شائعٌ للخاصية ref هو تخزين مرجعية إلى نسخة المكوِّن. ففي الشيفرة الآتية سأستخدم دالة رد نداء ref على حقل إدخال input نصي لتخزين مرجعية لنسخة المكوِّن لكي تستطيع التوابع الأخرى الوصول إليها عبر الكلمة المحجوزة this (كما في this.textInput.focus()‎): 

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.handleClick = this.handleClick.bind(this)

  }

  handleClick() {

    // DOM API التركيز على المحتوى النصية باستخدام 

    this.textInput.focus();

  }

  render() {

    // قيمة الخاصية ref هي دالة رد نداء التي تؤدي إلى

    // عند تركيب المكون this.textInput الإشارة إلى  

    return (

      <div>

        <input type="text" ref={(thisInput) => {this.textInput = thisInput}} />

        <input

          type="button"

          value="Focus the text input"

          onClick={this.handleClick}

        />

      </div>

    );

  }

}




ReactDOM.render(

  <MyComponent />,

  document.getElementById('app')

);

ملاحظات

  • لا يمكن ربط ref مع دالة عديم الحالة لأنَّ المكوِّن لا يملك نسخةً (instance) بعد.
  • ربما تشاهد الخاصية ref مع سلسلة نصية بدلًا من دالة؛ وهذا أمرٌ مهمل في الإصدارات المستقبلية، ومن المُفضَّل استخدام الدوال.
  • ستستدعى دالة رد نداء ref مباشرةً بعد تركيب المكوِّن.
  • تسمح لنا الإشارات إلى نسخة المكوِّن باستدعاء توابع مخصصة على المكوِّن إذا كانت موجودةً عند تعريفه.
  • كتابة المراجع مع تعبير تعريف دالة سطري يعني أنَّ React سترى كائن دالة مختلف في كل تحديث، وستستدعى ref مع القيمة null مباشرةً قبل استدعائها مع نسخة المكوِّن، أي أنَّ نسخة المكون ستزال في كل تغيير لقيمة ref وستستدعى ref القديمة مع القيمة null كوسيط.
  • يبين توثيق React ملاحظةً مهمةً «ربّما تكون رغبتك الأولى لاستخدام المراجع هي تحقيق كل ما تُريده في تطبيقك. إن كانت هذه حالتك فخُذ لحظة للتفكير حول المكان المُلائم لوضع الحالة في التسلسل الهرمي للمُكوِّنات. يتضح عادةً أنّ المكان المناسب لوضع الحالة هو في المستويات العليا من التسلسل الهرمي للمُكوِّنات.».

إجبار إعادة تصيير العنصر

من المرجّح أنَّ: لاحظتَ أنَّ استدعاء ReactDOM.render()‎ هو عملية التحميل الابتدائية للمكوِّن وجميع المكونات الفرعية له. وبعد عملية التركيب الابتدائية للمكوِّنات، ستحدث إعادة التصيير عندما:

  1. استدعي التابع setState()‎ في المكوِّن
  2. استدعي التابع forceUpdate()‎ في المكوِّن

في أي وقت يجير إعادة تصيير المكوِّن (أو يُصيّر التصيير الابتدائي) فستُصيّر جميع المكوِّنات الأبناء التابعة له داخل شجرة DOM الافتراضية والتي قد تُسبِّب تغييرًا في شجرة DOM الحقيقية (أي واجهة المستخدم). ما أريد إيصاله لك هنا هو أنَّ إعادة تصيير أحد المكوِّنات في شجرة DOM الافتراضية لا يعني بالضرورة أنَّ تحديثًا سيطرأ على شجرة DOM الحقيقية.

في المثال أدناه، سيبدأ استدعاء ReactDOM.render(< App / >, app);‎ عملية التصيير، والذي سيؤدي إلى تصيير و ، عملية إعادة التصيير التالية ستحدث عند استخدام setInterval()‎ لتابع المكوِّن setState()‎ الذي سيؤدي إلى إعادة تصيير و ، لاحظ كيف ستتغير واجهة المستخدم عند تغيير حالة now:

var Timer = createReactClass({

    render: function() {

      return (

          <div>{this.props.now}</div>

        )

    }

});




var App = createReactClass({

  getInitialState: function() {

    return {now: Date.now()};

  },




  componentDidMount: function() {

    var foo = setInterval(function() {

        this.setState({now: Date.now()});

    }.bind(this), 1000);




    setTimeout(function(){ clearInterval(foo); }, 5000);

    // .forceUpdate() لا تفعل هذا! هذا مجرد مثال توضيحي عن استخدام  

    setTimeout(function(){ this.state.now = 'foo'; this.forceUpdate() }.bind(this), 10000);

  },



  render: function() {

      return (

          <Timer now={this.state.now}></Timer>

        )

    }

});




ReactDOM.render(< App />, app);

تحدث عملية إعادة التصيير الآتية عند تشغيل setTimout()‎ واستدعاء التابع this.forceUpdate()‎ لاحظ أنَّ تحديث الحالة (this.state.now = 'foo';‎) لن تؤدي بمفردها إلى إعادة التصيير. ضبنا بداية الحالة باستخدام this.state ثم استدعينا this.forceUpdate()‎ لكي يعاد تصيير العنصر مع الحالة الجديدة.

ملاحظات

لا تُحدِّث الحالة باستخدام this.state إطلاقًا! فعلنا ذلك في المثال السابق لتبيين طريقة استخدام this.forceUpdate()‎ فحسب.

ترجمة -وبتصرف- للفصل Basic React Components من كتاب React Enlightenment

]]>834Wed, 19 Feb 2020 18:00:00 +0000مدخل إلى صيغة JavaScript Syntax Extension) JSX)https://academy.hsoub.com/programming/javascript/react/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-%D8%B5%D9%8A%D8%BA%D8%A9-javascript-syntax-extension-jsx-r777/

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

سنستخدم صيغة JSX بعد هذا المقال في بقية الكتاب ما لم نستعمل الدالة React.createElement()‎ لأغراض التوضيح.

بعد انتهائك من قراءة هذا المقال، يمكنك الاطلاع على شرح تفصيلي لجميع ميزات JSX في موسوعة حسوب.

ما هي صيغة JSX؟

JSX هي صيغة شبيهة بصيغة XML أو HTML التي تستخدمها React لتوسعة ECMAScript لكي نستطيع كتابة تعابير شبيهة بلغة XML أو HTML داخل شيفرة JavaScript. هذه الصيغة مهيئة للعمل مع برمجيات التحويل مثل Babel لتحويل النص الشبيه بشيفرات HTML في ملفات JavaScript إلى كائنات JavaScript التي تستطيع محركات JavaScript تفسيرها.

أساسيًا، عند استخدمنا لصيغة JSX يمكننا أن نكتب بنى شبيهة ببنى HTML (أي هياكل من العناصر كما في DOM) بنفس الملف الذي تكتب فيه شيفرة JavaScript، ثم يحوِّل Babel هذه التعابير إلى شيفرة JavaScript حقيقية. وعلى عكس ما جرت عليه العادة بوضع شيفرات JavaScript داخل HTML، تسمح لنا صيغة JSX بوضع شيفرات HTML داخل JavaScript.

تسمح لنا JSX بكتابة شيفرة JavaScript الآتية: 

var nav = (
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
);

وسيحولها Babel إلى الشيفرة الآتية: 

var nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

لذا يمكننا أن نعدّ JSX على أنها اختصار لاستدعاء React.createElement()‎.

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

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

«إنَّ الشيفرة البرمجية والبنى الهيكلية مرتبطتان مع بعضهما بعضًا ارتباطًا وثيقًا. أضف إلى ذلك أنَّ الشيفرات البرمجية معقدة جدًا واستخدام لغات القوالب ستجعل الأمر صعبًا جدًا. وجدنا أنَّ أفضل حل لهذه المشكلة هو توليد شيفرات HTML مباشرةً من شيفرة JavaScript، وبهذا نستطيع استخدام كامل قدرات لغة برمجية حقيقية لبناء واجهات المستخدم.»

ملاحظات

  • لا تفكر في JSX على أنها لغة قوالب، وإنما هي صيغة JavaScript خاصة يمكن تصريفها، أي أنَّ JSX هي صيغة تسمح بتحويل بنى شبيهة ببنى HTML إلى شيفرات JavaScript.

  • أداة Babel هي الأداة التي اختارها فريق تطوير React لتحويل شيفرات ES*‎ و JSX إلى شيفرة ES5. يمكنك معرفة المزيد عن Babel بقراءة توثيقه الرسمي.

  • باستخدام صيغة JSX:

    • أصبح بإمكان الأشخاص غير المتخصصين تقنيًا فهم وتعديل الأجزاء المطلوبة. فيجد مطورو CSS والمصممون صيغة JSX أكثر ألفةً من شيفرة JavaScript.

    • يمكنك استثمار كامل قدرات JavaScript في HTML وتتجنب تعلّم أو استخدام لغة خاصة بالقوالب. لكن اعلم أن JSX ليس محرّك قوالب، وإنما صيغة تصريحية للتعبير عن البنية الهيكلية الشجرية لمكونات UI.

    • سيجد المُصرِّف (compiler) أخطاءً في شيفرة HTML الخاصة بك كنتَ ستغفل عنها.

    • تحث صياغة JSX على فكر استخدام الأنماط السطرية (inline styles) وهو أمرٌ حسن.

  • صيغة JSX منفصلة عن React، ولا تحاول JSX أن تتفق مع أي مواصفة تخص HTML أو XML، وإنما هي مصممة كميزة ECMAScript وهي تشبه HTML ظاهريًا فقط، وتجري كتابة مواصفة JSX كمسودة لكي تُستخدَم من أي شخص كإضافة لصياغة ECMAScript.

  • في صيغة JSX، يجوز استخدام ‎<foo-bar />‎ بمفرده، لكن لا يجوز استخدام <foo-bar>. أي عليك إغلاق جميع الوسوم دومًا.

إنشاء عقد React باستخدام JSX

بإكمالنا لما تعلمناه في المقال الماضي، يجب أن تكون قادرًا على إنشاء عقد React باستخدام الدالة React.createElement()‎. فيمكن مثلًا استخدام هذه الدالة لإنشاء عقد React التي تُمثِّل عقدًا حقيقيةً في HTML DOM إضافةً إلى عقدٍ مخصصة. سأريك حالتي الاستخدام السابقتين في المثال الآتي: 

// حقيقية HTML DOM التي تمثِّل عقدة React عقدة
var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');

// مخصصة HTML DOM التي تمثِّل عقدة React عقدة
var HTMLCustom = React.createElement('foo-bar', {className:'bar'}, 'foo');

لاستخدام صيغة JSX بدلًا من React.createElement()‎ لإنشاء هذه العقد، فكل ما علينا فعله هو تبديل استدعاءات الدالة React.createElement()‎ إلى وسوم شبيهة بوسوم HTML التي تُمثِّل عناصر HTML التي تريد إنشاء شجرة DOM الافتراضية بها. يمكننا أن نكتب الشيفرة السابقة بصيغة JSX كما يلي: 

// حقيقية HTML DOM التي تمثِّل عقدة React عقدة    
var HTMLLi = <li className="bar">foo</li>;

// مخصصة HTML DOM التي تمثِّل عقدة React عقدة    
var HTMLCustom = <foo-bar className="bar" >foo</foo-bar>;

لاحظ أنَّ صيغة JSX غير محتواة في سلسلة نصية في JavaScript، وتكتبها كأنك تكتب الشيفرة داخل ملف ‎.htmlعادي، وكما ذكرنا لعدّة مرات، ستحوِّل صيغة JSX إلى استدعاءات للدالة React.createElement()‎ باستخدام Babel: 

// حقيقية HTML DOM التي تمثِّل عقدة React عقدة
var HTMLLi = <li className="bar">foo</li>;

// مخصصة HTML DOM التي تمثِّل عقدة React عقدة
var HTMLCustom = <foo-bar className="bar" >foo</foo-bar>;

ReactDOM.render(HTMLLi, document.getElementById('app1'));

ReactDOM.render(HTMLCustom, document.getElementById('app2'));

إذا أردتَ تفحص شيفرة HTML الناتجة عن المثال السابق، فستجد أنَّها شبيهة بهذه الشيفرة: 

<body>
    <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
    <div id="app2"><foo-bar class="bar" data-reactid=".1">foo</foo-bar></div>
</body>

إنشاء عقد React باستخدام JSX سهل جدًا كما لو كنتَ تكتب شيفرة HTML داخل ملفات JavaScript.

ملاحظات

  • تدعم JSX صيغة إغلاق الوسوم الخاصة بلغة XML، لذا يمكنك أن تهمل إضافة وسم الإغلاق إذا لم يمتلك العنصر أي أبناء.

  • إذا مررت خاصيات إلى عناصر HTML التي ليست موجودة في مواصفة HTML فلن تعرضها React. أما إذا استخدمتَ عناصر HTML مخصصة (أي أنها ليست قياسية) فستُضاف الخاصيات التي ليست موجودةً في مواصفة HTML إلى العناصر المخصصة (فمثلًا ‎<``x-my-component custom-attribute="foo" />‎).

  • الخاصية class يجب أن تكتب className.

  • الخاصية for يجب أن تكتب htmlFor.

  • الخاصية style تقبل إشارةً مرجعيةً إلى كائنٍ يحتوي على خاصيات CSS بالصيغة المتعارف عليها في JavaScript (أي background-color تصبح backgroundColor).

  • جميع الخاصيات مكتوبة بالصيغة المستخدمة في JavaScript، وذلك بحذف الشرطة وجعل الحرف الذي يليها كبيرًا (أي accept-charset ستصبح acceptCharset).

  • لتمثيل عناصر HTML احرص على كتابة الوسوم بحرفٍ صغير.

  • هذه هي قائمة بجميع خاصيات HTML التي تدعمها React: 

accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap

تصيير JSX إلى DOM

يمكن استخدام الدالة ReactDOM.render()‎ لتصيير تعابير JSX إلى DOM. في الواقع، كل ما تفعله Babel هو تحوي JSX إلى React.createElement()‎.

في المثال الآتي، سنُصيّر العنصر <li> والعنصر المخصص <foo-bar> إلى DOM باستخدام تعابير JSX: 

// حقيقية HTML DOM التي تمثِّل عقدة React عقدة
var HTMLLi = <li className="bar">foo</li>;

// مخصصة HTML DOM التي تمثِّل عقدة React عقدة
var HTMLCustom = <foo-bar className="bar" >foo</foo-bar>;

// <div id="app1"></div> إلى HTMLLi باسم React تصيير عقدة
ReactDOM.render(HTMLLi, document.getElementById('app1'));

// <div id="app2"></div> إلى HTMLCustom باسم React تصيير عقدة
ReactDOM.render(HTMLCustom, document.getElementById('app2'));

ستبدو شيفرة HTML كما يلي بعد تصيير العناصر إلى DOM: 

<body>
    <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
    <div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div>
</body>

تذكّر أنَّ Babel يأخذ JSX ويحولها إلى عقد React (أي استدعاءات الدالة React.createElement()‎) ثم باستخدام هذه العقد المُنشَأة باستخدام React (في شجرة DOM الافتراضية) سنُصيّر العناصر إلى شجرة DOM الحقيقية. ما تفعله الدالة ReactDOM.render()‎ هو تحويل عقد React إلى عقد DOM حقيقة ثم إضافتها إلى مستند HTML.

ملاحظات

  • ستستبدل أي عقد DOM داخل عناصر DOM التي سيُصيَّر إليها (أي أنها ستُحذَف ويحلّ المحتوى الجديد محلها).

  • الدالة ReactDOM.render()‎ لا تعدِّل عقدة عنصر DOM الذي تُصيّر React إليه، وإنما تتطلَّب React ملكيةً كاملةً للعقدة النصية عند التصيير، فلا يجدر بك إضافة أبناء أو إزالة أبناء من العقدة التي تضيف React فيها المكوِّن أو العقدة.

  • التصيير إلى شجرة HTML DOM هو أحد الخيارات فقط، فهنالك خياراتٌ أخرى ممكنة، فمثلًا تستطيع التصيير إلى سلسلة نصية (أي ReactDOMServer.renderToString()‎) في جهة الخادم.

  • إعادة تصيير نفس عنصر DOM سيؤدي إلى تحديث العقد الأبناء الحاليين إذا حدث تغييرٌ فيها، أو إذا أُضيفت عقدة عنصر ابن جديدة.

  • لا تستدعي this.render()‎ يدويًا أبدًا، اترك الأمر إلى React.

استخدام تعابير JavaScript داخل JSX

آمل الآن أن يكون واضحًا أنَّ JSX هي صيغة بسيطة ستحوَّل في نهاية المطاف إلى شيفرة JavaScript حقيقة، لكن ماذا سيحدث عندما نريد تضمين شيفرة JavaScript حقيقية داخل JSX؟ كل ما علينا فعله لكتابة تعابير JavaScript داخل JSX هو وضعها ضمن قوسين معقوفين {}.

في شيفرة React الآتية، سنضيف تعبيرًا من تعابير JavaScript (وهو 2+2) محاطًا بقوسين معقوفين {} التي ستُفسَّر من معالج JavaScript: 

var label = '2 + 2';
var inputType = 'input';

// JSX لاحظ كيفية استخدام تعابير أو قيم جافاسكربت بين القوسين المعقوفين داخل صيغة 
var reactNode = <label>{label} = <input type={inputType} value={2+2} /></label>;

ReactDOM.render(reactNode, document.getElementById('app'));

ستحوَّل شيفرة JSX إلى النتيجة الآتية: 

var label = '2 + 2';
var inputType = 'input';

var reactNode = React.createElement(
  'label',
  null,
  label,
  ' = ',
  React.createElement('input', { type: inputType, value: 2 + 2 })
);

ReactDOM.render(reactNode, document.getElementById('app'));

بعد أن تُفسَّر الشيفرة السابقة من محرِّك JavaScript (أي المتصفح)، فستُقدَّر قيمة تعابير JavaScript وستبدو شيفرة HTML كما يلي: 

<div id="app">
    <label data-reactid=".0"><span data-reactid=".0.0">2 + 2</span><span data-reactid=".0.1"> = </span><input type="input" value="4" data-reactid=".0.2"></label>
</div>

لا يوجد شيءٌ معقد في المثال السابق، بعد الأخذ بالحسبان أنَّ الأقواس ستُهرِّب شيفرة JSX. فالقوسان {} سيخبران JSX أنَّ المحتوى الموجود داخلهما هو شيفرة JavaScript فستتركها دون تعديل لكي يفسرها مُحرِّك JavaScript (أي التعبير 2+2) لاحظ أنَّ القوسين {} يمكن أن يستخدما في أي مكان داخل تعابير JSX لطالما كانت نتيجتها هو تعبيرٌ صالحٌ في JavaScript.

استخدام تعليقات JavaScript داخل JSX

يمكنك وضع تعليقات JavaScript في أي مكان في شيفرة JSX عدا المواضع التي تتوقع فيها JSX عقدة React ابن. في هذه الحالة ستحتاج إلى تهريب (escape) التعليق باستخدام {} لكي تعلم JSX أنَّ عليها تمرير المحتوى كشيفرة JavaScript.

تفحص الشيفرة الآتية، واحرص على فهم متى عليك إخبار JSX أن تُهرِّب تعليق JavaScript لكيلا تُنشَأ عقدة React ابن: 

var reactNode = <div /*comment*/>{/* use {} here to comment*/}</div>;

إذا لم نضع التعليق في الشيفرة السابقة الموجود داخل العقدة

ضمن القوسين {} فسيحاول Babel تحويل التعليق إلى عقدة React نصية، وسيكون الناتج -غير المتوقع- دون استخدام {} كما يلي: 
var reactNode = React.createElement(
  "div",
  null,
  "/* use ",
  " here to comment*/" 
);

مما سينُتِج شيفرة HTML الآتية التي تحتوي على عقد نصية أُنشِئت خطأً: 

<div data-reactid=".0">
    <span data-reactid=".0.0">/* use </span><span data-reactid=".0.1"> here to comment*/</span>
</div>

استخدام أنماط CSS داخل JSX

لتعريف أنماط CSS ضمن صيغة JSX، فعلينا تمرير مرجعية إلى كائنٍ يحتوي على خاصيات CSS وقيمها إلى الخاصية style.

سنُهيّئ في بداية المثال الآتي كائن JavaScript باسم styles يحتوي على الأنماط التي نريد تضمينها سطريًا في JSX، ثم سنستخدم القوسين {} للإشارة إلى الكائن الذي يجب أن يُستخدَم كقيمة للأنماط (مثل style={styles}‎): 

var styles = {
    color: 'red',
    backgroundColor: 'black',
    fontWeight: 'bold'
};

var reactNode = <div style={styles}>test</div>;

ReactDOM.render(reactNode, document.getElementById('app1'));

لاحظ أنَّ خاصيات CSS المُضمَّنة سطريًا مكتوبة بطريقة كتابة خاصيات CSS في JavaScript، وهذا ضروريٌ لأنَّ JavaScript لا تسمح باستخدام الشرطات – في أسماء الخاصيات.

عند تحويل شيفرة JSX السابقة باستخدام Babel، ثم تفسيرها من محرِّك JavaScript فستكون شيفرة HTML الناتجة: 

<div style="color:red;background-color:black;font-weight:bold;" data-reactid=".0">test</div>

ملاحظات

  • يجب أن تبدأ السابقات الخاصة بالمتصفحات (باستثناء ms) بحرفٍ كبير، لهذا السبب تبدأ الخاصية WebkitTransition بحرف W كبير.

  • يجب ألا يفاجئك استخدام الأحرف الكبيرة في أسماء خاصيات CSS بدلًا من الشرطات، فهذه هي الطريقة المتبعة للوصول إلى تلك الخاصيات في شجرة DOM عبر JavaScript (كما في document.body.style.backgroundImage).

  • عند تحديد قيمة بواحدة البكسل، فستضيف React السلسلة النصية "px" تلقائيًا بعد القيم الرقمية باستثناء الخاصيات الآتية: 

columnCount fillOpacity flex flexGrow flexShrink fontWeight lineClamp lineHeight
opacity order orphans strokeOpacity widows zIndex zoom

تعريف الخاصيات في JSX

في المقال السابق، ناقشنا تمرير خاصيات إلى الدالة React.createElement(type, props, children)‎ عند إنشاء عقد React. ولمّا كانت صيغة JSX ستحوِّل إلى استدعاءات للدالة React.createElement()‎ فأنت تملك فكرةً (من المقال السابق) كيف تعمل خاصيات React. لكن لمّا كانت JSX تُستخدَم للتعبير عن عناصر HTML فإنَّ الخاصيات المُعرَّفة ستُضاف إلى عنصر HTML الناتج.

في المثال الآتي سأعرِّف عقدة <li> في React باستخدام JSX، ولها خمس خاصيات، لاحظ أنَّ إحداها هي خاصيةٌ غيرُ قياسيةٍ في HTML (وهي foo: 'bar'‎) أما البقية فهي خاصيات HTML عادية: 

var styles = {backgroundColor:'red'};
var tested = true;
var text = 'text';

var reactNodeLi = <li id=""
                      data-test={tested?'test':'false'}
                      className="blue"
                      aria-test="test"
                      style={styles}
                      foo="bar">
                          {text}
                  </li>;

ReactDOM.render(reactNodeLi, document.getElementById('app1'));

ستبدو شيفرة JSX بعد تحويلها كما يلي، لاحظي أنَّ الخاصيات أصبح وسائط مُمرَّرة إلى الدالة: 

var reactNodeLi = React.createElement(
    'li',
    { id: '',
        'data-test': tested ? 'test' : 'false',
        className: 'blue',
        'aria-test': 'test',
        style: styles,
        foo: 'bar' },
    text
);

عند تصيير العقد reactNodeLi إلى DOM، فستبدو كما يلي: 

<div id="app1">
    <li id="true"
        data-test="test"
        class="blue"
        aria-test="test"
        style="background-color:red;"
        data-reactid=".0">
            text
    </li>
</div>

يجب أن تلاحظ الأمور الأربعة الآتية:

  • ترك قيمة إحدى الخاصيات فارغةً سيؤدي إلى جعل قيمتها مساويةً إلى true (أي id=""‎ ستصبح id="true"‎، و test ستصبح test="true"‎).

  • الخاصية foo لن تُضاف إلى العنصر النهائي لأنها ليست خاصية HTML قياسية.

  • لا يمكنك كتابة أنماط سطرية في JSX. عليك أن تُشير إلى كائنٍ يقطع في مجال تعريف شيفرة JSX أو تمرير كائن يحتوي على خاصيات CSS مكتوبةً كخاصيات JavaScript.

  • يمكن أن تُضاف قيم JavaScript ضمن JSX باستخدام القوسين المعقوفين {} (كما في test={text}‎ و data-test={tested?'test':'false'}‎).

ملاحظات

  • إذا كانت خاصيةٌ ما مكررةً فستؤخذ آخر قيمة لها.

  • إذا مررت خاصيات إلى عناصر HTML التي ليست موجودة في مواصفة HTML فلن تعرضها React. أما إذا استخدمتَ عناصر HTML مخصصة (أي أنها ليست قياسية) فستُضاف الخاصيات التي ليست موجودةً في مواصفة HTML إلى العناصر المخصصة (فمثلًا ‎<x-my-component custom-attribute="foo" />‎).

  • الخاصية class يجب أن تكتب className.

  • الخاصية for يجب أن تكتب htmlFor.

  • الخاصية style تقبل إشارةً مرجعيةً إلى كائنٍ يحتوي على خاصيات CSS بالصيغة المتعارف عليها في JavaScript (أي background-color تصبح backgroundColor).

  • خاصيات النماذج في HTML (مثل <input> أو <textarea></textarea> …إلخ.) المُنشَأة كعقد React ستدعم خاصيات التي يمكن تغييرها عبر تفاعل المستخدم مع العنصر؛ وهذه الخاصيات هي value و checked و selected.

  • توفِّر React الخاصيات key و ref و dangerouslySetInnerHTML التي لا تتوافر في DOM وتأخذ دورًا فريدًا.

  • يجب أن تكتب جميع الخاصيات مع حذف الشرطة - وجعل أول حرف يليها مكتوبًا بحرفٍ كبير، أي أنَّ الخاصية accept-charset ستُكتَب acceptCharset.

  • هذه هي خاصيات HTML التي تدعمها تطبيقات React: 

accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap

تعريف الأحداث في JSX

في المقال السابق، شرحنا ووضحنا كيف يمكن أن ترتبط الأحدث مع عقد React. لفعل المثل في JSX عليك إضافة الأحداث ودالة المعالجة الخاصة بها كخاصية لشيفرة JSX التي تُمثِّل عقدة React.

أُخِذ المثال الآتي من المقال السابق ويبيّن طريقة إضافة حدث إلى عقدة React دون استخدام JSX: 

var mouseOverHandler = function mouseOverHandler() {
        console.log('you moused over');
    };
var clickhandler = function clickhandler() {
        console.log('you clicked');
    };
var reactNode = React.createElement(
        'div',
        { onClick: clickhandler, onMouseOver: mouseOverHandler },
        'click or mouse over'
    );

ReactDOM.render(reactNode, document.getElementById('app'));

يمكن أن تُكتَب الشيفرة السابقة باستخدام JSX: 

var mouseOverHandler = function mouseOverHandler() {
        console.log('you moused over');
    };
var clickHandler = function clickhandler() {
        console.log('you clicked');
    };

var reactNode = <div onClick={clickHandler} onMouseOver={mouseOverHandler} >click or mouse over</div>;

ReactDOM.render(reactNode, document.getElementById('app'));

لاحظ أننا استخدمنا القوسين {} لربط دالة JavaScript إلى الحدث (أي onMouseOver={mouseOverHandler}‎)، وهذه الطريقة تشابه طريقة ربط الأحداث السطرية في DOM.

الأحداث التي تدعمها React موجودةٌ في الجدول الآتي:

نوع الحدث الأحداث خاصيات متعلقة به
الحافظة
  • onCopy
  • onCut
  • onPaste
  • DOMDataTransfer
  • clipboardData
التركيب
  • onCompositionEnd
  • onCompositionStart
  • onCompositionUpdate
  • data

لوحة المفاتيح

  • onKeyDown
  • onKeyPress
  • onKeyUp
  • altKey
  • charCode
  • ctrlKey
  • getModifierState(key)‎
  • key
  • keyCode
  • locale
  • location
  • metaKey
  • repeat
  • shiftKey
  • which

التركيز

  • onChange
  • onInput
  • onSubmit
  • DOMEventTarget
  • relatedTarget

النماذج

  • OnFocus
  • onBlur

 

الفأرة

  • onClick
  • onContextMenu
  • onDoubleClick
  • onDrag
  • onDragEnd
  • onDragEnter
  • onDragExit
  • onDragLeave
  • onDragOver
  • onDragStart
  • onDrop
  • onMouseDown
  • onMouseEnter
  • onMouseLeave
  • onMouseMove
  • onMouseOut
  • onMouseOver
  • onMouseUp
  • altKey
  • button
  • buttons
  • clientX
  • clientY
  • ctrlKey
  • getModifierState(key)‎
  • metaKey
  • pageX
  • pageY
  • DOMEventTarget
  • relatedTarget
  • screenX
  • screenY
  • shiftKey

الاختيار

  • onSelect

 

اللمس

  • onTouchCancel
  • onTouchEnd
  • onTouchMove
  • onTouchStart
  • altKey
  • DOMTouchList
  • changedTouches
  • ctrlKey
  • getModifierState(key)‎
  • metaKey
  • shiftKey
  • DOMTouchList
  • targetTouches
  • DOMTouchList
  • touches

واجهة المستخدم

  • onScroll
  • detail
  • DOMAbstractView
  • view

الدولاب

  • onWheel
  • deltaMode
  • deltaX
  • deltaY
  • deltaZ

الوسائط

  • onAbort
  • onCanPlay
  • onCanPlayThrough
  • onDurationChange
  • onEmptied
  • onEncrypted
  • onEnded
  • onError
  • onLoadedData
  • onLoadedMetadata
  • onLoadStart
  • onPause
  • onPlay
  • onPlaying
  • onProgress
  • onRateChange
  • onSeeked
  • onSeeking
  • onStalled
  • onSuspend
  • onTimeUpdate
  • onVolumeChange
  • onWaiting

 

    الصور

    • onLoad
    • onError

     

    الحركات

    • onAnimationStart
    • onAnimationEnd
    • onAnimationIteration
    • animationName
    • pseudoElement
    • elapsedTime

    الانتقالات

    • onTransitionEnd
    • propertyName
    • pseudoElement
    • elapsedTime

    ملاحظات

    • توحِّد React التعامل مع الأحداث لكي تسلك سلوكًا متماثلًا في جميع المتصفحات.

    • تنطلق الأحداث في React في مرحلة الفقاعات (bubbling phase). لإطلاق حدث في مرحلة الالتقاط (capturing phase) فأضف الكلمة "Capture" إلى اسم الحدث، أي أنَّ الحدث onClick سيصبح onClickCapture).

    • إذا احتجتَ إلى تفاصيل كائن الأحداث المُنشَأ من المتصفح، فيمكنك الوصول إليه باستخدام الخاصية nativeEvent في كائن SyntheticEvent المُمرَّر إلى دالة معالجة الأحداث في React.

    • لا تربط React الأحداث إلى العقد نفسها، وإنما تستخدم «تفويض الأحداث» (event delegation).

    • يجب استخدام e.stopPropagation()‎ أو e.preventDefault()‎ يدويًا لإيقاف انتشار الأحداث بدلًا من استخدام return false;‎.

    • لا تدعم React جميع أحداث DOM، لكن ما يزال بإمكاننا الاستفادة منها باستخدام توابع دورة الحياة في React.

    ترجمة وبتصرف للفصل JavaScript Syntax Extension (a.k.a, JSX)‎ من كتاب React Enlightenment

    ]]>    777Wed, 22 Jan 2020 13:00:00 +0000    عقد React Nodes) React)https://academy.hsoub.com/programming/javascript/react/%D8%B9%D9%82%D8%AF-react-nodes-react-r776/

    سيناقش هذا المقال إنشاء عقد React ‏(React Nodes) سواءً النصية (text nodes) أو عقد العناصر (element nodes) باستخدام JavaScript.

    ما هي عقدة React؟

    النوع الأساسي أو القيمة التي تُنشَأ عند استخدام مكتبة React تسمى «عقدة React»، ويمكن تعريف عقدة React على أنها «تمثيل افتراضي خفيف وعديم الحالة وغير قابلٍ للتعديل لعقدة DOM» (لا تخف من الكلام السابق، هذا هو التعريف الرسمي، ما باليد حيلة :-) ).

    عقد React ليست عقد DOM حقيقية، وإنما تمثيل عن عقدة DOM محتملة، وهذا التمثيل يعد على أنه شجرة DOM افتراضية، ويُستخدم React لتعريف شجرة DOM الافتراضية باستخدام عقد React، والتي تُشكِّل البنية الأساسية لمكوِّنات React، والتي في نهاية المطاف ستُستخدَم لإنشاء بنية DOM الحقيقة وغير ذلك من البنى (مثل React Native).

    يمكن أن تُنشَأ عقد React باستخدام JSX أو JavaScript. سنلقي في هذا المقال نظرةً على إنشاء عقد React باستخدام JavaScript بمفردها دون استخدام JSX. إذ أرى أنَّ عليك فهم ما الذي تخفيه JSX وراء الكواليس لكي تفهم JSX فهمًا جيدًا.

    قد تحدثك نفسك بتجاوز هذا المقال لأنك تعرف مسبقًا أننا لن نستخدم JSX. لا تطعها! أقترح عليك أن تكمل قراءة هذا المقال لكي تعرف ما الذي تفعله لك JSX. ربما هذا أهم مقال في السلسلة ليتغلغل في ذهنك!

    إنشاء عقد العناصر

    سيُفضِّل المطورون في أغلبية الأوقات استخدام JSX مع React لإنشاء عقد العناصر، وبغض النظر عن ذلك، سنتعرّف في هذا المقال على طريقة إنشاء عقد React دون استخدام JSX باستعمال JavaScript فقط. أما المقال القادم فهو يناقش كيفية إنشاء عقد React باستخدام JSX.

    إنشاء عقد React سهلٌ جدًا فكل ما نحتاج له هو استخدام الدالة React.createElement(type, props, children)‎ وتمرير مجموعة من الوسائط إليها والتي تُعرِّف عقدة DOM الفعلية (مثالًا نضبط قيمة type إلى عنصر من عناصر HTML مثل <li> أو عنصر مخصص مثل <my-li>).

    وسائط الدالة React.createElement())‎ مشروحة أدناه:

    • type (string | React.createClass())‎
      يمكن أن تكون سلسلة نصية تُمثِّل عنصر HTML (أو عنصر HTML مخصص) أو نسخة من مكوِّنات React.

    • props (null | object)‎
      يمكن أن يكون null أو كائن يحتوي على خاصيات وقيم مرتبطة بها.

    • children (null | string | React.Component | React.createElement())‎
      يمكن أن تكون null أو سلسلة نصية التي ستحوّل إلى عقدة نصية، أو نسخة من React.Component‎ أو React.createElement()‎.

    سأستخدم في المثال الآتي الدالة React.createElement()‎ لإنشاء تمثيل في شجرة DOM الافتراضية لعقدة العنصر <li> والتي تحتوي على عقدة نصية فيها one (أي عقدة نصية في React) ومُعرِّف id يساوي li1. 

    var reactNodeLi = React.createElement('li', {id:'li1'}, 'one');

    لاحظ أنَّ أول وسيط يُعرِّف ما هو عنصر HTML الذي نريد تمثيله، ويعُرِّف الوسيط الثاني ما هي الخاصيات التي ستُضبَط على العناصر <li>، وأخيرًا سيُعرِّف الوسيط الثالث ما هي العقدة الموجودة داخل العنصر، وفي هذه الحالة وضعنا ببساطة عقدةً نصية (أي 'one') داخل <li>. لاحظ أنَّ آخر وسيط الذي سيصبح ابنًا للعقدة المُنشَأة يمكن أن يكون عقدة React نصية، أو عقدة عنصر في React، أو نسخة من مكوِّن React.

    كل ما فعلناه إلى الآن هو إنشاء عقدة عنصر في React تحتوي على عقدة React نصية، والتي خزناها في المتغير reactNodeLi، ولإنشاء شجرة DOM الوهمية فعلينا تصيير عقدة عنصر React في شجرة DOM الحقيقية، ولفعل ذلك سنستخدم الدالة ReactDOM.render()‎: 

    ReactDOM.render(reactNodeLi, document.getElementById('app'));

    إذا أردنا وصف الشيفرة السابقة ببساطة، فهي تتضمن:

    1. إنشاء شجرة DOM افتراضية مبنية من عقدة عنصر React المُمرَّرة (أي reactNodeLi)،

    2. استخدام شجرة DOM الافتراضية لإعادة إنشاء فرع من شجرة DOM الحقيقية،

    3. إضافة الفرع المُنشَأ (أي <li id="li1">one</li>) إلى شجرة DOM الحقيقة كأحد أبناء العنصر <div id="app"></div>.

    بعبارةٍ أخرى، ستتغير شجرة DOM لمستند HTML من: 

    <div id="app"></div>

    إلى: 

    <div id="app">
    // data-reactid قد أضافت الخاصية React لاحظ أنَّ  
    <li id="li1" data-reactid=".0">one</li>
</div>

    بيّن المثال السابق استخدامًا بسيطًا للدالة React.createElement()‎. يمكن للدالة React.createElement()‎ إنشاء بنى معقدة أيضًا. فعلى سبيل المثال سنستخدم الدالة React.createElement()‎ لإنشاء فرع من عقد React يُمثِّل قائمة غير مرتبة من العناصر (أي <ul>): 

    // React في <li> إنشاء عقد عناصر
var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');

// السابقة إليها <li> وإضافة عناصر React في <ul> إنشاء عقدة العنصر
var reactElementUl = React.createElement('ul', {className: 'myList'}, rElmLi1, rElmLi2, rElmLi3);

    قبل تصيير القائمة غير المرتبة إلى شجرة DOM، أرى إخبارك أنَّه يمكن تبسيط الشيفرة السابقة باستخدام React.createElement()‎ بدلًا من المتغيرات. هذا المثال يوضِّح كيف يمكن تعريف الهيكلية باستخدام JavaScript: 

    var reactElementUl = React.createElement(
    'ul', {
        className: 'myList'
    },
        React.createElement('li', {id: 'li1'},'one'),
        React.createElement('li', {id: 'li2'},'two'),
        React.createElement('li', {id: 'li3'},'three')
);

    عند تصيير الشيفرة السابقة إلى DOM فستبدو شيفرة HTML الناتجة كما يلي: 

    <ul class="myList" data-reactid=".0">
    <li id="li1" data-reactid=".0.0">one</li>
    <li id="li2" data-reactid=".0.1">two</li>
    <li id="li3" data-reactid=".0.2">three</li>
</ul>

    يجب أن يكون واضحًا أنَّ عقد React هي كائنات JavaScript في شجرةٍ تمثِّل عقد DOM حقيقية داخل شجرة DOM الافتراضية. ثم تُستخدَم شجرة DOM الافتراضية لتعديل شجرة DOM الحقيقية داخل صفحة HTML.

    ملاحظات

    • يمكن أن يكون الوسيط type المُمرَّر إلى الدالة React.createElement()‎ سلسلةً نصية تُشير إلى عنصر من عناصر HTML القياسية (مثل 'li' الذي يمُثِّل العنصر <li>)، أو عنصرًا مخصصًا (مثل 'foo-bar' الذي يُمثِّل العنصر <foo-bar>)، أو نسخة من مكوِّن في React (أي نسخة من React.Component).

    • هذه هي قائمة عناصر HTML التي تدعمها React (أي تمرير هذه العناصر كسلسلة نصية مكان المعامل type إلى الدالة createElement()‎ سيؤدي إلى إنشاء عنصر HTML القياسي في DOM): 

    a abbr address area article aside audio b base bdi bdo big blockquote body br
button canvas caption cite code col colgroup data datalist dd del details dfn
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5
h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li
link main map mark menu menuitem meta meter nav noscript object ol optgroup
option output p param picture pre progress q rp rt ruby s samp script section
select small source span strong style sub summary sup table tbody td textarea
tfoot th thead time title tr track u ul var video wbr

    تصيير (rendering) العناصر إلى شجرة DOM

    توفِّر React الدالة React.render()‎ من الملف react-dom.js التي يمكن أن تُستخدَم لتصيير عقد عناصر React إلى شجرة DOM. لقد رأينا الدالة render()‎ مستخدمةً في هذا المقال.

    سنستخدم في المثال الآتي الدالة ReactDOM.render()‎ وستُصيّر عقد العناصر '<li>' و '<foo-bar>' إلى شجرة DOM: 

    // حقيقي DOM والتي تُمثِّل عقدة عنصر React عقدة
var HTMLLi = React.createElement('li', {className:'bar'}, 'foo');

// مخصص HTML والتي تُمثِّل عقد عنصر React عقدة
var HTMLCustom = React.createElement('foo-bar', {className:'bar'}, 'foo');

// <div id="app1"></div> إلى HTMLLi تصيير عقدة العنصر   
ReactDOM.render(HTMLLi, document.getElementById('app1'));

// <div id="app2"></div> إلى HTMLCustom تصيير عقدة العنصر   
ReactDOM.render(HTMLCustom, document.getElementById('app2'));

    بعد تصيير العناصر إلى شجرة DOM، فسيبدو مستند HTML المُحدَّث كما يلي: 

    <body>
    <div id="app1"><li class="bar" data-reactid=".0">foo</li></div>
    <div id="app2"><foo-bar classname="bar" children="foo" data-reactid=".1">foo</foo-bar></div>
</body>

    الدالة ReactDOM.render()‎ هي الطريقة المبدئية التي تمكننا من نقل عقد العناصر في React إلى شجرة DOM الوهمية، ثم إلى شجرة DOM الحقيقية.

    ملاحظات

    • ستستبدل أي عقد DOM داخل عناصر DOM التي سيُصيَّر إليها (أي أنها ستُحذَف ويحلّ المحتوى الجديد محلها).

    • الدالة ReactDOM.render()‎ لا تعدِّل عقدة عنصر DOM الذي تُصيّر React إليه، وإنما تتطلَّب React ملكيةً كاملةً للعقدة النصية عند التصيير، فلا يجدر بك إضافة أبناء أو إزالة أبناء من العقدة التي تضيف React فيها المكوِّن أو العقدة.

    • التصيير إلى شجرة HTML DOM هو أحد الخيارات فقط، فهنالك خياراتٌ أخرى ممكنة، فمثلًا تستطيع التصيير إلى سلسلة نصية (أي ReactDOMServer.renderToString()‎) في جهة الخادم.

    • إعادة تصيير نفس عنصر DOM سيؤدي إلى تحديث العقد الأبناء الحاليين إذا حدث تغييرٌ فيها، أو إذا أُضيفت عقدة عنصر ابن جديدة.

    تعريف خاصيات العقد

    الوسيط الثاني الذي يُمرَّر إلى الدالة React.createElement(type, props, children)‎ هو كائنٌ يحتوي على خاصيات ذات أسماء ترتبط بها قيم.

    تمتلك الخاصيات عدِّة أدوار:

    1. يمكن أن تتحول إلى خاصيات HTML. فلو طابقت إحدى الخاصيات خاصية HTML معروفة، فستُضاف إلى عنصر HTML النهائي في DOM.

    2. الخاصيات المُمرَّرة إلى createElement()‎ ستصبح قيمًا مخزنةً في الكائن prop كنسخة من React.createElement()‎ (أي ‎[INSTANCE].props.[NAME_OF_PROP]). تستخدم الخاصيات بكثرة لإدخال قيم إلى المكوِّنات.

    3. تمتلك بعض الخاصيات تأثيراتٍ جانبية (مثل key و ref و dangerouslySetInnerHTML).

    يمكنك أن تتخيل الخاصيات على أنها خيارات ضبط لعقد React، ويمكنك أن تتخيلها كخاصيات HTML.

    سنُعرِّف في المثال الآتي عقدة العنصر <li> مع خمس خاصيات، إحدى تلك الخاصيات غير قياسية في HTML (أقصد بها foo:'bar'‎) وبقية الخاصيات معروفة في HTML: 

    var reactNodeLi = React.createElement('li',
{
    foo:'bar',
    id:'li1',
    // للإشارة إلى صنف الأنماط في جافاسكربت className لاحظ استخدام الخاصية 
    className: 'blue',
    'data-test': 'test',
    'aria-test': 'test',
    // CSS لضبط خاصية backgroundColor لاحظ استخدام الخاصية
    style: {backgroundColor: 'red'}
},
'text'
);

    ستبدو الشيفرة المُصيَّرة إلى صفحة HTML كما يلي: 

    <li id="li1" data-test="test" class="blue" aria-test="test" style="background-color:red;" data-reactid=".0">text</li>

    ما عليك إدراكه من المثال السابق أنَّ خاصيات HTML القياسية فقط، وخاصيات data-*‎ و aria-*‎ هي الخاصيات الوحيدة التي تنتقل إلى شجرة DOM الحقيقية من شجرة DOM الافتراضية.

    لاحظ أنَّ الخاصية foo لن تظهر في شجرة DOM الحقيقية، فهذه الخاصية غير القياسية ستكون متاحةً في نسخة الكائن li لعقدة React (أي reactNodeLi.props.foo): 

    var reactNodeLi = React.createElement('div',{
    foo:'bar',
    id:'li1',
    className: 'blue',
    'data-test': 'test',
    'aria-test': 'test',
    style: {backgroundColor: 'red'}
},
'text'
);

console.log(reactNodeLi.props.foo); // bar

ReactDOM.render(reactNodeLi, document.getElementById('app'));

    ليس استخدام خاصيات React مقتصرًا على تحويلها إلى خاصيات HTML حقيقية، لكن يمكن أن تلعب دورًا في إعدادات الضبط المُمرَّرة إلى مكونات React. هذا الجانب من جوانب استخدام الخاصيات سيغطى في مقالٍ خاصٍ به، أما الآن فكل ما علينا إدراكه هو أنَّ تمرير خاصية إلى عقدة React هو أمرٌ يختلف عن تعريف خاصية في مكوِّن لكي تُستخدم لمدخلات ضبط ضمن ذاك المكوِّن.

    ملاحظات

    • ترك قيمة إحدى الخاصيات فارغةً سيؤدي إلى جعل قيمتها مساويةً إلى true (أي id=""‎ ستصبح id="true"‎، و test ستصبح test="true"‎).

    • إذا كانت خاصيةٌ ما مكررةً فستؤخذ آخر قيمة لها.

    • إذا مررت خاصيات إلى عناصر HTML التي ليست موجودة في مواصفة HTML فلن تعرضها React. أما إذا استخدمتَ عناصر HTML مخصصة (أي أنها ليست قياسية) فستُضاف الخاصيات التي ليست موجودةً في مواصفة HTML إلى العناصر المخصصة (فمثلًا ‎<x-my-component custom-attribute="foo" />‎).

    • الخاصية class يجب أن تكتب className.

    • الخاصية for يجب أن تكتب htmlFor.

    • الخاصية style تقبل إشارةً مرجعيةً إلى كائنٍ يحتوي على خاصيات CSS بالصيغة المتعارف عليها في JavaScript (أي background-color تصبح backgroundColor).

    • خاصيات النماذج في HTML (مثل <input> أو <textarea></textarea> …إلخ.) المُنشَأة كعقد React ستدعم خاصيات التي يمكن تغييرها عبر تفاعل المستخدم مع العنصر؛ وهذه الخاصيات هي value و checked و selected.

    • توفِّر React الخاصيات key و ref و dangerouslySetInnerHTML) التي لا تتوافر في DOM وتأخذ دورًا فريدًا.

    • يجب أن تكتب جميع الخاصيات مع حذف الشرطة - وجعل أول حرف يليها مكتوبًا بحرفٍ كبير، أي أنَّ الخاصية accept-charset ستُكتَب acceptCharset.

    • هذه هي خاصيات HTML التي تدعمها تطبيقات React: 

    accept acceptCharset accessKey action allowFullScreen allowTransparency alt
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
charSet checked classID className colSpan cols content contentEditable
contextMenu controls coords crossOrigin data dateTime default defer dir
disabled download draggable encType form formAction formEncType formMethod
formNoValidate formTarget frameBorder headers height hidden high href hrefLang
htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
lang list loop low manifest marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted name noValidate nonce open
optimum pattern placeholder poster preload radioGroup readOnly rel required
reversed role rowSpan rows sandbox scope scoped scrolling seamless selected
shape size sizes span spellCheck src srcDoc srcLang srcSet start step style
summary tabIndex target title type useMap value width wmode wrap

    تضمين أنماط CSS السطرية في عقد العناصر

    لتطبيق أنماط CSS السطرية (inline CSS styles) على عقدة React، فعليك تمرير كائن يحتوي على خاصيات CSS والقيم المرتبطة بها إلى الخاصية style.

    على سبيل المثال، سنمرر مرجعيةً إلى الكائن inlineStyles إلى الخاصية style: 

    var inlineStyles = {backgroundColor: 'red', fontSize: 20};
var reactNodeLi =  React.createElement('div', {style: inlineStyles}, 'styled')

ReactDOM.render(reactNodeLi, document.getElementById('app1'));

    ستبدو شيفرة HTML الناتجة شبيهةً بما يلي: 

    <div id="app1">
  <div style="background-color:red;font-size:20px;" data-reactid=".0">styled</div>
</div>

    هنالك أمران عليك الانتباه إليهما في الشيفرة السابقة:

    1. لم نضف الواحدة "px" إلى الخاصية fontSize لأنَّ React أضافته عوضًا عنّا.

    2. عند كتابة خاصيات CSS في JavaScript، يجب حذف الشرطة وجعل الحرف الذي يليها مكتوبًا بحرفٍ كبير (أي backgroundColor بدلًا من background-color).

    ملاحظات

    • يجب أن تبدأ السابقات الخاصة بالمتصفحات (باستثناء ms) بحرفٍ كبير، لهذا السبب تبدأ الخاصية WebkitTransition بحرف W كبير (ولم أعد أنصح بإضافة هذه الخاصيات إلا لدعم المتصفحات القديمة جدًا).

    • يجب ألا يفاجئك استخدام الأحرف الكبيرة في أسماء خاصيات CSS بدلًا من الشرطات، فهذه هي الطريقة المتبعة للوصول إلى تلك الخاصيات في شجرة DOM عبر JavaScript (كما في document.body.style.backgroundImage).

    • عند تحديد قيمة بواحدة البكسل، فستضيف React السلسلة النصية "px" تلقائيًا بعد القيم الرقمية باستثناء الخاصيات الآتية: 

    columnCount fillOpacity flex flexGrow flexShrink fontWeight lineClamp lineHeight
opacity order orphans strokeOpacity widows zIndex zoom

    استخدام مصانع العناصر المُضمَّنة في React

    توفِّر React اختصارات مضمَّنة لإنشاء عقد عناصر HTML شائعة الاستخدام. تسمى هذه الاختصارات بمصانع عقد React.

    قبل الإصدار 16.0 من مكتبة React.js، كانت هذه المصانع مضمنة في المكتبة نفسها، لكن بعد الإصدار 16.0 فقد أسقط الدعم عنها، وظهرت وحدة باسم react-dom-factories) التي تتيح استخدام المصانع التي كانت مضمنة في React.js مع الإصدارات الجديدة من المكتبة.

    مصنع لعقد React هو دالةٌ تولِّد ReactElement مع قيمة معينة لخاصية type.

    باستخدام المصنع المضمن React.DOM.li()‎، يمكننا إنشاء عقدة العنصر <li>one</li> في React كما يلي: 

    // DOM.li(props, children);
import DOM from 'react-dom-factories';
var reactNodeLi = DOM.li({id:'li1'}, 'one');

    وذلك بدلًا من استخدام: 

    // React.createElement(type, prop, children)
var reactNodeLi = React.createElement('li', null, 'one');

    هذه قائمة بجميع المصانع المُضمَّنة في React: 

    a,abbr,address,area,article,aside,audio,b,base,bdi,bdo,big,blockquote,body,br,button,
canvas,caption,cite,code,col,colgroup,data,datalist,dd,del,details,dfn,dialog,div,dl,
dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,
hr,html,i,iframe,img,input,ins,kbd,keygen,label,legend,li,link,main,map,mark,menu,
menuitem,meta,meter,nav,noscript,object,ol,optgroup,option,output,p,param,picture,
pre,progress,q,rp,rt,ruby,s,samp,script,section,select,small,source,span,strong,
style,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,title,tr,track,
u,ul,var,video,wbr,circle,clipPath,defs,ellipse,g,image,line,linearGradient,mask,
path,pattern,polygon,polyline,radialGradient,rect,stop,svg,text,tspa

    ملاحظات

    • إذا كنتَ تستخدم JSX فقد لا تحتاج إلى استخدام المصانع إطلاقًا.

    • يمكن إنشاء مصانع مخصصة إن كان ذلك ضروريًا.

    تعريف أحداث عقد React

    يمكن إضافة الأحداث إلى عقد React كما لو أردنا إضافة الأحداث إلى عقد DOM. سنضيف في المثال الآتي حدثين بسيطين click و mouseover إلى عقدة <div>: 

    var mouseOverHandler = function mouseOverHandler() {
        console.log('you moused over');
    };
var clickhandler = function clickhandler() {
        console.log('you clicked');
    };
var reactNode = React.createElement(
        'div',
        { onClick: clickhandler, onMouseOver: mouseOverHandler },
        'click or mouse over'
    );

ReactDOM.render(reactNode, document.getElementById('app'));

    لاحظ أنَّ اسم الخاصية لأحداث React تبدأ بالحرفين 'on' وتُمرِّر في الكائن props المُمرَّر إلى الدالة ReactElement()‎.

    تُنشئ React ما تسميه SyntheticEvent لكل حدث، والذي يحتوي على تفاصيل الحدث، وهي شبيهة بتفاصيل الأحداث المُعرَّفة في DOM. يمكن مثلًا الاستفادة من نسخة الكائن SyntheticEvent بتمريره إلى معالجات الأحداث، وسأفعل ذلك في المثال الآتي لتسجيل تفاصيل الحدث SyntheticEvent. 

    var clickhandler = function clickhandler(SyntheticEvent) {
        console.log(SyntheticEvent);
    };
var reactNode = React.createElement(
        'div',
        { onClick: clickhandler},
        'click'
    );

ReactDOM.render(reactNode, document.getElementById('app'));

    كل كائن من النوع syntheticEvent يملك الخاصيات الآتية:

    • bubbles

    • cancelable

    • DOMEventTarget currentTarget

    • defaultPrevented

    • eventPhase

    • isTrusted

    • DOMEvent nativeEvent

    • void preventDefault()‎

    • isDefaultPrevented()‎

    • void stopPropagation()‎

    • isPropagationStopped()‎

    • DOMEventTarget target

    • timeStamp

    • type

    هنالك خاصيات إضافية متوافرة اعتمادًا على نوع أو تصنيف الحدث المستخدم. فعلى سبيل المثال، الحدث onClick يحتوي على الخاصيات الآتية:

    • altKey

    • button

    • buttons

    • clientX

    • clientY

    • ctrlKey

    • getModifierState(key‎)‎

    • metaKey

    • pageX

    • pageY

    • DOMEventTarget relatedTarget

    • screenX

    • screenY

    • shiftKey

    يحتوي الجدول الآتي على خصائص syntheticEvent المتاحة لكل تصنيف من تصنيفات الأحداث:

    نوع الحدث الأحداث خاصيات متعلقة به
    الحافظة
    • onCopy
    • onCut
    • onPaste
    • DOMDataTransfer
    • clipboardData
    التركيب
    • onCompositionEnd
    • onCompositionStart
    • onCompositionUpdate
    • data
    لوحة المفاتيح
    • onKeyDown
    • onKeyPress
    • onKeyUp
    • altKey
    • charCode
    • ctrlKey
    • getModifierState(key)‎
    • key
    • keyCode
    • locale
    • location
    • metaKey
    • repeat
    • shiftKey
    • which
    التركيز
    • onChange
    • onInput
    • onSubmit
    • DOMEventTarget
    • relatedTarget
    النماذج
    • OnFocus
    • onBlur
    		 
    الفأرة
    • onClick
    • onContextMenu
    • onDoubleClick
    • onDrag
    • onDragEnd
    • onDragEnter
    • onDragExit
    • onDragLeave
    • onDragOver
    • onDragStart
    • onDrop
    • onMouseDown
    • onMouseEnter
    • onMouseLeave
    • onMouseMove
    • onMouseOut
    • onMouseOver
    • onMouseUp
    • altKey
    • button
    • buttons
    • clientX
    • clientY
    • ctrlKey
    • getModifierState(key)‎
    • metaKey
    • pageX
    • pageY
    • DOMEventTarget
    • relatedTarget
    • screenX
    • screenY
    • shiftKey
    الاختيار
    • onSelect
    		 
    اللمس
    • onTouchCancel
    • onTouchEnd
    • onTouchMove
    • onTouchStart
    • AltKey
    • DOMTouchList
    • changedTouches
    • ctrlKey
    • getModifierState(key)‎
    • metaKey
    • shiftKey
    • DOMTouchList
    • targetTouches
    • DOMTouchList
    • touches
    واجهة المستخدم
    • onScroll
    • detail
    • DOMAbstractView
    • view
    الدولاب
    • onWheel
    • deltaMode
    • deltaX
    • deltaY
    • deltaZ
    الوسائط
    • onAbort
    • onCanPlay
    • onCanPlayThrough
    • onDurationChange
    • onEmptied
    • onEncrypted
    • onEnded
    • onError
    • onLoadedData
    • onLoadedMetadata
    • onLoadStart
    • onPause
    • onPlay
    • onPlaying
    • onProgress
    • onRateChange
    • onSeeked
    • onSeeking
    • onStalled
    • onSuspend
    • onTimeUpdate
    • onVolumeChange
    • onWaiting
    		 
    الصور
    • onLoad
    • onError
    		 
    الحركات
    • onAnimationStart
    • onAnimationEnd
    • onAnimationIteration
    • animationName
    • pseudoElement
    • elapsedTime
    الانتقالات
    • onTransitionEnd
    • propertyName
    • pseudoElement
    • elapsedTime

    ملاحظات

    • توحِّد React التعامل مع الأحداث لكي تسلك سلوكًا متماثلًا في جميع المتصفحات.

    • تنطلق الأحداث في React في مرحلة الفقاعات (bubbling phase). لإطلاق حدث في مرحلة الالتقاط (capturing phase) فأضف الكلمة "Capture" إلى اسم الحدث، أي أنَّ الحدث onClick سيصبح onClickCapture.

    • إذا احتجتَ إلى تفاصيل كائن الأحداث المُنشَأ من المتصفح، فيمكنك الوصول إليه باستخدام الخاصية nativeEvent في كائن SyntheticEvent المُمرَّر إلى دالة معالجة الأحداث في React.

    • لا تربط React الأحداث إلى العقد نفسها، وإنما تستخدم «تفويض الأحداث» (event delegation).

    • يجب استخدام e.stopPropagation()‎ أو e.preventDefault()‎ يدويًا لإيقاف انتشار الأحداث بدلًا من استخدام return false;‎.

    • لا تدعم React جميع أحداث DOM، لكن ما يزال بإمكاننا الاستفادة منها باستخدام توابع دورة الحياة في React.

    ترجمة وبتصرف للفصل React Nodes‎ من كتاب React Enlightenment

    ]]>    776Sat, 18 Jan 2020 13:07:00 +0000    تهيئة React والشروع في العملhttps://academy.hsoub.com/programming/javascript/react/%D8%AA%D9%87%D9%8A%D8%A6%D8%A9-react-%D9%88%D8%A7%D9%84%D8%B4%D8%B1%D9%88%D8%B9-%D9%81%D9%8A-%D8%A7%D9%84%D8%B9%D9%85%D9%84-r775/

    سنتحدث في هذا المقال عن كيفية ضبط صفحة HTML لكي يمكن تفسيرها في متصفح الويب، وسيتمكن المتصفح في وقت التنفيذ من تحويل تعابير JSX ويشغِّل شيفرة React بنجاح.

    استخدام react.js و react-dom.js في صفحة HTML

    الملف react.js هو الملف الأساسي الذي نحتاج له لإنشاء عناصر React وكتابة مكونات React. عندما ترغب بعرض المكونات التي أنشأتها في مستند HTML (أي كتابتها إلى DOM) فستحتاج أيضًا إلى الملف react-dom.js. يعتمد الملف react-dom.js على الملف react.js ويجب تضمينه بعد تضمين الملف react.js.

    مثالٌ عن مستند HTML يحتوي على React: 

    <!DOCTYPE html>
<html>
  <head>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  </head>
<body>
</body>
</html>

    بتحميل الملفين react.js و react-dom.js في صفحة HTML، أصبح بإمكاننا إنشاء عقد ومكونات React ثم عرضها في DOM. المثال البسيط الآتي يُنشِئ مكوِّن HelloMessage يحتوي على عقدة العنصر <div> ثم سيُعرَض في شجرة DOM داخل عنصر HTML المُعرَّف <div id="app"></div>: 

    <!DOCTYPE html>
<html>
    <head>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/create-react-class@15.6.0-rc.0/create-react-class.js" crossorigin></script>
    </head>
<body>
    <div id="app"></div>
    <script>
        var HelloMessage = createReactClass({ // استخدمنا هذه الوحدة لترى كيف تستعمل
            displayName: 'HelloMessage',
            render: function render() {
                return React.createElement('div',null,'Hello ',this.props.name);
            }
        });
        ReactDOM.render(React.createElement(HelloMessage,{ name: 'Ahmed' }), document.getElementById('app'));
    </script>
</body>
</html>

    هذا كل ما تحتاج له لاستخدام React. لكنه لن يُمكِّنك من استخدام JSX، والتي سنناقشها في القسم التالي.

    ملاحظات

    • لا تجعل العنصر <body> العنصر الأساسي في تطبيق React. احرص دومًا على وضع عنصر ؤ داخل <body>، وأعطه ID، ثم صيِّر (render) المكونات داخله. وهذا يعطي React مجالًا خاصًا بها لتجري التعديلات، دون أن تقلق عن أي شيءٍ آخر يجري تعديلات على العناصر الأبناء للعنصر <body>.

    استخدام JSX عبر Babel

    عملية إنشاء المكوِّن HelloMessage وعنصر <div> في المثال الآتي جرت باشتقاق الصنف React.Component واستخدام الدالة React.createElement()‎. يُفترَض أن تبدو الشيفرة الآتية مألوفةً لأنها مماثلة لشيفرة HTML من القسم السابق: 

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  </head>
<body>
  <div id="app"></div>
  <script>

      class HelloMessage extends React.Component {
          render(){
            return React.createElement('div', null, 'Hello ', this.props.name);
          }
      };

      ReactDOM.render(React.createElement(HelloMessage, { name: 'Ahmed' }), document.getElementById('app'));

  </script>
</body>
</html>

    يمكنك أن تستخدم JSX اختياريًا عبر Babel، فمن الممكن تبسيط عملية إنشاء عناصر React بتجريد استدعاءات الدالة React.createElement()‎ ونكتبها بطريقة تشبه طريقة كتابة عناصر HTML.

    فبدلًا من كتابة الشيفرة الآتية التي تستخدم الدالة React.createElement()‎: 

    return React.createElement('div', null, 'Hello ', this.props.name);

    يمكننا أن نكتب ما يلي باستخدام JSX: 

    return <div>Hello {this.props.name}</div>;

    ثم باستخدام Babel نستطيع تحويلها إلى الشيفرة التي تستخدم React.createElement()‎ لكي يتمكن محرِّك JavaScript من تفسيرها.

    يمكننا القول مجازًا أنَّ JSX هي شكلٌ من أشكال HTML التي تستطيع كتابتها مباشرةً ضمن شيفرة JavaScript والتي تحتاج إلى خطوة إضافية هي التحويل، وتجرى عملية التحويل باستخدام Babel إلى شيفرة ECMAScript 5 لكي تتمكن المتصفحات من تشغيلها. بعبارةٍ أخرى، سيحوِّل Babel شيفرة JSX إلى استدعاءات للدالة React.createElement()‎.

    سنتحدث عن المزيد من تفاصيل JSX في القسم المخصص لها، لكننا الآن يمكننا أن نعدّ JSX على أنها طبقة تجريد اختيارية توفَّر للسهولة عند إنشاء عناصر React، ولن تعمل في متصفحات ES5 ما لم نحوِّلها بدايةً باستخدام Babel.

    تحويل JSX عبر Babel في المتصفح

    يُضبَط عادةً Babel لكي يُعالِج ملفات JavaScript أثناء عملية التطوير باستخدام أداة سطر الأوامر الخاصة به (عبر استخدام Webpack على سبيل المثال)؛ لكن من الممكن استخدام Babel مباشرةً في المتصفح بتضمين سكربت معيّن. ولمّا كنّا في بداياتنا فسنتفادى استخدام الأدوات التي تعمل من سطر الأوامر أو نتعلم استخدام مُحمِّل للوحدات، وذلك لكي ننطلق في React.

    استخدام browser.js لتحويل JSX في المتصفح

    حوّلنا مكوِّن React في مستند HTML الآتي إلى صياغة JSX، وستحدث عملية التحويل بسبب تضيمننا لملف babel.min.js وإعطائنا لعنصر <script> الخاصية type مع القيمة text/``b``abel: 

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
  </head>
<body>
  <div id="app"></div>
  <script type="text/babel">

      class HelloMessage extends React.Component { // React.Component لاحظ استخدام 
          render(){
              return <div>Hello {this.props.name}</div>;
          }
      };

      ReactDOM.render(<HelloMessage name="Ahmed" />, document.getElementById('app'));

      /*** سابقًا ***/
      /* var HelloMessage = createReactClass({
        *    render: function() {
        *        return <div>Hello {this.props.name}</div>;
        *    }
        * });
        *
        * ReactDOM.render(<HelloMessage name="Ahmed" />, document.getElementById('app'));
        */
  </script>
</body>
</html>

    تحويلنا لشيفرة JSX في المتصفح هو حلٌ سهلٌ وبسيط، لكنه ليس مثاليًا لأنَّ عملية التحويل تجري في وقت التشغيل، وبالتالي استخدام babel.min.js ليس حلًا عمليًا يمكن استخدامه في البيئات الإنتاجية.

    ملاحظات

    • أداة Babel هي اختيار المطورين من فريق React لتحويل شيفرات ES*‎ وصيغة JSX إلى شيفرة ES5. تعلّم المزيد حول Babel بمراجعة توثيقه.

    • باستخدام صيغة JSX:

      • أصبح بإمكان الأشخاص غير المتخصصين تقنيًا فهم وتعديل الأجزاء المطلوبة. فيجد مطورو CSS والمصممون صيغة JSX أكثر ألفةً من شيفرة JavaScript.

      • يمكنك استثمار كامل قدرات JavaScript في HTML وتتجنب تعلّم أو استخدام لغة خاصة بالقوالب. لكن اعلم أن JSX ليس محرّك قوالب، وإنما صيغة تصريحية للتعبير عن البنية الهيكلية الشجرية لمكونات UI.

      • سيجد المُصرِّف (compiler) أخطاءً في شيفرة HTML الخاصة بك كنتَ ستغفل عنها.

      • تحث صياغة JSX على فكر استخدام الأنماط السطرية (inline styles) وهو أمرٌ حسن.

    • اعرف محدوديات JSX.

    • تجري كتابة مواصفة JSX كمسودة لكي تُستخدَم من أي شخص كإضافة لصياغة ECMAScript.

    استخدام ES6 و ES*‎ مع React

    Babel ليس جزءًا من React، وليس الغرض من إنشاء Babel هو تحويل JSX، وإنما أُنشِئ كمُصرِّف JavaScript (‏compiler) بادئ الأمر. إذ يأخذ شيفرة ES‎ ويحوِّلها لكي تعمل على المتصفحات التي لا تدعم شيفرة ES‎. في هذه الآونة، يستخدم Babel أساسيًا لتحويل شيفرات ES6 و ES7 إلى ES5. عند إجراء عمليات التحويل هذه فمن البسيط تحويل تعابير JSX إلى استدعاءات React.createElement()‎.

    وبجانب تحويل Babel لشيفرات JSX، فيسمح أيضًا تحويل الشيفرات التي تعمل في إصدارات مستقبلية من ES*‎.

    مستند HTML الآتي يحتوي على مكوِّن HelloMessage مع إعادة كتابته لكي يستفيد من ميزة الأصناف في ES6. فلن يحوِّل Babel صيغة JSX فحسب، بل سيحوِّل صيغة أصناف ES6 إلى صيغةٍ تستطيع المتصفحات التي تحتوي محرِّك ES5 تفسيرها: 

    <!DOCTYPE html>
<html>
    <head>
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
    </head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class HelloMessage extends React.Component { // React.Component لاحظ استخدام 
            render(){
                return <div>Hello {this.props.name}</div>;
            }
        };

        ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

        /*** سابقًا ***/
        /* var HelloMessage = createReactClass({
         *    render: function() {
         *        return <div>Hello {this.props.name}</div>;
         *    }
         * });
         *
         * ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));
         */
    </script>
</body>
</html>

    يأخذ Babel في المستند السابق الشيفرةَ الآتية: 

    class HelloMessage extends React.Component {
    render(){
        return <div>Hello {this.props.name}</div>;
    }
};

ReactDOM.render(<HelloMessage name="John" />, document.getElementById('app'));

    ويحولها إلى: 

    "use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var HelloMessage = (function (_React$Component) {
    _inherits(HelloMessage, _React$Component);

    function HelloMessage() {
        _classCallCheck(this, HelloMessage);

        _get(Object.getPrototypeOf(HelloMessage.prototype), "constructor", this).apply(this, arguments);
    }

    _createClass(HelloMessage, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "div",
                null,
                "Hello ",
                this.props.name
            );
        }
    }]);

    return HelloMessage;
})(React.Component);

;

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), document.getElementById('app'));

    أغلبية ميزات ES6 (مع بعض الاستثناءات الطفيفة) يمكن تحويلها باستخدام Babel.

    ملاحظات

    • بالطبع ما يزال بإمكاننا استخدام Babel لغرضه الأساسي (وهو تصريف شيفرات JavaScript الحديثة إلى شيفرة JavaScript القديمة) دون استخدام JSX. لكن أغلبية المطورين الذين يستعملون Babel يستفيدون من قدرته على تحويل JSX إضافةً إلى ميزات ES*‎ غير المدعومة في المتصفحات القديمة.

    • يمكنك مراجعة توثيق Babel لمزيدٍ من المعلومات.

    تجربة React في JSFiddle

    يمكن استخدام نفس الضبط الذي أجريناه في هذا المقال مع JSFilddle. إذ تُستعمَل نفس الملفات (react.js و react-dom.js و babel.min.js) لجعل تنفيذ تطبيقات React سهلًا‎.‎

    هذا مثالٌ عن JSFiddle يحتوي على مكوِّن HelloMessage المستخدم في هذا المقال.

    لاحظ أنَّ لسان Babel يشير إلى أنَّ شيفرة JavaScript الموجودة في هذا اللسان ستحوَّل باستخدام Babel. وإذا ضغطتَ على لسان Resources ستجد أنَّ JSFiddle يُضمِّن الملفين react.js و react-dom.js.

    سيُفتَرَض بعد قراءتك لهذا المقال أنَّك تدرك ما هي المتطلبات الأساسية لإعداد React و Babel عبر babel.min.js، وصحيحٌ أنَّ JSFiddle لا يُصرِّح بوضوح عن طريقة إعداده، لكنه يستخدم نفس الضبط السابق (أو ما يشبهه) لتشغيل شيفرات React.

    ترجمة وبتصرف للفصل React Setup‎ من كتاب React Enlightenment

    ]]>    775Wed, 15 Jan 2020 13:08:00 +0000    المصطلحات المستخدمة في Reacthttps://academy.hsoub.com/programming/javascript/react/%D8%A7%D9%84%D9%85%D8%B5%D8%B7%D9%84%D8%AD%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D8%A9-%D9%81%D9%8A-react-r774/

    قبل أن نتعرف سويةً على آلية عمل React، دعنا نتعرف بدايةً على بعض المصطلحات التي ستسهِّل عملية التعليم. سأورد قائمةً من المصطلحات الشائعة، إضافةً إلى تعريفاتها، وسنستعمل هذه المصطلحات أثناء حديثنا عن React.

    Babel

    يحوِّل Babel شيفرة JavaScript ES‎ (أي JS 2015 و JS 2016 و JS 2017) إلى شيفرة ES5. إنَّ Babel هي أداة من اختيار مطوري React لكتابة شيفرات ES‎ وتحويل JSX إلى شيفرة ES5.

    Babel CLI

    يأتي Babel مع أداة تعمل من سطر الأوامر تسمى Babel CLI، ويمكن أن تستخدم لبناء الملفات من سطر الأوامر.

    خيارات ضبط المكونات (Component Configuration Options)

    وهي وسائط الضبط التي تُمرَّر (ككائن) إلى الدالة React.createClass()‎ أو الدالة البانية (في حال كنت تستعمل الأصناف في ES6) مما ينتج نسخةً (instance) من مكوِّن React.

    توابع دورة حياة المكونات (Component Life Cycle Methods)

    توابع دورة حياة المكونات هي مجموعة فرعية من أحداث المكونات، المفصولة (اصطلاحيًا) عن الخيارات الأخرى لضبط المكونات، أي هي:

    • componentWillUnmount
    • componentDidUpdate
    • UNSAFE_componentWillUpdate
    • shouldComponentUpdate
    • UNSAFE_componentWillReceiveProps
    • componentDidMount
    • UNSAFE_componentWillMount

    تُنفَّذ هذه التوابع في نقاط مُحدَّدة من دورة حياة المكوِّن.

    شجرة DOM‏ (Document Object Model)

    شجرة DOM هي الواجهة البرمجية لمستندات HTML و XML و SVG، وهي توفِّر تمثيلًا هيكليًا للمستند كشجرة. تُعرِّف DOM الدوال التي تسمح بالوصول إلى الشجرة، لذا يمكنها تغيير بنية المستند وأنماط التنسيق التابعة له ومحتواه.

    توفِّر DOM تمثيلًا للمستند على شكل مجموعة مهيكلة من العقد (nodes) والكائنات (objects)، والتي تملك مختلف الخاصيات (properties) والتوابع (methods). يمكن أن تملك العقد معالجات أحداث (event handlers) مرتبطة بها، وستستدعى تلك المعالجات عند تفعيل الحدث. باختصار، تصل شجرة DOM بين صفحات الويب ولغات البرمجة.

    ES5

    الإصدار الخامس من معيار ECMAScript.

    ES6 أو ECMAScript 2015

    الإصدار السادس من معيار ECMAScript، والذي يحتوي على إضافات كثيرة على لغة JavaScript.

    ES7 أو ECMAScript 2016

    الإصدار السابع من معيار ECMAScript.

    ES*‎

    تستخدم لتمثيل النسخة الحالية من JavaScript إضافةً إلى الإصدارات المستقبلية، والتي يمكن الكتابة بها باستخدام أدوات مثل Babel.

    عندما ترى «ES*‎» فمن المرجح أنَّ المقصود بها هو ES5 و ES6 و ES7 معًا.

    JSX

    JSX هي صيغة إضافية اختيارية تشبه XML لمعيار ECMAScript التي يمكن أن تُستخدم لتعريف بنية شجريّة شبيهة بلغة HTML في ملفات JavaScript. ستحوَّل تعابير JSX في ملف JavaScript إلى صياغة JavaScript قبل أن يتمكن محرِّك JavaScript من تفسير الملف. تُستَخدم برمجية Babel عادةً لتحويل تعابير JSX.

    Node.js

    Node.js هي بيئة تشغيل مفتوحة المصدر ومتعددة المنصات لكتابة شيفرات JavaScript. بيئة التشغيل Node.js تُفسِّر شيفرات JavaScript باستخدام محرِّك V8.

    npm

    npm هو مدير حزم للغة JavaScript نَشَأ من مجتمع Node.js.

    خاصيات React (أي React props)

    يمكنك أن تعدّ الخاصيات (props) على أنها خيارات الضبط لعقد React، وفي نفس الوقت يمكنك أن تتخيلها كخاصيات HTML.

    تملك الخاصيات عدِّة أدوار:

    1. يمكن أن تصبح خاصيات HTML، فلو طابقت خاصيةٌ ما إحدى خاصيات HTML فستُضاف كخاصية HTML في شجرة DOM النهائية.

    2. الخاصيات المُمرَّرة إلى الدالة createElement()‎ تصبح قيمًا مخزنةً في الكائن prop كنسخة (instance) من React.createElement()‎ أي ‎[INSTANCE].props.[NAME_OF_PROP]‎ تستخدم الخاصيات بكثرة لتمرير قيم إلى المكونات.

    3. بعض الخاصيات لها تأثيرات جانبية (مثل key و ref و dangerouslySetInnerHTML).

    React

    React هي مكتبة JavaScript تُستخدم لكتابة واجهات للمستخدمة بمرونة وكفاءة وفعالية عالية.

    مكوِّن React

    يُنشَأ مكوِّن React باستدعاء الوحدة create-react-class (أو React.Component عند استخدام الأصناف في ES6). هذه الدالة تأخذ كائنًا من الخيارات الذي يُستخدَم لضبط وإنشاء مكونات React. أحد أشهر خيارات الضبط هو الدالة render التي تعيد عقد React أي React nodes. والتالي يمكننك أن تعدّ مكوِّن React على أنه تجريد (abstraction) يحتوي على مكوِّن أو عقدة React واحد أو أكثر.

    الوحدة create-react-class

    توفر هذه الوحدة طريقة لإنشاء مكونات React دون إنشاء صنف جديد وجعله مشتقًا من الصنف React.Component. هذه الوحدة موجودة لكتابة شيفرات React.js دون ES6.

    عقد عناصر React

    عقد عناصر React (‏React Element Nodes أو ReactElement) هو تمثيل يشبه عناصر HTML في شجرة DOM يُنشَأ باستخدام React.createElement()‎;‎.

    عقد React

    عقد React (‏React Nodes أي عقد العناصر والعقد النصية) هو نوع الكائنات الرئيسي في React ويمكن إنشاؤه باستخدام React.createElement('div');‎. بعبارةٍ أخرى، عقد React هي كائنات تُمثِّل عقد DOM وعقد DOM الأبناء التابعة لها. وهي تمثيلٌ خفيفٌ وعديم الحالة (stateless) وغير قابلٍ للتعديل (immutable) لعقدة DOM.

    مصانع عقد React

    مصانع عقد React (‏React Node Factories) هي دالة تولِّد عقد عنصر React ذات نوعٍ (type) مُحدَّد. كانت هذه الخاصية موجودة في إصدارات سابقة من React.js ثم أهملت.

    دالة مكون React عديم الحالة

    أي React Stateless Function Component، وتكون عندما يتألف المكوِّن من الخاصيات فقط، دون حالة، ويمكن أن يكتب المكوِّن كدالة نقية مما يجعلنا نتجنب إنشاء نسخة من مكوِّن React. 

    var MyComponent = function(props){
    return <div>Hello {props.name}</div>;
};

ReactDOM.render(<MyComponent name="Ahmed" />, app);

    عقد عناصر React

    عقد عناصر React (‏React Text Nodes، أي ReactText) هي تمثيل للعقد النصية في شجرة DOM الوهمية كما في React.createElement('div', null, 'a text node');‎.

    شجرة DOM الوهمية (Virtual DOM)

    Virtual DOM هي شجرة مخزَّنة في ذاكرة JavaScript لعناصر ومكونات React وتُستخدَم لإعادة تصيير (re-render) شجرة DOM بكفاءة عالية (بمعرفة الاختلافات بينها وبين شجرة DOM الحقيقية).

    Webpack

    Webpack هو مُحمِّل للوحدات (modules) والمجمِّع (bundler) لها، والذي يأخذ الوحدات (‎.js أو ‎.css أو ‎.txt …إلخ.) مع اعتمادياتها ويولِّد وسائط ساكنة (static assets) تُمثِّل هذه الوحدات.

    ترجمة -وبتصرف- للفصل React Semantics‎ من كتاب React Enlightenment

    ]]>    774Sat, 11 Jan 2020 13:04:00 +0000    ما هي React؟https://academy.hsoub.com/programming/javascript/react/%D9%85%D8%A7-%D9%87%D9%8A-react%D8%9F-r773/

    React.js هي مكتبة JavaScript التي يمكن أن تستخدم لبناء واجهات المستخدم؛ فباستخدام React يمكن للمستخدمين إنشاء مكوِّنات قابلة لإعادة الاستخدام، وهذه المكونات تظهر البيانات أثناء تغيِّرها مع الزمن. يسمح لنا React Native بإنشاء تطبيقات أصيلة للهواتف الذكية باستخدام React. بكلمات أخرى، React هي أداة في JavaScript التي تُسهِّل إنشاء وصيانة واجهات المستخدم ذات الحالة (stateful) وعديمة الحالة (stateless)، وتوفر القدرة على تعريف وتقسيم واجهة المستخدم إلى مكوِّنات منفصلة (تسمى أيضًا بمكونات React) باستخدام عقد شبيهة بلغة HTML تسمى عقد React (أي React nodes). ستتحول عقد React في النهاية إلى صيغة قابلة للعرض في واجهات المستخدم (مثل HTML/DOM أو canvas أو SVG …إلخ.).

    يمكنني أن أستفيض بالشرح محاولًا تعريف React باستخدام الكلمات، لكنني أظن أنَّ من الأفضل أن أريك ما تفعله. لا تحاول أن تفهم كل التفاصيل الدقيقة أثناء شرحي لما بقي من هذا المقال، فالغرض من بقية هذه السلسلة أن تشرح لك بالتفصيل ما سيرد في هذه المقدمة.

    استخدام React لإنشاء مكونات شبيهة بعنصر ‎select>‎>

    ما يلي هو عنصر <select> يحتوي على عناصر <option>. لحسن الحظ، الغرض من العنصر <select> معروفٌ لديك: 

    <select size="4">
  <option>Volvo</option>
  <option>Saab</option>
  <option selected>Mercedes</option>
  <option>Audi</option>
</select>

    عندما يفسِّر المتصفح الشجرة السابقة من العناصر فسيُنتِج واجهة مستخدم تحتوي على قائمة نصية من العناصر التي يمكن اختيارها.

    أما في المتصفح، فشجرة DOM وشجرة DOM الظل (shadow DOM) تعملان معًا خلف الكواليس لتحويل العنصر <select> إلى مكوِّن UI. لاحظ أنَّ المكوِّن <select> يسمح للمستخدم باختيار أحد العناصر وبالتالي سيُخزِّن حالة ذاك الاختيار (أي انقر على Volvo وستختارها بدلًا من Mercedes).

    يمكننا باستخدام React إنشاء مكوِّن <select> خاص بنا باستخدام عقد React لإنشاء مكوِّن React والذي في النهاية سيُنتِج عناصر HTML في شجرة DOM.

    لنُنشِئ مكوِّنًا خاصًا بنا شبيهًا بالعنصر <select> باستخدام React.

    تعريف مكون React (أي React Component)

    سنُنشِئ فيما يلي مكوِّن React باشتقاق الصنف (class‎) ‏React.Component لإنشاء المكوِّن MySelect.

    كما ترى، المكوِّن MySelect مُنشَأ من عدِّة أنماط إضافةً إلى عقدة <div> فارغة: 

    class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
      // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل 
      // JSX باستخدام <div> سنعيد عنصر
      return <div style={mySelectStyle}></div>; 
    }
};

    العنصر <div> السابق شبيهٌ بعناصر HTML العادية، وهو موجودٌ داخل شيفرة JavaScript التي تسمى JSX! صيغة JSX هي صياغة JavaScript اختيارية ومخصصة التي تستخدمها مكتبة React للتعبير عن عقد React التي يمكن أن ترتبط مع عناصر HTML حقيقية، أو عناصر مخصصة، أو عقد نصية. علينا ألّا نفترض أنَّ عقد React المُعرَّفة باستخدام JSX مماثلة تمامًا لعناصر HTML، فهنالك بعض الاختلافات بينها، وبعض القصور أيضًا.

    يجب تحويل صياغة JSX إلى شيفرات JavaScript حقيقية التي يمكن تفسيرها من محركات ECMAScript 5، فإن لم تحوّل الشيفرة السابقة فستسبب خطأً في JavaScript.

    الأداة الرسمية لتحويل شيفرات JSX إلى شيفرات JavaScript تسمى Babel. بعد أن يحوِّل Babel العنصر <div> في الشيفرة السابقة إلى شيفرة JavaScript فستبدو كما يلي: 

    return React.createElement('div', { style: mySelectStyle });

    بدلًا من: 

    return <div style={mySelectStyle}></div>;

    في الوقت الحالي، ضع في ذهنك أنَّه عندما تكتب عناصر شبيهة بعناصر HTML في شيفرة React فستحوَّل في نهاية المطاف إلى شيفرة JavaScript حقيقية، إضافةً إلى تحويل أي شيفرة مكتوبة تحتوي على ميزات ECMAScript 6 وما بعدها إلى ECMAScript 5.

    المكوِّن <MySelect> يحتوي -عند هذه النقطة- على عقدة <div> فارغة فقط، أي أنَّ مكوِّن دون أي فائدة، لذا دعونا نغيِّر ذلك.

    سنُعرِّف مكونًا آخر باسم <MyOption> وسنستخدم المكوِّن <MyOption> داخل المكوِّن <MySelect> (ويسمى ذلك التركيب أي composition).

    تفحَّص شيفرة JavaScript المُحدَّثة الآتية التي تُعرِّف كلًا من مكونَي <MySelect> و <MyOption>: 

    class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل
    // <MyOption> يحتوي على المكون JSX باستخدام <div> إعادة عنصر
    return ( 
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    // MyOption تعريف المكون 
    render(){
      // JSX باستخدام <div> إعادة عنصر
      return <div>{this.props.value}</div>;    
    }
};

    يفترض أنَّك لاحظت وجود المكوِّن <MyOption> داخل المكوِّن <MySelect> والذين أنشأناهما باستخدام JSX.

    تمرير خيارات المكون باستخدام خاصيات React

    لاحظ أنَّ المكوِّن <MyOption> يتألف من عنصر <div> يحتوي على التعبير {this.props.value}. تُستخدَم الأقواس المعقوفة {} داخل JSX للإشارة أنَّ محتواها هو تعبيرٌ صالحٌ في JavaScript. بعبارة أخرى، يمكننا أن نكتب شيفرات JavaScript عادية داخل القوسين {}.

    استخدمنا القوسين {} للوصول إلى الخاصيات المُمرَّرة إلى المكوِّن <MyOption>. بعبارةٍ أخرى، عندما يعرض المكوِّن <MyOption> فستوضع قيمة الخيار value التي جرى تمريرها عبر خاصيةٍ شبيهةٍ بخاصيات HTML (أي value="Volvo"‎) داخل عنصر <div>. هذه الخاصيات التي تشبه خاصيات HTML تسمى خاصيات React، وتستخدمها مكتبة React لتمرير الخيارات التي لا تتغير إلى المكوِّنات، ومرَّرنا في مثالنا الخاصية value إلى المكوِّن <MyOption>، والأمر لا يختلف عن تمرير وسيط إلى دالة JavaScript، وهذا ما تفعله JSX خلف الكواليس.

    تصيير (Render) مكوِّن إلى شجرة DOM الافتراضية (Virtual DOM) ثم إلى شجرة DOM

    في هذه المرحلة، عرَّفنا مكوِّنين من مكونات React، لكننا لم نصيِّرها إلى شجرة DOM الافتراضية ومنها إلى شجرة HTML DOM.

    قبل أن نفعل ذلك، أود أن أشير إلى أنَّ كل ما فعلناه هو تعريف مكونين باستخدام JavaScript. وكل ما فعلناه -نظريًا- هو تعريف مكونات UI، وليس من الضروري أن تذهب هذه المكونات إلى شجرة DOM أو حتى إلى شجرة DOM الافتراضية (Virtual DOM). ويمكننا -نظريًا- أن نصيّر (render) هذه المكونات إلى منصة من منصات الهواتف الذكية أو إلى العنصر <canvas>)، لكننا لن نفعل ذلك هنا. تذكّر أنَّ استخدام React يمنحنا تنظيمًا لعناصر واجهة المستخدم التي يمكن تحويلها إلى شجرة DOM أو تطبيقاتٍ أخرى.

    لنصيّر الآن المكوِّن <MySelect> إلى شجرة DOM الافتراضية والتي بدورها ستصيّر إلى شجرة DOM الأساسية داخل صفحة HTML.

    في شيفرة JavaScript التالية، ستلاحظ أننا أضفنا استدعاءً للدالة ReactDOM.render()‎ في آخر سطر، ومررنا إلى الدالة ReactDOM.render()‎ المكوِّن الذي نريد تصييره (وهو <MySelect>) ومرجعية إلى عنصر HTML موجودٌ في شجرة HTML DOM (وهو <div id="app"></div>) الذي نريد عرض المكوِّن <MySelect> فيه. 

    class MySelect extends React.Component {
  // MySelect تعريف المكوِّن 
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    // JSX استخدام {} للإشارة إلى متغير جافاسكربت داخل 
    // <MyOption> يحتوي على المكون JSX باستخدام <div> إعادة عنصر
    return ( 
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    // MyOption تعريف المكون 
    render(){
      // JSX باستخدام <div> إعادة عنصر
      return <div>{this.props.value}</div>; 
    }
};

ReactDOM.render(<MySelect />, document.getElementById('app'));

    لاحظ أنَّ كل ما فعلناه هو إخبار React أين ستبدأ بتصيير المكونات وما هي المكونات التي عليها بدء التصيير بها. بعد ذلك ستصيّر React أيّة مكونات محتواة داخل المكوِّن الأصلي (مثل المكوِّن <MyOption> داخل <MySelect>).

    انتظر لحظة! ربما تفكِّر الآن أننا لم نُنشِئ العنصر <select> أصلًا، وكل ما فعلناه هو إنشاء قائمة ثابتة عديم الحالة من السلاسل النصية. سنصلح ذلك في الخطوة القادمة.

    قبل أن نكمل إلى الخطوة القادمة، أحب أن أشير إلى عدم وجود أي تعاملات ضمنية مع شجرة DOM لكي نعرض المكوِّن في شجرة DOM. بعبارةٍ أخرى، لم نستدعِ شيفرة jQuery أثناء إنشاء هذا المكوِّن؛ وجميع التعاملات مع شجرة DOM الفعلية قد أصبحت مجردةً (abstract) عبر استعمال شجرة DOM الافتراضية الخاصة بمكتبة React. في الواقع، عندما نستخدم React فما نفعله هو وصف شجرة DOM الافتراضية التي تأخذها React وتحوِّلها إلى شجرة DOM الفعلية لنا.

    استخدام حالة React (أي React state)

    لكي نجعل عنصر <MySelect> الخاص بنا يحاكي عنصر <select> الأصلي في HTML فعلينا أن نضيف حالةً (state) له. فما فائدة عنصر <select> المخطط إذا لم يكن قادرًا على الاحتفاظ بقيمة الاختيار الذي اخترناه.

    تأتي الحالة (state) عندما يحتوي المكوِّن على نسخة من المعلومات. وبخصوص عنصر <MyOption> المخصص، الحالة هي النص المختار حاليًا أو عدم وجود نص مختار من الأساس. لاحظ أنَّ الحالة تتضمن عادةً أحداثًا تابعة للمستخدم (مثل الفأرة أو لوحة المفاتيح أو حافظة النسخ …إلخ.) أو أحداثًا تابعة للشبكة (أي AJAX) وتستخدم قيمتها لتحديد إن كانت واجهة المستخدم للمكوِّن تحتاج إلى إعادة تصيير (re-render، فتغيير القيمة سيؤدي إلى إعادة التصيير).

    ترتبط الحالة عادةً بأعلى مكوِّن الذي يُنشِئ مكوِّن UI. كنا في السابق نستخدم الدالة getInitialState()‎ في React لنستطيع ضبط الحالة الافتراضية، فلو أردنا ضبط حالة المكون إلى false (أي لا يوجد أي نص مختار) فسنعيد كائن حالة عند استدعاء الدالة getInitialState()‎ (أي return {selected: false};‎). دورة حياة الدالة getInitialState()‎ هي استدعاء الدالة مرةً قبل تركيب المكوِّن، وستُستخدَم القيمة المعادة منها كقيمة افتراضية للخاصية this.state.

    الطريقة السابقة قديمة ولم تعد مستخدمةً إلا إذا كنتَ من محبي الوحدة create-react-class والتي سنأتي على ذكرها لاحقًا، أما في الأصناف في ES6، فنحن نستعمل this.state ضمن الدالة البانية (constructor) للصنف الخاص بالمكون. أي أننا سنكتب في الدالة البانية للصنف MySelect تعريفًا للحالة التي نريدها.

    هذه نسخة مُحدَّثة من الشيفرة أضفنا فيها الحالة إلى المكوِّن، أنصحك بقراءة التعليقات التي أضعها في الشيفرة والتي تجذب انتباهك إلى التغييرات التي حدثت في الشيفرة. 

    class MySelect extends React.Component {
  constructor(){ // إضافة الحالة الافتراضية
    super();
    this.state = {selected: false}; // this.state.selected = false;
  }
  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div>{this.props.value}</div>;
    }
};

ReactDOM.render(<MySelect />, document.getElementById('app'));

    بعد ضبط الحالة الافتراضية، سنستدعي دالة رد نداء (callback function) باسم select التي ستُطلَق عندما يضغط المستخدم على خيارٍ ما. داخل هذه الدالة سنحصل على نص الخيار الذي اختاره المستخدم (عبر المعامل event) وسنستخدمه لضبط الحالة setState للمكوِّن الحالي. لاحظ أننا نستخدم تفاصيل الكائن event المُمرَّر إلى دالة رد النداء select. يُفترَض أنَّ هذا النمط من البرمجة مألوفٌ لديك إن كانت لديك أيّ خبرة مع مكتبة jQuery من قبل.

    من أهم ما يجب ملاحظته في الشيفرة الآتية هو اتباع التوابع في مكوّنات React المُعرَّفة كأصناف ES6 لنفس القواعد في أصناف ES6 الاعتيادية، يعني هذا أنّها لا تربط this بنسخة الكائن، بل يجب عليك أن تستخدم بشكل صريح التابع ‎.bind(this)‎ في الدالة البانية: 

    class MySelect extends React.Component {
  constructor(){ // إضافة الحالة الافتراضية
    super();
    this.state = {selected: false}; // this.state.selected = false;
    this.select = this.select.bind(this); // هذا السطر مهم، راجع الشرح أعلاه
  }
  select(event){ // select إضافة الدالة 
    if(event.target.textContent === this.state.selected){ // إزالة التحديد
        this.setState({selected: false}); // تحديث الحالة
    }else{ // إضافة التحديد
        this.setState({selected: event.target.textContent}); // تحديث الحالة
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption value="Volvo"></MyOption>
        <MyOption value="Saab"></MyOption>
        <MyOption value="Mercedes"></MyOption>
        <MyOption value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div>{this.props.value}</div>;
    }
};

ReactDOM.render(<MySelect />, document.getElementById('app'));

    ولكي تحصل مكوِّنات <MyOption> على وصولٍ للدالة select فمررنا إشارةً مرجعيةً إليها عبر خاصيات React (‏props) من المكوِّن <MySelect> إلى المكوِّن <MyOption>. ولفعل ذلك أضفنا select={this.select}‎ إلى مكونات <MyOption>.

    بعد ضبط ما سبق، يمكننا إضافة onClick={this.props.select}‎ إلى المكوِّن <MyOption>. أرجو أن يكون واضحًا أنَّ ما فعلناه هو ربط الحدث click الذي سيستدعي الدالة select. تتكفّل React بربط دالة التعامل مع حدث النقر الحقيقي في شجرة DOM نيابةً عنّا. 

    class MySelect extends React.Component {
  constructor(){
    super();
    this.state = {selected: false};
    this.select = this.select.bind(this);
  }
  select(event){
    if(event.target.textContent === this.state.selected){
        this.setState({selected: false});
    }else{
        this.setState({selected: event.target.textContent});
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption select={this.select} value="Volvo"></MyOption>
        <MyOption select={this.select} value="Saab"></MyOption>
        <MyOption select={this.select} value="Mercedes"></MyOption>
        <MyOption select={this.select} value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
    render(){
      return <div onClick={this.props.select}>{this.props.value}</div>;
    }
};

ReactDOM.render(<MySelect />, document.getElementById('app'));

    بعد فعلنا لذلك، يمكننا الآن ضبط الحالة بالنقر على أحد الخيارات؛ وبعبارةٍ أخرى، عندما تنقر على خيارٍ ما فستستدعى الدالة select وتضبط حالة المكوِّن <MySelect>. لكن مستخدم المكوِّن لن يعرف أبدًا أنَّ ذلك قد حصل لأنَّ كل ما فعلناه حتى الآن هو تغيير حالة المكوِّن، ولا توجد أي تغذية بصرية تشير إلى اختيار أي عنصر. لذا لنصلح ذلك.

    ما علينا فعله الآن هو تمرير الحالة الراهنة إلى المكوِّن <MyOption> لكي يستجيب -بصريًا- إلى تغيير حالة المكوِّن.

    باستخدام الخاصيات عبر props، سنُمرِّر الحالة selected من المكوِّن <MySelect> إلى المكوِّن <MyOption> بوضع الخاصية state={this.state.selected}‎ في جميع مكونات <MyOption>. أصبحنا نعلم الآن ما هي الحالة (أي this.props.state) والقيمة الحالية (أي this.props.value) للخيار لكي نتحقق إذا كانت الحالة تُطابِق القيمة الموجودة في مكوِّن <MyOption> ما. وإذا كانت تطابقها، فسنعلم أنَّه يجب تحديد هذا الخيار، وسنفعل ذلك باستخدام عبار if بسيطة التي تضيف أنماط تنسيق (selectedStyle) إلى عنصر <div> في JSX إذا كانت الحالة تُطابِق قيمة الخيار الحالي. وفيما عدا ذلك، سنعيد عنصر React مع النمط unSelectedStyle: 

    class MySelect extends React.Component {
  constructor(){
    super();
    this.state = {selected: false};
    this.select = this.select.bind(this);
  }
  select(event){
    if(event.target.textContent === this.state.selected){
        this.setState({selected: false});
    }else{
        this.setState({selected: event.target.textContent});
    }   
  }

  render(){
      var mySelectStyle = {
          border: '1px solid #999',
          display: 'inline-block',
          padding: '5px'
      };
    return (
      <div style={mySelectStyle}>
        <MyOption state={this.state.selected} select={this.select} value="Volvo"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Saab"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Mercedes"></MyOption>
        <MyOption state={this.state.selected} select={this.select} value="Audi"></MyOption>
      </div>
    );
  }
};

class MyOption extends React.Component { 
  render(){
    var selectedStyle = {backgroundColor:'red', color:'#fff',cursor:'pointer'};
    var unSelectedStyle = {cursor:'pointer'};
    if(this.props.value === this.props.state){
      return <div style={selectedStyle} onClick={this.props.select}>{this.props.value}</div>;
    }else{
      return <div style={unSelectedStyle} onClick={this.props.select}>{this.props.value}</div>;
    }
  }
};
ReactDOM.render(<MySelect />, document.getElementById('app'));

    صحيحٌ أنَّ عنصر <select> الذي أنشأناه ليس جميلًا أو كاملًا كما كنتَ ترجو، لكنني أظن أنَّك ترى ما الغرض الذي حققناه. مكتبة React تسمح لك بالتفكير بالعناصر بطريقة منظمة ومهيكلة هيكليةً صحيحة.

    قبل الانتقال إلى شرح دور شجرة DOM الافتراضية، أود أنَّ أوضِّح أنَّه من غير الضروري استخدام JSX و Babel. يمكنك تخطي هذه الأدوات واستخدام شيفرات JavaScript مباشرة. سأريك نسخةً أخيرةً من الشيفرة بعد تحويل JSX باستخدام Babel. إذا لم ترغب باستخدام JSX فيمكنك أن تكتب الشيفرة الآتية يدويًا بدلًا من الشيفرة التي كتبناها خلال هذا المقال: 

    class MySelect extends React.Component {
  constructor() {
    super();
    this.state = {
      selected: false
    };
    this.select = this.select.bind(this);
  }

  select(event) {
    if (event.target.textContent === this.state.selected) {
      this.setState({
        selected: false
      });
    } else {
      this.setState({
        selected: event.target.textContent
      });
    }
  }

  render() {
    var mySelectStyle = {
      border: '1px solid #999',
      display: 'inline-block',
      padding: '5px'
    };
    return React.createElement("div", {
      style: mySelectStyle
    }, React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Volvo"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Saab"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Mercedes"
    }), React.createElement(MyOption, {
      state: this.state.selected,
      select: this.select,
      value: "Audi"
    }));
  }
};

class MyOption extends React.Component {
  render() {
    var selectedStyle = {
      backgroundColor: 'red',
      color: '#fff',
      cursor: 'pointer'
    };
    var unSelectedStyle = {
      cursor: 'pointer'
    };

    if (this.props.value === this.props.state) {
      return React.createElement("div", {
        style: selectedStyle,
        onClick: this.props.select
      }, this.props.value);
    } else {
      return React.createElement("div", {
        style: unSelectedStyle,
        onClick: this.props.select
      }, this.props.value);
    }
  }

};
ReactDOM.render(React.createElement(MySelect, null), document.getElementById('app'));

    فهم دور شجرة DOM الافتراضية (virtual DOM)

    سأنهي جولتنا بأكثر جوانب React حديثًا بين المطورين، إذ سأتحدث عن شجرة DOM الافتراضية (React virtual DOM).

    لاحظنا -عبر الأمثلة في هذا المقال- أنَّ التعامل الوحيد مع شجرة DOM الحقيقية أثناء إنشائنا لعنصر <select> خاص بنا هو عندما أخبرنا الدالة ReactDOM.render()‎ أين ستعرض مكوِّنات UI في صفحة HTML (أي عندما عرضناها في <div id="app"></div>). من المرجح أن يكون هذا تعاملك الوحيد مع شجرة DOM الحقيقية عندما تبني تطبيق React من شجرة من المكوِّنات. وهنا تأتي قيمة مكتبة React. فعند استخدامك لها، ليس عليك أن تفكر بشجرة DOM بنفس الطريقة التي كنتَ تفكِّر فيها عند كتابتك لشيفرة jQuery. فمكتبة React تستبدل jQuery عبر تجريد استخدام شجرة DOM.

    ولأنَّ شجرة DOM الافتراضية حلّت محل شجرة DOM الحقيقية، سمح ذلك بإجراء تحديثات لشجرة DOM الحقيقية مع أداءٍ ممتاز. تبقي شجرة DOM الافتراضية سجلًا بجميع التغيرات في واجهة المستخدم اعتمادًا على الحالة والخاصيات (state و props)، ثم تقارنها بشجرة DOM الحقيقية وتجري أقل مقدار ممكن من التعديلات عليها. بصيغةٍ أخرى، لا تُحدَّث شجرة DOM الحقيقية إلا بأقل قدر ممكن وذلك عند تغيير الحالة أو الخاصيات.

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

    أرغب أن أنهي هذه المقدمة بالقول أنَّ استخدام React يلغي تقريبًا الحاجة إلى استخدام أي مكتبات أخرى مثل jQuery. واستخدام شجرة DOM الافتراضية يريحنا من كثيرٍ من التفاصيل الدقيقة، لكن قيمة مكتبة React لا تكمن في شجرة DOM الافتراضية فقط، وإنما يمكننا أن نعدّ شجرة DOM الافتراضية على أنها الفستق الحلبي المبشور فوق الحلوى؛ فببساطة، قيمة مكتبة React تكون في أنها توفِّر طريقةً سهلةً الإنشاء والصيانة لإنشاء شجرة من مكوِّنات الواجهة الرسومية. ‎تخيل بساطة إنشاء واجهة رسومية إذا بنيتَ تطبيقك باستخدام مكوِّنات React القابلة لإعادة الاستخدام.

    تذكر هذه السلسلة عندما تريد أن تعرِّف ما هي React. مكتبة React.js هي مكتبة JavaScript التي يمكن استخدامها لبناء واجهات المستخدم، وباستخدام React يمكن للمطورين إنشاء مكونات قابلة لإعادة الاستخدام، وهذه المكونات تُظهِر البيانات وتستطيع تغييرها مع الزمن؛ وتوجد أيضًا مكتبة React Native لبناء تطبيقات للهواتف الذكية باستخدام React.

    ترجمة وبتصرف للفصل What is React?‎ من كتاب React Enlightenment

    ]]>    773Wed, 08 Jan 2020 18:00:00 +0000    مدخل إلى React.js - مكتبة تطوير الواجهات الرسومية من فيس بوكhttps://academy.hsoub.com/programming/javascript/react/%D9%85%D8%AF%D8%AE%D9%84-%D8%A5%D9%84%D9%89-reactjs-%D9%85%D9%83%D8%AA%D8%A8%D8%A9-%D8%AA%D8%B7%D9%88%D9%8A%D8%B1-%D8%A7%D9%84%D9%88%D8%A7%D8%AC%D9%87%D8%A7%D8%AA-%D8%A7%D9%84%D8%B1%D8%B3%D9%88%D9%85%D9%8A%D8%A9-%D9%85%D9%86-%D9%81%D9%8A%D8%B3-%D8%A8%D9%88%D9%83-r112/

    يعتبر React.js -على حداثته- من أقوى أطر عمل Javascript (بعضهم قد يسميه مكتبة وليس إطار عمل) لبناء الواجهات الرسومية على الويب، حيث طبّق أفكارًا جديدة في هذا المجال، جعلت شِفرة الواجهات البرمجية أكثر نظافة، سرعة وأكثر قابلية للصيانة. يسمح لك React ببناء الواجهة الرسومية في مجموعة مكونات، كل مكوّن عبارة عن سرد لهيكلة ومنطق المكون، إذا تمزج بين شِفرة HTML مخصصّة وشِفرة جافاسكربت تصف سلوك ذاك المكون، ليكون قائما بذاته وقابلا لإعادة الاستعمال.

    react-intro.thumb.png.281e4107933e768579

    إطار عمل React مُطور من طرف شركة فيس بوك (Facebook)، وقد يكفيك ثقة ويجذب انتباهك بمجرد أن تعرف أن فيس بوك نفسها تستخدم React في واجهتها البرمجية على موقع Facebook نفسه! يمكنك فتح موقع Facebook وعرض شفرة HTML الخاصة به والبحث عن كلمة react للتأكد بنفسك.

    سنقوم في هذا الدرس بإنشاء مُربَّع تعليقات بسيط وفعَّال بإمكانك وضعه في مدوَّنتك، سيكون المُربَّع عبارة عن نُسخة مُجرَّدة من التعليقات الآنية التي تُقدمها لك تعليقات Disquse ،LiveFyre أو فيس بوك.

    ستجد في نهاية الدَّرس أنَّ لديكَ مُربَّع تعليقات يوفِّر ما يلي:

    • عرض لجميع التعليقات.
    • نموذج لإرسال تعليق.
    • خُطَّافات لتوفير مُنتهى خلفي مُخصَّص custom backend.

    سوف يحتوي مُربَّع التعليقات كذلك على بعض المزايا اللَّطيفة:

    • تعليق مُحسَّن: تظهر التَّعليقات في القائمة قبل أن يتمّ حفظها على الخادم وبناءً عليه تظهر التَّعليقات في التوِّ واللَّحظة.
    • تحديثات حيَّة: تظهر تعليقات المستخدمين الآخرين في عرض التَّعليقات في نفس وقت الإرسال.
    • هيئة Markdown: يُمكن للمستخدمين استخدام Markdown لتهيئة نصوصهم.

    هل ترغب في تخطِّي كل هذا ومعاينة المصدر؟ كل شيء موجود على GitHub.

    تشغيل الخادم

    رغم أنَّه ليس من الضروري أن تبدأ بهذا الجزء من الدرس إلَّا أنَّنا سنقوم في وقت لاحق بإضافة وظائف تتطلَّب المُشاركة POST إلى خادم قيد التشغيل. إذا كُنتَ واثقٌ من أنّك على دراية بهذا الأمر وترغب في إنشاء خادمك الخاص يُمكنكَ القيام بذلك. ولِمَن يُريد التَّركيز على تعلُّم React دون الحاجة إلى القلق بشأن جوانب الخادم، فلقد كتبنا خوادم بسيطة بعددٍ من اللُّغات: Python ،Ruby ،Go، Node.js و PHP.

    كلُّ هذا مُتاح على GitHub. يُمكن الاطِّلاع على المصدر أو تحميل ملفّ مضغوط للبدء.

    للبدء بتطبيق هذا الدَّرس، كلّ ما عليكَ فعله هو بداية تحرير public/index.php.

    البدء

    سنستخدم لهذا الدرس ملفَّات JavaScript سبق إنشاؤها على شبكة توصيل مُحتوى CDN. قم بفتح المُحرِّر المفضَّل لديك وقم بإنشاء مُستند HTML جديد:

    <!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      // Your code here
    </script>
  </body>
</html>

    سيتمّ كتابة شفرات JavaScript في وسم السكربت هذا طوال الفترة المتبقية من الدرس.

    مُلاحظة:  قُمنا بإدراج jQuery هُنا لأننا نٌريد تبسيط الشَّفرات لاستدعاءات Ajax في المُستقبل، ولكنَّها ليست إلزاميَّة لعمل React.

    مُكوِّنكَ الأوَّل

    تتمحور الفكرة الأساسيَّة لـ React حول كل شيءٍ له علاقة بالمُكوِّنات التركيبيَّة القابلة للتَّشكيل modular, composable components. سنستخدم بنية المُكوٍّنات التالية لمثال مُربَّع التَّعليقات لهذا الدرس:

    - CommentBox
  - CommentList
    - Comment
  - CommentForm

    سنقوم الآن ببناء المُكوِّن CommentBox وما هو إلَّا وسم بسيط:

    // tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
React.render(
  <CommentBox />,
  document.getElementById('content')
);

    لاحظ أن أسماء عناصر HTML تبدأ بحرف صغير في حين أن أسماء فئات React تبدأ بحرف كبير.

    1. صياغة JSX

    ستُلاحظ أوَّل ما تلاحظ تلكَ الصياغة المُشابهة لـ XML في شفرة JavaScript. لدينا precompiler بسيط يُترجم الجُملة البسيطة Syntactic Sugar إلى شفرات JavaScript المُجرَّدة هذه:

    // tutorial1-raw.js
var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div', {className: "commentBox"},
        "Hello, world! I am a CommentBox."
      )
    );
  }
});
React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

    إنَّ استخدام صياغة JSX اختياري ولكن وجدنا أنَّها أسهل استخدامًا من شفرات JavaScript مُجرَّدة. يُمكن قراءة المزيد في مقال صياغة JSX

    2. ماذا يحدث هنا

    نقوم بتمرير بعض الوظائف في كائن JavaScript إلى دالَّة ()React.createClass لإنشاء مُكوِّن React جديد. أهم هذه الوظائف ما تُسمَّى تصيير render والتي تُعيد شجرة من مُكوِّنات React والتي في نهاية المطاف ستقوم بالتصيير عبر HTML.

    لا تُعتبر وسوم عُقَد نموذج كائن مُستند DOM فعليَّة، وإنَّما هي تمثيلات من مُكوِّنات div الخاصَّة بـ React. يُمكنكَ اعتبارها كوسوم أو قطع من البيانات والتي يعرف React كيفيَّة التعامل معها. React آمن. لا نقوم بتوليد سلاسل HTML لذلك فإن حماية XSS تُعتبر الافتراضيَّة.

    لا يجب عليكَ إعادة شفرات HTML قياسيَّة. وإنَّما يُمكنكَ إعادة شجرة من المُكوِّنات التي قُمتَ (أو شخص آخر قام) ببنائها. هذا ما يجعل React قابلة للتَّشكيل composable: وهي عقيدة أساسيَّة في الواجهات الأماميَّة القابلة للصّيانة.

    يقوم ()React.render بتمثيل المُكوِّن القاعدي، بدء عمل الإطار، ثم إدخال الوسوم إلى عنصر نموذج كائن مُستند خام، يتمّ تقديم تلك الوسوم كمُعطى ثاني .

    تركيب المُكوِّنات

    سنُنشيء الآن هياكل بناء لكلٍّ من المُكوِّنين CommentList وCommentForm والتي ستكون -مرَّة أخرى- عبارة عن وسوم بسيطة. أضِف هذين المُكوِّنين إلى ملفِّك مع الحفاظ على تعريف  commentBox الحالي واستدعاء React.render:

    // tutorial2.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

    ما سنقوم بعمله الآن هو تحديث مُكوِّن CommentBox لاستخدام المُكوِّنات الجديدة:

    // tutorial3.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

    لاحظ كيف تمَّ مزج وسوم HTML والمُكوِّنات التي قُمنا ببنائها. إنَّ مُكوِّنات HTML ما هي إلَّا مُكوِّنات React مُنتظمة، تمامًا مثل تلك التي تقوم بتعريفها ولكن مع فارق واحد. سيقوم مترجم JSX تلقائيًا بإعادة كتابة وسوم HTML إلى تعبيرات React.createElement() tagName وترك كل شيء على حدة. وهذا لمنع حدوث التَّلوّث في مساحة الاسم العموميَّة global namespace.

    استخدام الخصائص

    سنقوم الآن بانشاء مُكوِّن Comment، والذي سوف يعتمد على البيانات التي تمَّ تمريرها إليه من المُكوِّن الأساسي. يتمّ اتاحة البيانات التي تمّ تمريرها من مُكوِّن أساسي كـ "خاصيَّة" في المُكوِّن الفرعي. ويتمّ الوصول إلى هذه "الخصائص" من خلال this.props. يُمكننا باستخدام الخصائص props قراءة البيانات التي تمّ تمريرها إلى Comment من CommentList، وتصيير بعض الترميزات:

    // tutorial4.js
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

    يُمكنكَ وضع نصّ أو مُكوِّنات React في الشَّجرة وذلك بإحاطة تعبير JavaScript بأقواس داخل JSX (إما كخاصيَّة أو كمُكوِّن فرعي). نقوم بالوصول إلى خاصيَّات مُسمَّاه تمّ تمريرها إلى عنصر كمفاتيح على this.props وأيّ عناصر مُتداخلة كما this.props.children.

    خصائص المُكوِّن

    نحتاج الآن وبعد أن قمنا بتحديد مُكوِّن Comment إلى تمرير اسم الكاتب ونصّ التعليق إلى هذا المُكوِّن. يسمح لنا هذا بإعادة استخدام نفس الشَّفرة لكلِّ تعليق مُختلف. لنقوم الآن بإضافة بعض التَّعليقات داخل مُكوِّن CommentList:

    // tutorial5.js
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

    لاحظ أنَّنا قد قُمنا بتمرير بعض البيانات من مُكوِّن CommentList الأساسي إلى مُكوِّنات Comment الفرعيَّة. مرَّرنا على سبيل المثال Pete Hunt (عن طريق خاصيَّة) وThis is one comment (عن طريق عُقدة فرعيَّة تُشبه XML) إلى Comment الأوَّل. وكما ذكرنا بالأعلى فإنَّ مُكوِّن Comment سيعمل على الوصول إلى هذه الخصائص من خلال this.props.author، وthis.props.children.

    إضافة Markdown

    Markdown هي طريقة بسيطة لتهيئة مُضمّنة inline لنصِّك. على سبيل المثال، احاطة النص بعلامة النجمة (*) سيقوم بتأكيده.

    أولًا، أضِف مكتبة الطرف الثالث marked إلى تطبيقك. Marked هي مكتبة JavaScript تقوم بأخذ نص Markdown وتُحوِّله إلى صيغة HTML خام. هذا الأمر يتطلَّب وسم سكربت في قسم head (قُمنا بادراجه بالفعل في أرضيَّة React):

    <!-- index.html -->
<head>
  <title>Hello React</title>
  <script src="https://fb.me/react-0.13.3.js"></script>
  <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>

    سنقوم بعد ذلك بتحويل نصّ التَّعليق إلى Markdown ومن ثمَّ إخراجه:

    // tutorial6.js
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {marked(this.props.children.toString())}
      </div>
    );
  }
});

    كل ما فعلناه هنا هو استدعاء مكتبة marked. نحتاج إلى تحويل this.props.children من نصّ React مُحاط إلى سلسلة خام يُمكن لمكتبة marked فهمها ولذلك فإننا نقوم بستدعاء دالَّة ()toString.

    لكن لدينا مشكلة وهي أنَّه يتمّ إظهار وسوم HTML الموجودة في التَّعليقات بالشكل التَّالي في المُتصفح: This is another comment.

    هذا الأمر هو حماية React لك من هجوم XSS. هُناك طريقة للالتفاف على ذلك، ولكنَّ إطار العمل يُحذِّرُكَ من استخدامها:

    // tutorial7.js
var Comment = React.createClass({
  render: function() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

    هذه الشَّفرات هي API خاصّ والذي عمدًا يجعل من الصَّعب إدراج شفرات HTML خام، في حالتنا بالنِّسبة لمكتبة marked فإنَّنا سنقوم بالاستفادة من هذا المنفذ الخلفيّ.

    تذكَّر: باستخدامك لهذه الميزة فإنَّك تعتمد على مكتبة marked أن تكون آمنة. نقوم في هذه الحالة بتمرير sanitize: true التي تطلب من مكتبة marked تنفيذ أي وسم HTML في المصدر بدلًا من تمريره دون تغيير.

    إضافة نموذج البيانات

    حتَّى الآن فإنَّنا نقوم بإدراج تعليقات مُباشرة في شفرات المصدر. بدلًا من ذلك، سنقوم بتصيير بضع من بيانات JSON في قائمة التعليق. يأتي هذا من الخادم في نهاية المطاف، ولكن في الوقت الراهن سنكتبها نحن في المصدر:

    // tutorial8.js
var data = [
  {author: "Pete Hunt", text: "This is one comment"},
  {author: "Jordan Walke", text: "This is *another* comment"}
];

    الآن نحنُ بحاجة إلى إدخال هذه البيانات في مُكوِّن CommentList بطريقة نموذجيِّة. قُم بتعديل CommentBox واستدعاء ()React.render لتمرير هذه البيانات إلى CommentList عن طريق الخصائص props:

    // tutorial9.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

    الآن حيثُ أنَّ البيانات مُتاحة في CommentList، سوف نقوم بتقديم التَّعليقات بطريقة ديناميكيَّة:

    // tutorial10.js
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

    هذا كل شيء.

    الاستدعاء من الخادم

    سنعمل الآن على استبدال البيانات الثَّابتة ببعض البيانات الديناميكيَّة من الخادم. يتمّ ذلك بإزالة خاصيَّة البيانات data prop واستبدالها بعنوان URL للجلب:

    // tutorial11.js
React.render(
  <CommentBox url="comments.json" />,
  document.getElementById('content')
);

    هذا المُكوِّن مُختلف عن المُكوِّنات السَّابقة حيثُ أنَّه سيضطر إلى إعادة تصيير نفسه. لن يحتوي المُكوِّن على أيّ بيانات إلى أن يعود الطَّلب من الخادم، في هذه الحالة قد يحتاج المُكوِّن إلى تصيير بعض التَّعليقات الجديدة.

    الحالة التفاعليَّة

    قام كلّ مُكوِّن حتَّى الآن على أساس خصائصه بتصيير نفسه مرة واحدة. الخصائص props ثابتة: يتمّ تمريرها من المُكوِّن الأساسي و”مملوكة” من قبل المُكوِّن الأساسي كذلك. لتنفيذ التَّفاعلات، فإنَّنا نُقدِّم حالة قابلة للتغيير إلى المُكوِّن. حالة this.state هي خاصَّة بالمُكوِّن ويُمكن تغييرها من خلال استدعاء ()this.setState يقوم المُكوِّن بإعادة تقديم نفسه عند تحديث الحالة.

    وظائف ()render مكتوبة إلزاميًّا كدوال this.props وthis.state. يضمن إطار العمل أن تكون واجهة المستخدم دائمًا مُتَّسِقَة مع المُدخَلات.

    عندما يقوم الخادم بجلب بيانات سنقوم نحن بتغيير بيانات التعليق لدينا. لنُضيف الآن مصفوفة من بيانات التَّعليق كحالة للمُكوِّن CommentBox:

    // tutorial12.js
var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

    يتمّ تنفيذ دالَّة ()getInitialState مرَّة واحدة فقط خلال دورة حياة المُكوِّن كما أنَّها تبدأ الحالة الأوليَّة للمُكوِّن.

    تحديث الحالة

    نُريد عند إنشاء المُكوِّن لأوَّل مرَّة أن نحصل على (GET) بعض بيانات JSON من الخادم وتحديث الحالة لتعكس أحدث البيانات. هذا من شأنه أن يكون نقطة نهاية ديناميكيَّة لو كان الأمر في تطبيق حقيقي، ولكن سنستخدم لهذا المثال ملف JSON ثابت لابقاء الأمور بسيطة:

    // tutorial13.json
[
  {"author": "Pete Hunt", "text": "This is one comment"},
  {"author": "Jordan Walke", "text": "This is *another* comment"}
]

    سنقوم باستخدام مكتبة jQuery للمساعدة في عمل طلب غير متزامن asynchronous request إلى الخادم.

    مُلاحظة: حيثُ أنَّ هذا الأمر أصبح تطبيق AJAX فإنَّك سوف تحتاج لتطوير تطيبقك باستخدام خادم ويب بدلًا من أن ملف موجود في نظام ملفاتك. قدَّمنا -كما هو مذكورٌ بالأعلى- العديد من الخوادم التي يُمكنكَ استخدامها على GitHub. توفر تلك الخوادم التأدية الوظيفيَّة التي تحتاجها لبقيَّة هذا الدرس.

    // tutorial13.js
var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

    وظيفة componentDidMount هنا هي وظيفة تُستدعى تلقائيًا بواسطة React عندما يتمّ تصيير مُكوِّن. مفتاح التَّحديثات الديناميكيَّة هو استدعاء دالَّة ()this.setState. نقوم باستبدال مصفوفة التَّعليقات القديمة بواحدة جديدة من الخادم وتقوم واجهة المستخدم بتحديث نفسها تلقائيًا. بسبب هذا التفاعل، يُعتبر التغيير لإضافة تحديثات حيَّة طفيفًا. سوف نستخدم أسلوب بسيط في هذا الدَّرس ولكن لكَ الحُريَّة في استخدام WebSockets أو غيرها من التكنولوجيَّات.

    // tutorial14.js
var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox url="comments.json" pollInterval={2000} />,
  document.getElementById('content')
);

    كل ما فعلناه هنا هو نقل استدعاء AJAX إلى وظيفة مُستقلَّة واستدعائها عند تحميل المُكوِّن الأوَّل واستدعائها كلّ ثانيتين بعد ذلك. حاول تشغيل هذا في مُتصفِّحك وتغيير ملف comments.json. في غضون ثانيتين ستظهر لكَ التغييرات.

    إضافة تعليقات جديدة

    حان الآن الوقت لبناء النموذج. على مُكوِّن CommentForm أن يسأل المُستخدم عن اسمه ونصّ التَّعليق، ثم يقوم بإرسال طلب إلى الخادم لحفظ التعليق.

    // tutorial15.js
var CommentForm = React.createClass({
  render: function() {
    return (
      <form className="commentForm">
        <input type="text" placeholder="Your name" />
        <input type="text" placeholder="Say something..." />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

    دعونا نجعل النموذج متجاوب. عندما يقوم المُستخدم بإرسال النَّموذج، يجب علينا مسحه clear، تقديم طلب إلى الخادم، ثُمَّ تحديث قائمة التعليقات. للبدء في تنفيذ هذا، سقوم بالاستماع إلى حدث ارسال النَّموذج ومسحه.

    // tutorial16.js
var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

    1- الأحداث Events

    تقوم React بإرفاق مُعالجات الحدث في المُكوِّنات باستخدام اتفاقية التَّسمية camelCase. نقوم بإرفاق مُعالج onSubmit إلى النَّموذج الذي يعمل على مسح حقول النَّموذج عند إرساله مع إدخال صحيح.

    عليكَ استدعاء ()preventDefault بالحدث لمنع الإجراء الافتراضي للمُتصفِّح من اعتماد النَّموذج.

    2- المراجع Refs

    نستخدم خاصيَّة ref لتعيين اسم للمُكوِّن الفرعي وthis.refs لارجاع المُكوِّن. يمكن أن نستدعي (React.findDOMNode(componentعلى مُكوّن للحصول على عنصر نموذج كائن مُستند المُتصفِّح الأصلي.

    3- نداءات الخصائص

    عندما يُرسِل المُستخدم التَّعليق، فإنَّنا سوف تحتاج إلى تحديث قائمة التَّعليقات لتشمل التَّعليق الجديد. من الطبيعي أن تفعل كل هذا في مُكوِّن CommentBox حيث أنَّ المُكوِّن يمتلك الحالة التي تُمثِّل قائمة التَّعليقات.

    نحن بحاجة لتمرير البيانات من نُسخة المُكوِّن الفرعي الاحتياطيَّة إلى المُكوِّن. يتمّ فعل هذا في وظيفة render الخاصَّة بالأب عن طريق تمرير رد نداء جديد (handleCommentSubmit) في الابن ثُمَّ الزامها لحدث الابن onCommentSubmit. كُلَّما تم تشغيل الحدث، سيُنفَّذ الاستدعاء:

    // tutorial17.js
var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    // TODO: submit to the server and refresh the list
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

    سوف نستدعي الآن النِّداء من CommentForm عندما يقوم المُستخدم بإرسال النَّموذج:

    // tutorial18.js
var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

    الآن وبعد أن أصبح النِّداء في مكانه الصحيح، كل ما علينا القيام به هو الإرسال إلى الخادم وتحديث القائمة:

    // tutorial19.js
var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

    تحديثات مُحسَّنة

    مشروعنا الآن كامل الوظائف ولكن من المُمل أن نقوم بانتظار الطَّلب حتَّى يكتمل قبل ظهور تعليقك في القائمة. يُمكننا إضافة هذا التَّعليق إلى القائمة لجعل التطبيق يعمل بشكلٍ أسرع.

    // tutorial20.js
var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'POST',
      data: comment,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    this.loadCommentsFromServer();
    setInterval(this.loadCommentsFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

    ختامًا

    انتهيتَ لتوك من إنشاء مربع تعليقات في بضع خطوات بسيطة. يُمكنك الآن التَّعرُّف على المزيد حول أسباب استخدام React، أو الخوض في مراجع API وبدء العمل.

    ترجمة -وبتصرّف- للمقال: Tutorial | React.

    ]]>    112Tue, 30 Jun 2015 05:20:13 +0000