لوحة المتصدرين

سنلقي في هذا المقال نظرةً على مكتبة React، إذ سنطّلع على بعض التفاصيل حول خلفيتها وحالات استخدامها، وسننشئ سلسلة أدوات React الأساسية وتطبيقًا بسيطًا بحيث نتعلم كيفية عمل React. المتطلبات الأساسية: الإلمام بأساسيات لغات HTML وCSS وجافاسكربت JavaScript ومعرفة استخدام سطر الأوامر أو الطرفية، إذ تستخدِم React صيغة لغة HTML ضمن جافاسكربت HTML-in-JavaScript، والتي تسمى JSX، أي JavaScript وXML، كما سيساعدك التعرف على كل من لغة HTML وجافاسكربت على تعلّم صيغة JSX، وتحديد ما إذا كانت الأخطاء في تطبيقك مرتبطةً بجافاسكربت أو بمجال أكثر تحديدًا من React. الهدف: إعداد بيئة تطوير React المحلية، وإنشاء تطبيق بسيط، وفهم أساسيات عمله. تُعَدّ React مكتبةً لبناء واجهات المستخدِم، ولا تُعَدّ إطار عمل، فهي ليست حصريةً للويب، كما تُستخدَم مكتبة React مع المكتبات الأخرى للتصيير Render إلى بيئات معينة، إذ يمكن استخدام إطار عمل React Native لبناء تطبيقات الهاتف المحمول، لكن يستخدِم المطورون مكتبة React جنبًا إلى جنب مع ReactDOM للبناء للويب، إذ تُستخدَم React و ReactDOM في المجالات نفسها ولحل المشكلات نفسها التي تستخدِمها أطر تطوير الويب الحقيقية الأخرى، لذلك نشير إلى React بوصفها إطار عمل Framework. تهدف React إلى تقليل الأخطاء التي تحدث عندما يبني المطورون واجهات المستخدِم من خلال استخدام المكوّنات Components، والتي تُعَدّ أجزاءً من الشيفرة البرمجية المنطقية والمستقلة ذاتيًا والتي تصف جزءًا من واجهة المستخدِم، إذ يمكن تكوين هذه المكونات مع بعضها البعض لإنشاء واجهة مستخدِم كاملة، كما تجرِّّد React كثيرًا من أعمال التصيير، وبالتالي تجعلك تركِّز على تصميم واجهة المستخدِم. حالات الاستخدام Use cases لا تفرض React قواعد صارمةً حول اصطلاحات الشيفرة أو تنظيم الملفات خلاف أطر العمل Frameworks الأخرى، مما يتيح لفرق العمل تحديد الاصطلاحات التي تناسبها بصورة أفضل، واستخدام مكتبة React بالطريقة التي ترغب بها، إذ يمكن لمكتبة React معالجة زر واحد أو أجزاء من الواجهة أو واجهة المستخدِم للتطبيق بأكمله، فإذا أردت استخدام React لأجزاء صغيرة من الواجهة، فلا يُعَدّ ذلك سهلًا مثل بناء تطبيق باستخدام مكتبة مثل jQuery أو إطار عمل مثل Vue، إذ يكون استخدام مكتبة React أسهل عند إنشاء تطبيقك بالكامل باستخدامها. كما تتطلب العديد من مزايا تجربة المطوِّر لتطبيق React مثل كتابة الواجهات باستخدام صيغة JSX، عملية تصريف Compilation، في حين تبطّئ إضافة مصرِّف مثل Babel إلى موقع ويب الشيفرة الموجودة عليه، لذلك يُعِدّ المطورون مثل هذه الأدوات باستخدام خطوة بناء، إذ يمكن القول أنّ React لها متطلبات أدوات كثيرة، ولكن يمكن تعلّمها، كما سيركِّز هذا المقال على حالة استخدام React لتصيير واجهة المستخدِم بالكامل لتطبيق ما باستخدام الأدوات التي توفرها أداة create-react-app الخاصة بفيسبوك. كيفية استخدام React للغة جافاسكربت تستخدِم React ميزات لغة جافاسكربت الحديثة للعديد من أنماطها، ولكن يأتي أكبر تحوّل لها عن جافاسكربت عند استخدام صيغة JSX التي توسِّع صيغة جافاسكربت، بحيث يمكن أن تكون الشيفرة البرمجية التي تشبه HTML جنبًا إلى جنب معها، وإليك المثال التالي: const heading = <h1>Mozilla Developer Network</h1>; يُعرَف الثابت heading السابق بتعبير JSX، ويمكن لمكتبة React استخدامه لتصيير الوسم <h1> في التطبيق، ولنفترض أننا أردنا تغليف العنوان heading بوسم <header> لأسباب دلالية، إذ تتيح صيغة JSX بتداخل العناصر ضمن بعضها بعضًا كما نفعل مع لغة HTML كما يلي: const header = ( <header> <h1>Mozilla Developer Network</h1> </header> ); ملاحظة: لا تُعَدّ الأقواس في المقتطف السابق خاصةً بصيغة JSX، وليس لها أيّ تأثير على تطبيقك، وإنما تُعَدّ إشارةً لك ولحاسوبك بأن الأسطر المتعددة من الشيفرة البرمجية الموجودة ضمنها هي جزء من التعبير نفسه، كما يمكنك كتابة تعبير header كما يلي: const header = <header> <h1>Mozilla Developer Network</h1> </header> لا يمكن لمتصفحك قراءة صيغة JSX بدون مساعدة، إذ سيبدو التعبير header كما يلي عند تصريفه باستخدام أداة Babel أو Parcel: const header = React.createElement("header", null, React.createElement("h1", null, "Mozilla Developer Network") ); يمكن تخطي خطوة التصريف واستخدام التابع React.createElement()‎ لكتابة واجهة المستخدِم بنفسك، ولكنك تفقد بذلك ميزة JSX التصريحية، وتصبح قراءة شيفرتك أصعب، إذ يُعَدّ التصريف خطوةً إضافيةً في عملية التطوير، في حين يعتقد العديد من المطورين في مجتمع React أنّ قابلية قراءة JSX تستحق العناء، كما تجعل الأدوات الشائعة تصريف صيغة JSX إلى جافاسكربت جزءًا من عملية الإعداد، ولا يتعين عليك إعداد التصريف بنفسك إلّا إذا أردت ذلك. تُعَدّ صيغة JSX مزيجًا من لغتَي HTML وجافاسكربت، لذلك يجدها بعض المطورين سهلة التعلم، ويجدها آخرون مربكةً بسبب طبيعتها الممزوجة، ولكنها ستسمح لك ببناء واجهات مستخدِم بسرعة وبسهولة إذا أتقنتها، كما ستسمح للآخرين بفهم قاعدة شيفرتك البرمجية فهمًا أفضل وبسرعة، كما يمكنك الاطلاع على صفحة شرح JSX بالتفصيل من توثيق React في موسوعة حسوب لقراءة المزيد عن JSX. إعداد تطبيق React الأول هناك العديد من الطرق لاستخدام React، لكننا سنستخدِم create-react-app وهي أداة واجهة سطر الأوامر -أو CLI اختصارًا-، إذ تسرّع هذه الأداة عملية تطوير تطبيق React عن طريق تثبيت بعض الحزم وإنشاء بعض الملفات، والتعامل مع الأدوات الموضَّحة سابقًا، كما يمكن إضافة React إلى موقع ويب دون استخدام الأداة create-react-app عن طريق نسخ بعض عناصر <script> في ملف HTML، ولكن تُعَدّ الأداة create-react-app نقطة بداية شائعة لتطبيقات React، إذ سيسمح لك استخدامها بقضاء المزيد من الوقت في بناء تطبيقك ووقت أقل في التفكير في الإعداد. المتطلبات يجب تثبيت Node.js من أجل استخدام create-react-app، كما يوصى باستخدام إصدار الدعم طويل الأمد Long-term Support -أو LTS اختصارًا-، إذ يتضمن Node مدير الحزم npm ومشغّل الحزم npx، كما يمكنك استخدام مدير الحزم Yarn، لكننا سنفترض أنك تستخدِم npm في هذا المقال، وهنا يمكنك الاطلاع على مقال أساسيات إدارة الحزم لمزيد من المعلومات حول npm وYarn. إذا استخدمت نظام ويندوز Windows، فستحتاج إلى تثبيت بعض البرامج التي تمنحك التكافؤ مع طرفية نظام يونيكس Unix أو نظام ماك macOS لاستخدام أوامر الطرفية التي سنستخدِمها، إذ يُعَدّ كل من Gitbash الذي يكون جزءًا من مجموعة أدوات git لنظام ويندوز أو نظام ويندوز الفرعي للينكس Windows Subsystem for Linux -أو WSL اختصارًا- مناسبَين، كما يمكنك الاطلاع على دليل استخدام سطر الأوامر للحصول على مزيد من المعلومات حول هذه الأوامر وحول أوامر الطرفية بصفة عامة. ضع في بالك أنّ React و ReactDOM ينتجان تطبيقات تعمل فقط على مجموعة حديثة إلى حد ما من المتصفحات مثل IE9+‎ باستخدام تعويض نقص دعم المتصفحات Polyfill، كما يوصَى باستخدام متصفح حديث مثل فايرفوكس Firefox أو مايكروسوفت إيدج Microsoft Edge أو سفاري Safari أو كروم Chrome. تهيئة التطبيق تأخذ الأداة create-react-app وسيطًا واحدًا هو الاسم الذي ترغب في منحه لتطبيقك، وتستخدِمه لإنشاء مجلد جديد، ثم تنشئ الملفات الضرورية بداخله، وتأكد من تطبيق الأمر cd على المكان الذي تريد أن يكون فيه تطبيقك على القرص الصلب، ثم شغّل الأمر التالي في الطرفية: npx create-react-app moz-todo-react يؤدي تشغيل الأمر السابق إلى إنشاء المجلد moz-todo-response، مع تنفيذ الأمور التالية ضمنه: تثبيت بعض حزم npm الأساسية لعمل التطبيق. كتابة سكربتات لبدء التطبيق وتنفيذه. إنشاء بنية من الملفات والمجلدات التي تحدِّد معمارية التطبيق الأساسية. تهيئة المجلد بوصفه مستودع جيت git إذا كان جيت مثبتًا على حاسوبك. ملاحظة: إذا كان مدير الحزم yarn مثبتًا لديك، فستُستخدَم أداة create-react-app افتراضيًا لاستخدام yarn بدلًا من npm، وإذا كان كل من مديرَي الحزم مثبَّتَين لديك وتريد استخدام npm صراحةً، فيمكنك إضافة الراية ‎--use-npm عند تشغيل create-react-app: npx create-react-app moz-todo-react --use-npm ستعرِض create-react-app عددًا من الرسائل في الطرفية أثناء عملها، وهذا أمر طبيعي، إذ يمكن أن يستغرق ذلك بضع دقائق، فالوقت مناسب الآن لتحضير كوب من الشاي. غيّر المسار الحالي إلى المجلد moz-todo-react باستخدام الأمر cd عند اكتمال العملية، ثم شغّل الأمر npm start، إذ سيبدأ تشغيل السكربتات المُثبَّتة باستخدام الأداة create-react-app على خادم محلي على المضيف المحلي localhost الذي هو 3000، وافتح التطبيق في تبويب جديد من المتصفح، إذ سيعرِض متصفحك ما يلي: بنية التطبيق تمنحنا أداة create-react-app كل ما نحتاجه لتطوير تطبيق React، إذ تبدو بنية الملفات الأولية الخاصة به كما يلي: moz-todo-react ├── README.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js يُعَدّ المجلد src بأنه المكان الذي سنقضي فيه معظم وقتنا، فهو مكان وجود شيفرة تطبيقنا البرمجية، كما يحتوي المجلد public على ملفات سيقرأها متصفحك أثناء تطوير التطبيق وأهمها index.html، إذ تحقن React شيفرتك البرمجية في هذا الملف ليتمكّن متصفحك من تشغيلها، وهناك بعض الوسوم الأخرى التي تساعد الأداة create-react-app في عملها، لذا احرص على عدم تعديلها إلا إذا كنت متأكدًا مما تفعله، ولكن يجب عليك تغيير النص الموجود داخل العنصر <title> في هذا الملف ليعكس عنوان تطبيقك، وعناوين الصفحات الدقيقة مهمة من أجل إمكانية الوصول. سيُنشَر أيضًا المجلد public عند إنشاء ونشر إصدار الإنتاج من تطبيقك، إذ لن نغطّي مرحلة النشر في هذا المقال، ولكن يجب أن تكون قادرًا على استخدام حل مشابه لذلك الموضَّح في مقال نشر التطبيق، في حين يحتوي الملف package.json على معلومات حول مشروعنا، والتي يستخدِمها كل من Node.js وnpm لإبقائه منظمًّا، كما لا يُعَدّ هذا الملف خاصًا بتطبيقات React، ولا تحتاج إلى فهم هذا الملف على الإطلاق لإكمال هذا المقال، ولكن إذا أردتَ معرفة المزيد عنه، فيمكنك قراءة مقال أساسيات إدارة الحزم. استكشاف مكون React الأول يُعَدّ المكوّن Component في React وحدةً قابلةً لإعادة الاستخدام والتي تصيّر جزءًا من التطبيق، كما يمكن أن تكون هذه الأجزاء كبيرةً أو صغيرةً، لكنها تكون عادةً محددةً بوضوح، فهي تخدم غرضًا واحدًا واضحًا، ولنفتح الملف src/App.js، لأنّ متصفحنا يطالبنا بتعديله، إذ يحتوي هذا الملف على المكوِّن الأول App وعدد قليل من سطور الشيفرة البرمجية الأخرى: import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; يتكون ملف App.js من ثلاثة أجزاء رئيسية وهي كما يلي، إذ تتبع معظم مكونات React هذا النمط: بعض تعليمات الاستيراد import في الأعلى. المكوِّن App في المنتصف. تعليمة تصدير export في الأسفل. تعليمات الاستيراد Import تسمح تعليمات الاستيراد الموجودة في أعلى الملف App.js باستخدام الشيفرة المُعرَّفة في مكان آخر، وهذه التعليمات هي: import React from 'react'; import logo from './logo.svg'; import './App.css'; تستورِد التعليمة الأولى مكتبة React التي تحوِّل صيغة JSX التي نكتبها إلى التابع React.createElement()‎، ويجب على جميع مكونّات React استيراد وحدة React، فإذا تخطيت هذه الخطوة، فسيعطي تطبيقك خطأً، في حين تستورِد التعليمة الثانية صورة شعار Logo من الملف '‎./logo.svg'، ولاحظ استخدام /. في بداية المسار، والامتداد ‎.svg في نهايته، إذ يدل ذلك على أن الملف محلي وأنه ليس ملف جافاسكربت، ويوجد الملف logo.svg في مجلدنا المصدر، ولا نكتب مسارًا أو امتدادًا عند استيراد وحدة React، لأنه لا يُعَدّ ملفًا محليًا، وإنما يُدرَج بوصفه اعتماديةً Dependency في الملف package.json. تستورِد التعليمة الثالثة ملف CSS المتعلق بالمكوّن App، ولاحظ عدم وجود اسم متغير والموجِّه from، إذ لا تُعَدّ هذه الصيغة أصيلةً Native في صيغة وحدة جافاسكربت، وإنما تأتي من أداة Webpack وهي الأداة التي تستخدِمها create-react-app لتجميع جميع ملفات جافاسكربت مع بعضها بعضًا وتقديمها إلى المتصفح. المكون App توجد دالة تسمَّى App بعد تعليمات الاستيراد، إذ يفضِّل مجتمع جافاسكربت استخدام الأسماء بحالة الجَمل Camel-case مثل helloWorld، في حين تستخدِم مكونات React أسماء المتغيرات بحالة باسكال Pascal-case مثل HelloWorld لتوضيح أنّ عنصر JSX المحدَّد هو مكون React وليس وسم HTML عادي، فإذا أردت إعادة تسمية الدالة App لتصبح app، فسيعطي متصفحك خطأً. function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } تعيد الدالة App تعبير JSX الذي يحدِّد ما يصيّره متصفحك على DOM في النهاية، كما تحتوي بعض العناصر في هذا التعبير على سمات Attributes مكتوبةً كما تُكتَب في لغة HTML تمامًا باتباع النمط attribute="value"‎، في حين يحتوي وسم الفتح <div> على السمة className في السطر الثالث، وهي الخاصية class نفسها في لغة HTML، ولكن لا يمكننا استخدام الكلمة class، لأنّ صيغة JSX هي لغة جافاسكربت وهي كلمة محجوزة فيها، مما يعني أنّ لغة حافاسكربت تستخدِمها مسبقًا لغرض معيَّن، وقد يتسبّب استخدامها في شيفرتنا في حدوث مشاكل، كما تُكتَب بعض سمات HTML الأخرى بطريقة مختلفة في JSX عن تلك الموجودة في لغة HTML للسبب ذاته. عدِّل الوسم <p> في السطر السادس، بحيث يصبح "Hello, world!‎"، ثم احفظ ملفك، إذ ستلاحظ أن هذا التعديل سيُصيَّر مباشرةً في خادم التطوير الذي يعمل على المضيف المحلي http://localhost:3000 في متصفحك، ثم احذف بعد ذلك الوسم <a> واحفظ الملف، مما يؤدي إلى اختفاء رابط "Learn React"، إذ يجب أن يبدو المكوّن App الآن كما يلي: function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Hello, World! </p> </header> </div> ); } تعليمات التصدير تجعل تعليمة التصدير export default App في الجزء السفلي من الملف App.js المكوّنَ App متاحًا للوحدات الأخرى. الملف index.js لنفتح الملف src/index.js الذي يُعَدّ المكان الذي يُستخدَم فيه المكوّن App، وهو نقطة الدخول إلى تطبيقنا، إذ يبدو في البداية كما يلي: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // إذا أردت أن يعمل تطبيقك في وضع عدم الاتصال وأن يُحمَّل بسرعة، فيمكنك تغيير // ‫unregister()‎ إلى register()‎ في الأسفل، ولاحظ أنّ هذا يأتي مع بعض المخاطر. serviceWorker.unregister(); يبدأ الملف index.js باستيراد جميع وحدات JS والملفات الأخرى التي يحتاجها للعمل كما هو الحال مع الملف App.js، ويحتفظ الملف src/index.css بالتنسيقات العامة المطبَّقة على تطبيقنا بالكامل، كما يمكننا رؤية المكوّن App الذي استوردناه، فهو متاح للاستيراد بفضل تعليمة التصدير export في أسفل الملف App.js، في يستدعي السطر السابع الدالة ReactDOM.render()‎ مع وسيطين هما: المكوِّن الذي نريد تصييره، وهو <App /‎> في هذه الحالة. عنصر DOM الذي نريد تصيير المكوِّن ضمنه، وهو العنصر ذو المعرِّف root في هذه الحالة، فإذا نظرت ضمن الملف public/index.html، فستجد أن هذا العنصر هو <div> ضمن العنصر <body>. وهذا يعني أننا نريد تصيير تطبيق React الخاص بنا مع المكوِّن App بوصفه الجذر أو المكوِّن الأول. ملاحظة: يجب أن تحتوي مكونات React وعناصر HTML على شرطات إغلاق مائلة في صيغة JSX، إذ ستؤدي كتابة المكوّن <App> فقط أو الوسم <img> فقط إلى حدوث خطأ. تُعَدّ عمّال الخدمة Service workers أجزاءً مثيرةً من الشيفرة البرمجية التي تحسّن أداء التطبيق وتسمح لميزات تطبيقات الويب بالعمل في وضع عدم الاتصال، لكننا لن نتحدّث عنها في هذا المقال، إذ يمكنك حذف السطر الخامس ومعظم الشيفرة الموجودة أسفله، وهنا يجب أن يبدو ملف index.js النهائي كما يلي: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); المتغيرات والخاصيات سنستخدِم فيما يلي بعضًا من مهارات جافاسكربت لنتمكّن من تعديل المكوّنات والتعامل مع البيانات في React، إذ سنتحدث عن كيفية استخدام المتغيرات في JSX، وسنشرح الخاصيات Props التي تُعَدّ طريقةً لتمرير البيانات إلى المكوّن الذي يمكن الوصول إليه بعد ذلك باستخدام المتغيرات. المتغيرات في JSX لنركّز على السطر التاسع في الملف App.js: <img src={logo} className="App-logo" alt="logo" /> وُضِعت قيمة السمة src الخاصة بالوسم <img /‎> ضمن أقواس معقوصة، وهي الطريقة التي تتعرف بها صيغة JSX على المتغيرات، إذ تشير القيمة {logo} إلى استيراد الشعار logo في السطر الثاني من التطبيق، ثم استرداد ملف الشعار وتصييره، ولنحاول إنشاء متغير خاص بنا من خلال إضافة التعليمة const subject = 'React';‎ قبل تعليمة return في الدالة App، إذ يجب أن يبدو المكوّن App الآن كما يلي: function App() { const subject = "React"; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Hello, World! </p> </header> </div> ); } غيّر السطر الثامن لاستخدام المتغير subject بدلًا من االكلمة "world" كما يلي: function App() { const subject = "React"; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Hello, {subject}! </p> </header> </div> ); } يجب أن يعرض المتصفح التعليمة "Hello, React!‎" بدلًا من التعليمة "Hello, world!‎" عند الحفظ، ولا يستفيد المتغير الذي ضبطناه للتو استفادةً كبيرةً من ميزات React، لذلك نحتاج إلى استخدام الخاصيات Props. خاصيات المكون الخاصية هي البيانات الممرَّرة إلى مكوِّن React، كما تشبه الخاصيات إلى حد ما سمات HTML، ولكن تمتلك عناصر HTML سمات وتمتلك مكونات React خاصيات، إذ تُكتَب الخاصيات ضمن استدعاءات المكوِّن، وتستخدِم الصيغة نفسها التي تستخدمها سمات HTML وهي prop="value"‎، كما يكون تدفّق البيانات أحادي الاتجاه في React، إذ يمكن تمرير الخاصيات من المكوّنات الآباء إلى المكوّنات الأبناء فقط، وتكون الخاصيات للقراءة فقط، فلنفتح الملف index.js ونمنح المكوّن <App/‎> استدعاءه الأول، ثم أضف الخاصية subject إلى استدعاء المكوِّن <App/‎> مع القيمة Clarice، إذ يجب أن تبدو شيفرتك البرمجية كما يلي: ReactDOM.render(<App subject="Clarice" />, document.getElementById('root')); لنفتح الملف App.js ولننتقل إلى الدالة App()‎ التي يجب أن تكون كما يلي مع اختصار تعليمة return للإيجاز: function App() { const subject = "React"; return ( // ‫تعليمة return ); } عدّل الدالة App بحيث تقبل الخاصيات props على أساس معامِل لها، واحذف الثابت subject، كما يمكنك وضع الخاصيات props في التابع console.log()‎ لطباعتها على طرفية المتصفح كما يلي: function App(props) { console.log(props); return ( // ‫تعليمة return ); } احفظ ملفك وتحقق من طرفية جافاسكربت (نافذة console) في متصفحك، إذ يجب أن ترى شيئًا يشبه ما يلي: Object { subject: "Clarice" } تتوافق خاصية الكائن subject مع الخاصية subject التي أضفناها إلى استدعاء المكون <App /‎>، كما تتوافق سلسلة Clarice النصية مع قيمتها، إذ تُجمَع خاصيات المكوِّن في React دائمًا ضمن كائنات بهذه الطريقة، ولنستخدِم الخاصية subject في الملف App.js، لذا غيّر الثابت subject لقراءة قيمة props.subject بدلًا من تعريفه على أنه سلسلة React، كما يمكنك حذف التابع console.log()‎ إذا أردت ذلك. function App(props) { const subject = props.subject; return ( // تعليمة‫ return ); } يجب أن يعرض التطبيق عبارة "Hello, Clarice!‎" عند الحفظ، فإذا عدت إلى الملف index.js وعدّلت قيمة subject ثم حفظته، فسيتغيّر النص. الخلاصة تعرّفنا في هذا المقال على مكتبة React، بما في ذلك كيفية تثبيتها محليًا، وإنشاء تطبيق بسيط، وكيفية عمل الأساسيات؛ أما في المقال التالي، فسنبدأ بإنشاء أول تطبيق مناسب وهو تطبيق قائمة المهام، لكن لنلخّص بعض الأشياء التي تعلمناها حتى الآن. في React: يمكن للمكونات استيراد الوحدات التي تحتاجها ويجب أن تصدِّر نفسها في الجزء السفلي من ملفاتها. تُسمَّى دوال المكوِّن باستخدام حالة باسكال PascalCase. يمكنك قراءة متغيرات JSX بوضعها بين أقواس معقوصة مثل {so}. تختلف بعض سمات JSX عن سمات HTML بحيث لا تتعارض مع كلمات جافاسكربت المحجوزة، إذ تُترجَم class في لغة HTML إلى className في JSX مثلًا، ولاحظ أنّ السمات متعددة الكلمات تُسمَّى باستخدام حالة الجَمل camel-cased. تُكتَب الخاصيات تمامًا مثل السمات ضمن استدعاءات المكوِّن وتُمرَّر إلى المكوّنات. ترجمة -وبتصرُّف- للمقال Getting started with React. اقرأ أيضًا مدخل إلى React.js - مكتبة تطوير الواجهات الرسومية من فيس بوك مدخل إلى استعمال المكتبة React-Router اختبار تطبيقات React باستعمال Jest ومكتبة React Testing Library المصطلحات المستخدمة في React

تتعرف نواة Kernel نظام التشغيل سواءً كان Mach، أو BSD، أو لينكس Linux، أو NT على كافّة التجهيزات والعتاد المتصلة بالحاسوب عند إقلاعه باستخدام برنامج رئيسي، وتمكّنها من التواصل مع بعضها بعضًا، كما تضمن عملها على نحوٍ متناغم؛ إذ تؤدّي مجموعة التعليمات الرئيسية هذه مجموعةً من المهام، مثل إبقاء الحاسوب في حالة تشغيل وبوضعٍ آمن من خلال تشغيل مراوح التبريد دوريًا لتجنّب زيادة درجة الحرارة مثلًا، إضافةً لاستخدامها أنظمةً فرعيةً مسؤولةً عن مراقبة مساحة القرص الصلب أو التنبّه عند وصل أجهزة جديدة بالحاسوب وغيرها من العمليات. ولكن ليس هذا جلّ ما يفعله الحاسوب، وإلا كانت أهميته مثل أهمية الفرن في المنزل. أدرك علماء الحواسيب مبكرًا أهمية جعل البشر قادرين على التفاعل مع الحاسوب متى أرادوا ذلك، لذا طوروا صدفةً Shell خاصّةً بالحواسيب العاملة على نظام يونكس Unix؛ إذ تعمل هذه الصدفة خارج النواة أو حولها مثل مبدأ الصدفة في الطبيعة، وقد شكّلت هذه الصدفة تطورًا مهمًا في الوقت الذي كان الناس فيه يوجهون الأوامر للحواسيب باستخدام البطاقات المثقبّة، وتعدّ Bash واحدةً من أكثر الصدفات shells شعبيةً وأكثرها فعاليةً وسهولةً. باش Bash هو تطبيق عندما تفتح طرفيةً Terminal تُشغِّل صدفة باش، مثل GNOME Terminal، أو Konsole في نظام لينكس، أو iTerm2 في نظام ماك، أو إس macOS، فسُيرَحب بك غالبًا من خلال محث prompt؛ والذي يكون عادةً رمزًا وهو إشارة ($)، والذي يعني أن الصدفة بانتظارك لإدخال أمر. ولا بُد بالتأكيد من معرفة ما عليك كتابته من أوامر، وهذه الأوامر موضوعٌ مستقلٌ تمامًا كما سنرى. قد يكون التعبير التالي غير لطيف، إلّا أنّه يمثّل بدقة عدّة دلالاتٍ متعلقّة بمصطلح باش؛ إذ لا يميز كثيرٌ من المستخدمين الجدد بين مفهوم باش ومفهوم لينكس أو يونكس؛ فبالنسبة لهم باش هو الشاشة السوداء ذات الكتابة الخضراء التي تُكتب فيها الشيفرة اللازمة لإعطاء الأوامر للحاسوب. هذا المفهوم فيه خلطٌ ما بين صدفة باش والأوامر التي نكتبها داخل الصدفة، ومن المهم فهم أنهما مفهومان مستقلان؛ إذ أنّ باش مجرّد تطبيقٍ مهمته الرئيسية تشغيل التطبيقات الأخرى ضمن نفس النظام (من خلال أوامر). إذًا، يمكنك تعلّم باش في سياق تعلّم نظام التشغيل الذي يعمل عليه، ولكن لا يمكنك استخدامه فعليًا ما لم تتعرف على الأوامر. أوامر نظام لينكس تُخزَّن معظم الأوامر افتراضيًا في مجلدات النظام في الأنظمة المعتمدة على يونكس ولينكس (نظام BSD و macOS) في مساراتٍ، مثل "usr/bin/" و "bin/"، ولا تتعدى معرفة باش بهذه الأوامر لمعرفتك باللغة السنسكريتية، ولكن كما بإمكانك البحث وترجمة أي كلمة من اللغة السنسكريتية، يمكن لـلغة باش البحث عن الأوامر؛ فعند كتابتك لأمرٍ ما يبحث باش ضمن مسارات مجلدات محدّدة في نظامك ليرى ما إذا كان هذا الأمر موجودًا وعندها ينفذّه. تمثّل كلمة Bash بحد ذاتها أحد الأوامر، وهو الأمر الذي ينفّذ افتراضيًا عندما تفتح الطرفية أو عند دخولك إلى محرر نصوص الطرفية Console (وهو جهازٌ حقيقي أو وهمي يستقبل الرسائل والتنبيهات من النواة ويسمح بتسجيل الدخول بوضع المستخدم الوحيد). يمكنك معرفة مكان تخزين أي أمرٍ بما في ذلك الأمر Bash على نظامك باستخدام الأمر which في الطرفية على النحو التالي: $ which bash /usr/bin/bash $ which ls /usr/bin/ls تُبنى بعض الأوامر داخليًا ضمن باش نفسه، وتكون معظم الأوامر داخلية البناء خاصّةً بالبرمجة النصيّة لباش أو لإعدادات البيئة منخفضة المستوى، إلّا أنّ استخدام بعضٍ منها مفيدٌ في الوظائف العامّة، مثل الأمر cd الخاص بتغيير مسار المجلدات change directory. لا تظهر الأوامر داخلية البناء عندما تبحث عنها لأنّها غير موجودةٍ في مسار التنفيذ الاعتيادي: $ which bash which: no cd in (/usr/local/bin:/usr/bin:/bin: [...] إلّا أنّ عدم العثور عليها في البحث لا يعني عدم توفرها، فهي مبنيةٌ ضمن باش الذي تشغلِّه أصلًا. تشغيل باش توفّر معظم توزيعات لينكس ويونكس صدفة باش افتراضيًا، نظرًا لكون باش معروفٌ وشعبي جدًا، إضافةً لامتلاكه كثيرًا من الوظائف المريحة التي لا توفرّها الصدفات الأخرى؛ إلّا أنّ بعض الأنظمة توفّر حافظةً أُخرى افتراضيًا؛ ولمعرفة فيما إذا كانت الحافظة لديك من نوع باش، ما عليك سوى استخدام الأمر echo مع متغير variable خاص يُظهر اسم العملية المنفّذة حاليًا: $ echo $0 bash إذا كان باش غير متوفّر لديك ورغبت بتجربته، فمن الممكن تنزيله وتثبيته من مركز إدارة البرمجيات لديك، أو بإمكانك استخدام مدير الحزم Chocolatey إذا كان نظام التشغيل لديك ويندوز Windows؛ أو Homebrew في حال كان نظامك ماك أو إس؛ وفي حال فشل كل الطرق السابقة، فلا بُد من زيارة الصفحة الرئيسية لباش على الإنترنت للحصول على مزيدٍ من المعلومات. العمل في باش واجهة باش متوفرّةٌ في حاسوبك، فهي ليست حكرًا على مديري الخوادم أو المبرمجين، كما أنها قادرةٌ على أن تحل محل سطح مكتبك وتطبيقات تحرير النصوص والرسوميات وغيرها؛ إذ يستخدم الأشخاص باش أكثر من استخدامهم لتطبيقات سطح المكتب. يوجد المئات من التعليمات المتاحة لأنظمة لينكس ويونكس التي ستفاجئك بتنوعها؛ إذ يمكنك مثلًا باستخدام باش اقتصاص وإعادة تعيين حجم صورة دون فتح الصورة ضمن عارضٍ أو محرر صور: $ mogrify -geometry 1600^x800 \ -gravity Center \ -crop 1600x800+0+0 myphoto.jpg يمكنك تشغيل الموسيقى باستخدام أمرٍ، مثل ogg123، أو mpg321؛ أو تحويل الصوت باستخدام الأمر sox؛ أو تعديل وتحرير الفيديوهات باستخدام ffmpeg؛ أو تحرير النصوص باستخدام emacs، أو vim؛ أو التحقق من رسائل البريد الإلكتروني باستخدام pine أو mutt؛ أو تصفّح الإنترنت باستخدام elinks؛ وكذلك تصفّح الملفات باستخدام ranger أو midnightcommander، وغيرها، إذ يوفِّر باش كل هذه الإمكانات باستخدام الأوامر التي ستجدها في نظامك أو في مستودع البرمجيات الخاص بك. برمجة باش النصية أحد أهم أسباب كون باش ونظام لينكس ككل فعّالًا هو كونه قابلًا للبرمجة والتوسع إذ يمكنك كتابة تعليمات جديدة ضمن باش يدويًا، أو من خلال إنشاء قائمةٍ ضمن ملف نصي عادي وسيشغلها باش؛ فبدلًا من قضاء ساعات في كتابة وتنفيذ مئات التعليمات، يمكنك كتابة التعليمات في ملف نصي عادي وترك الأمر لحاسوبك لتنفيذها مرارًا وتكرارًا. ونظرًا لتنفيذ معظم العمليات في لينكس ضمن صدفة باش، فمن الممكن تقريبًا تنفيذ أي أمرٍ في لينكس باستخدام البرمجة النصية (سكربتات) في باش، مع وجود بعض الاستثناءات (فمثلًا قد يكون لدى تطبيقات الرسومات لغة برمجةٍ نصيةٍ خاصّةٍ بها، أو قد لا تمتلك لغة برمجة نصية أصلًا). سيفتح استخدام البرمجة النصية في نظام التشغيل الخاص أمامك آفاقًا لتنفيذ عشرات آلاف الإجراءات على حاسوبك دون تكبُّد عناء تنفيذ ذلك يدويًا. من غير الممكن إذًا تخمين التوفير في كمية العمل الذي يقدمه لينكس لمستخدميه؛ إذ أن هذا التوفير الكبير لا يأتي من فكرة أتمتة الأعمال التقليدية، وإنمّا من أتمتة أعمال لم يعتقد أحد سابقًا أنها بحاجة للأتمتة، مثل إمكانية إنشاء منهجية عمل مفصّلة خاصّة بك. عندما يقول المستخدمون المتمرسّون أنّهم يريدون تعلّم باش دون تعلّم أوامر لينكس، فهم يقصدون غالبًا أنّهم يريدون تحسين طريقة كتابة الأوامر. ينقل النص البرمجي التالي مثلًا ملفًا مؤقتًا (وهو ملف مُنشأ بعملية أخرى منفصلة) إلى مسار محدّد: #!/usr/bin/bash cp tmp.png ~/public_html/`date +%Y%m%d`.png يمكنك التحقّق من هذا الأمر من خلال نسخ السطر الأخير (الأمر الذي يبدأ بـ cp) إلى طرفية، حيث سيعمل هذا الأمر في حال وجود ملفٍ يُدعى tmp.png ومسار مجلد يُدعى ‎~/public_html. إذًا، يعتمد تعلُّم باش على فهم كيفية تحويل أمرٍ بسيط كهذا إلى عملية أتمتة فعلية؛ فلن يعمل النص البرمجي مثلًا في حال عدم توفّر الملف "tmp.png"؛ وعلى فرض أنّ هذا النص البرمجي مكوّنٌ أساسيٌ لمدونةٍ تتطلب صورةً جديدةً يوميًا لإنشاء صورة ترويسة مخصّصة، ففي هذه الحالة سيكون عدم تنفيذ النص البرمجي ذا تأثيرٍ كارثي على كل أجزاء المدونة. يستطيع المُستخدم الذي يعرف باش إضفاء المرونة على نصه البرمجي باستخدام بناء التعليمات في باش. #!/usr/bin/bash IMG="tmp.png" [[ -e tmp.png ]] || IMG="generic.png" cp ~/"${IMG}" ~/public_html/`date +%Y%m%d`.png يُعَد هذا مجرّد مثالٍ وحيد لعملية تعلّم كتابة النصوص البرمجية في باش، إلّا أنّه يوضّح حقيقة كون تعلّم كل من باش ولينكس مفيدًا بنفس الدرجة، وهي عملية متكاملة ولا يمكن عدُّ كلٍ منهما مهمّةً مستقلة. نقاط قوة باش تُعَد باش صدفةً فعّالةً مثل غيرها، إلّا أنها تمتاز بوجود عدة دوالٍ مريحة، مثل استخدام الأقواس المزدوجة ([[ و]]) في الترميز البرمجي، وهذه التفاصيل الخاصّة بـها هي المفضّلة لدى مستخدميها، لأنّهم يتجنبون بناء الجمل الطويل المُربك كما في الصدفات الأُخرى، مثل tcsh أو ash؛ إلّا أنّ هذه التعليمات الخاصّة بباش قد تسبّب مشاكل في التوافق عند استخدامها على الأنظمة التي لا تستخدمه، ولكن بما أنّ باش مجاني ومفتوح المصدر، فبإمكان أي مستخدمٍ تثبيته عند الحاجة لاستخدامه، وتفرض مشكلة عدم التوافق هذه فقط اعتمادًا إضافيًا على باش دون منع أي أحدٍ من استخدام البرمجة النصية. ترجمة -وبتصرف- للمقال What is Bash?‎ من موقع opensource.com. اقرأ أيضًا إذا أردت تعلّم باش يمكنك الاطلاع على توثيقها التفصيلي في موسوعة حسوب، كما ننصحك بالإطلاع على المقالات التالية: ما هو سطر الأوامر؟ دليل ميَسَّر لكتابة سكربتات Shell سلسلة مدخل إلى كتابة سكربتات الصدفة كيفية استعمال ميزة التحكم بالوظيفة (Bash's Job Control) لإدارة عمليات الخلفية وعمليات المقدمة في لينكس