ابدأ مع React


الدرس: فهم منطق React


الصفحة السابقة

انغمس في عالم REACT


أهلا ومرحبا بكم في قلب دورة React! دعنا نتعمق الآن في عالم مكتبتنا المفضلة.
React

اكتشف عالم الأطر الأمامية


ربما تكون قد سمعت عنها من قبل ، فأطر الواجهة الأمامية موجودة في كل مكان. تستخدمها جميع شركات التكنولوجيا الكبرى بشكل يومي: Facebook و Twitter و Amazon و GitLab ، على سبيل المثال لا الحصر. هناك أيضًا العديد من الشركات الناشئة ، منذ إنشائها ، التي يتم إطلاقها على React و Vue وغيرهما ؛ أو الشركات الكبيرة التي تطور قاعدة بياناتها لتلجأ إليها.

 لكن قبل المضي قدمًا ، ما هو إطار العمل في الكود؟

نسمي إطار عمل الواجهة الأمامية (framework front-end) كل مجموعة من الفئات والوظائف والأدوات المساعدة التي تسهل إنشاء تطبيقات الويب. هذه الأدوات متوافقة مع جميع المتصفحات.

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

اكتشف React ، أحد أكثر أطر عمل JavaScript شيوعًا


عندما يتعلق الأمر بإطارات عمل جافا سكريبت ، فإن أسماء React و Vue.js و Angular ليست بعيدة أبدًا. وهناك آخرون (Ember ، Meteor ، Backbone…). لكل منها خصائصه ومزاياه وعيوبه.

الشيء الذي يثير اهتمامنا في هذه الدورة هو أكثرها شيوعًا: أنا بالطبع أتحدث عن React  .

واحد من المشهورين بكثرة"؟ كيف نعرف؟
كانت العديد من التقارير تسير في هذا الاتجاه لسنوات (يمكنك على سبيل المثال رؤيتها في تقرير حالة JS 2020 ، أو في اتجاهات البحث على منصة العمل الحر Malt  ). يمكنك أيضًا تأكيد هذه المعلومات من خلال البحث الخاص بك في عالم أطر عمل JS!

React هو مشروع مفتوح المصدر ، تم إصداره بموجب ترخيص MIT ويديره Facebook . تعتمد منتجات الويب والجوال الخاصة بهم مثل Facebook و Messenger و Instagram إلى حد كبير على هذه التقنية. نظرًا لأن React مفتوح المصدر ، يمكنك الوصول إلى الكود المصدري مباشرةً على GitHub  أو اقتراح ميزة أو حتى ملاحظة مشكلة (issue ) .

الهدف منه هو إنشاء واجهات المستخدم ، باستعمال أداة سريعة و تحتوي وحدات  . الفكرة الرئيسية وراء React هي أنك تبني تطبيقك من مكونات. يجمع المكون بين HTML و JS و CSS ، ويتم إنشاؤه لقياس احتياجاتك ، والذي يمكنك إعادة استخدامه لبناء واجهات المستخدم.

مكون واحد = HTML + CSS + JS .
انتظر ... لا أفهم. فجأة سمعت أن React ليست إطار عمل بالمعنى الدقيق للكلمة ، بل مكتبة ؟ ثم نتحدث عنها كإطار ؟! 

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

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

React
تتفاعل المكتبات والأطر بشكل مختلف مع الكود

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

من ناحية أخرى ، مع وجود مكتبة ، كل شيء أكثر مرونة. تزودك المكتبة بمجموعة من الموارد التي يمكنك دمجها مع مكتبات أخرى لبناء تطبيقك.

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

لماذا React


لقد أخبرتك سابقًا عن مزايا / عيوب كل إطار. فيما يلي بعض نقاط القوة في React دون الخوض في الجانب التقني:

مجتمعه


نشط بشكل خاص ، فهو يجعل حياتك أسهل. عندما تبحث في الإنترنت عن مشكلتك ، يكاد يكون من المستحيل ألا يواجه أحد بالفعل نفس المشكلة مثلك. خاصة وأن React لديها شركات كبيرة جدًا بين مستخدميها (Netflix و Twitter و Paypal و Airbnb على سبيل المثال لا الحصر). يمكنك التأكد من أن مهندسًا آخر قد واجه مشكلتك بالفعل. على سبيل المثال ، عندما تجد سؤالاً مطروحًا على stackoverflow   . يستجيب فريق React أيضًا للمشكلات (المشكلات) الموجودة في مستودع React GitHub (بالإنجليزية). ولكن هناك عددًا هائلاً من النشرات الإخبارية والمدونات وقنوات YouTube التي ينشئها المستخدمون - حيث تجعلك ديناميكيتها دائمًا ترغب في تجربة أدوات جديدة. سأوصي ببعض منهم في الفصل الأخير من هذه الدورة.

وثائقها 


وثائق react   غنية ، تُحدث بانتظام وترجمتها بالكامل في العربية.

فرصه المهنية


نظرًا لأنه أحد أكثر الأطر شيوعًا ، فإن الفرص المهنية وفيرة بشكل خاص. في الاستطلاع السنوي لـ State of JS لعام 2020 ، قال 100٪ من الأشخاص إنهم يعرفون React ، ومن بين 21000 مشارك ، قال 17000 أنهم استخدموا React (التي فازت بجائزة  التكنولوجيا الأكثر استخدامًا لعام 2019  ) .

لذلك ، قد لا أكون موضوعيًا جدًا لأن هذه هي مكتبتي المفضلة ، لكنك ستفهم: إتقان React يوفر العديد من المزايا.

حوّل ملف HTML بسيط إلى تطبيق React



بما قلته لك للتو ، بالتأكيد أنت متشوق بالفعل للنزول إلى العمل 💪؟

هذا جيد ، لأنه كان في البرنامج!

سنقوم الآن بتحويل ملف HTML إلى تطبيق React  .

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

الاستفادة من روابط CDN


سنستخدم روابط CDN لإضافة React إلى ملف HTML .

ما هو ارتباط CDN؟ 

مضافًا إلى علامة  script  ، يسمح ارتباط CDN  ( شبكة توصيل المحتوى ) على وجه الخصوص باستيراد مكتبة مباشرة إلى كود HTML .

سأقدم لك عرضًا توضيحيًا صغيرًا ليظهر لك كيف يعمل.

لقد رأيت ، في بضع خطوات لدينا تطبيق React قيد التشغيل.

استفد من بساطة CodePen


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

لنبدأ بإنشاء Pen جديد . لديك ملف HTML و CSS و JavaScript .

بادئ ذي بدء ، سنحدد في HTML المكان الذي سيعيش فيه تطبيق (app React) React ، بكل بساطة مع معرف:


<div id="react-goes-here">
    <!-- React سيتم استبدال محتوى هذا العنصر بمكونات -->
</div>
 
بمعنى آخر ، هذا يعني أننا سنخبر JavaScript الخاص بنا بمكان إرفاقه ومكان بناء عناصره.

ودعنا نذهب إلى JS!

حاول الآن عمل console.log  :

React
تعطينا وحدة التحكم في React's console خطأ!

إنه لا يعمل. وذلك لأن تعديلا بسيطا مطلوب هنا : كما لو كنت قد استوردت ارتباطات React و React DOM و Babel ، يمكنك إضافتها إلى CodePen الخاص بك عن طريق النقر على الإعدادات المجاورة لـ JS.

React
لا تنسَ استيراد روابط CDN الخاصة بك لاستخدام React

هنا قمنا باستيراد روابط CDN الأساسية لتطبيق React الخاص بنا. لإعطائك بعض المعلومات الأساسية:

  • React  - هذه هي واجهة برمجة التطبيقات (API) التي ستدير المكونات.
  • React DOM  - هذه هي واجهة برمجة التطبيقات (API) المسؤولة عن إنشاء المكونات في DOM.
  • Babel  - تسمح هذه الأداة باستخدام أحدث بنية JS في المتصفح (ES6 +).
ربما تكون قد شاهدته من قبل ، لكن ربما لا تتذكره: ما هو DOM؟

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

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

قم بإنشاء المكون الأول الخاص بك



لنكتب الآن المكون الأول . 

سأستخدم هنا مكونات تسمى المكونات الوظيفية ، أي دالة تُرجع عنصر React . سوف ندخل في مزيد من التفاصيل حول المكونات في الفصل التالي.

لنبدأ بهذه الوظيفة الأولى ، MyComponent :


function MyComponent() {
    return (<div>Hello OpenClassrooms 👋</div>;)
}
 
بنسخ هذا الرمز في جزء JS ، لا يحدث شيء. ! هذا أمر طبيعي: لا يزال يتعين عليك إرفاق مكون React الخاص بك بـ HTML الخاص بك.

لقد أعلنا هنا عن مكون له وظيفة كلاسيكية. لكن لاحظ أنه يمكنك أيضًا استخدام وظائف الأسهم التي سيتم كتابتها  const MyComponent = () => div />  .

أرفق React بـ HTML


سنستخدم الآن ReactDOM للإرفاق بـ HTML الخاص بنا .

في المقتطف أدناه ، يتم    استخدام المعرف react-goes-here لتحديد المكان الذي سيعيش فيه تطبيق React الخاص بنا في HTML الخاص بنا. وبعد ذلك، نأمر ReactDOM بتوليد (render) مُكوننا React المُسمى MyComponent.


ReactDOM.render(<MyComponent />, document.getElementById("react-goes-here"))
 
يتم عرض المكون الخاص بنا!

تهانينا ! لقد شاهدت للتو مكون React الأول الخاص بك! إذا كنت تريد أن ترى كيف يبدو ، فهناك CodePen الخاص بي هنا .

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


class MyComponent extends React.Component
 
كانت هذه هي الطريقة الوحيدة لاستخدام الوظائف الموجودة في قلب React . ولكن منذ تحديث React 16.8 في عام 2019 ، يمكن لمكونات الوظيفة أيضًا التعامل مع كل هذا. 
النتيجة: أنها تتكرر أكثر فأكثر ، ويتم تشجيعها على استخدامها. هذا لعدة أسباب: تتطلب كتابة كود أقل ، فهم أسهل ، وبالتالي يسهل اختبارها ، وإعادة قراءتها ، وإعادة استخدامها. هذا هو السبب في أن هذه الدورة تستخدم فقط مكونات الوظيفة.

الممارسة


React
لقد أخبرتك في الفصل السابق عن تمرين fil rouge الذي سيرافقنا طوال هذه الدورة. انت تتذكر ؟ معًا ، سننشئ موقعًا لمتجر نباتات ، La maison jungle! 

حان الوقت لتطبيق ما رأيته للتو.

مهمتك ، إذا قبلتها ، هي:

  • قم بإنشاء مكون Header الأول الذي يحتوي على اسم متجرنا: The jungle house . مكون الرأس يتوافق مع العلامة  h1  .
  • قم بدمجه في عنصر HTML الذي سيكون له المعرف "root" .
سوف تجد رابط رابط CodePen لبدء التمرين هنا . أنت محظوظ: لقد قمت بالفعل بتهيئة React و ReactDOM و Babel لك.


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

باختصار


  • إطار JS هو مجموعة من الطبقات، الوظائف والمرافق التي تجعل من السهل بالنسبة لنا لإنشاء تطبيقات لمتصفحات أو الهواتف النقالة.
  • واحدة من أكثر الأدوات شيوعًا ، React ، وهي مكتبة بالإضافة إلى إطار عمل ، تسمح لك بإنشاء واجهات مستخدم . 
  • يتمثل النهج التقني لـ React في إنشاء كود معياري(modular code) ، بناءً على مكونات قابلة لإعادة الاستخدام .
  • ثلاثة من فوائد React هم في المجتمع ، وثائق، و فرص العمل .
  • أنت تعرف الآن كيفية تحويل ملف HTML بسيط إلى React - وأنشأت المكون الأول الخاص بك!