مقدمة
اليوم، أصبحت أطر عمل ومكتبات الواجهة الأمامية جزءًا أساسيًا من تطوير الويب الحديث. React.js هي مكتبة واجهة أمامية أصبحت تدريجيًا الإطار المفضل لتطوير الويب الحديث في مجتمع JavaScript.
ما هو React.js؟
React.js هي مكتبة جافا سكريبت مفتوحة المصدر، صممتها فيسبوك بعناية فائقة، وتهدف إلى تبسيط عملية بناء واجهات المستخدم التفاعلية المعقدة. تخيل واجهة المستخدم المبنية باستخدام React كمجموعة من المكونات، كل منها مسؤول عن إخراج جزء صغير قابل لإعادة الاستخدام من شيفرة HTML.
في React، تُطوّر تطبيقاتك بإنشاء مكونات قابلة لإعادة الاستخدام، والتي يُمكن اعتبارها كتل ليغو مستقلة. هذه المكونات هي أجزاء مُنفصلة من واجهة نهائية، وعند تجميعها، تُشكّل واجهة المستخدم الكاملة لتطبيقك.
يتمثل الدور الرئيسي لـ React في أي تطبيق في إدارة طبقة العرض من خلال توفير أفضل وأكثر تنفيذات العرض كفاءة، تمامًا مثل حرف V في نمط Model-View-Controller (MVC). بدلًا من معالجة واجهة المستخدم بأكملها كوحدة واحدة، يُشجع React.js المطورين على تقسيم واجهات المستخدم المعقدة هذه إلى مكونات فردية قابلة لإعادة الاستخدام تُشكل اللبنات الأساسية لواجهة المستخدم بأكملها. وبذلك، يجمع إطار عمل ReactJS بين سرعة وكفاءة JavaScript وطريقة أكثر فعالية للتعامل مع DOM لعرض صفحات الويب بشكل أسرع وإنشاء تطبيقات ويب ديناميكية وسريعة الاستجابة.
نبذة مختصرة عن React.js
في عام ٢٠١١، كان لدى فيسبوك قاعدة مستخدمين كبيرة، وواجه مهمةً صعبة. أراد توفير تجربة استخدام أغنى لمستخدميه من خلال إنشاء واجهة أكثر ديناميكية واستجابةً، وأسرع وأكثر كفاءة.
جوردان ووك، مهندس برمجيات في فيسبوك، ابتكر React لتحقيق ذلك. وقد بسّط React عملية التطوير بتوفير طريقة أكثر تنظيمًا وهيكلية لإنشاء واجهات مستخدم ديناميكية وتفاعلية بمكونات قابلة لإعادة الاستخدام.
كان موجز أخبار فيسبوك أول من استخدمه. بفضل نهجه الثوري في التعامل مع DOM وواجهات المستخدم، غيّر React جذريًا نهج فيسبوك في تطوير الويب، وسرعان ما اكتسب شعبيةً في بيئة JavaScript بعد إصداره لمجتمع المصادر المفتوحة.
ماذا يفعل React.js؟
عادةً، تطلب صفحة ويب بكتابة عنوانها في متصفحك. يرسل المتصفح طلبًا لهذه الصفحة، التي يخدمها. عند النقر على رابط فيها للانتقال إلى صفحة أخرى، يُرسل طلب جديد إلى الخادم للحصول على تلك الصفحة الجديدة.
يستمر نمط التحميل المتكرر بين متصفحك (العميل) والخادم مع كل صفحة أو مورد جديد تحاول الوصول إليه على موقع ويب. هذا النهج النموذجي لتحميل المواقع الإلكترونية يعمل بشكل جيد، ولكن تخيل موقعًا إلكترونيًا كثيف البيانات. إعادة تحميل صفحة الويب بالكامل ذهابًا وإيابًا ستكون زائدة عن الحاجة وستؤدي إلى تجربة مستخدم سيئة.
علاوة على ذلك، عند تغيير البيانات في تطبيق جافا سكريبت تقليدي، يتطلب الأمر معالجة يدوية لنموذج DOM ليعكس هذه التغييرات. يجب تحديد البيانات التي تغيّرت وتحديث نموذج DOM ليعكسها، مما يؤدي إلى إعادة تحميل الصفحة.
يتبع React نهجًا مختلفًا، إذ يتيح لك بناء ما يُعرف بتطبيق الصفحة الواحدة (SPA). يُحمّل تطبيق الصفحة الواحدة مستند HTML واحدًا عند الطلب الأول، ثم يُحدّث القسم أو المحتوى أو نص صفحة الويب المطلوب باستخدام JavaScript.
يُعرف هذا النمط بالتوجيه من جانب العميل، إذ لا يضطر العميل لإعادة تحميل صفحة الويب كاملةً في كل مرة يُجري فيها المستخدم طلبًا جديدًا للوصول إلى صفحة جديدة. بل يُجزّئ React الطلب ويجلب فقط الأجزاء التي تحتاج إلى تغيير، مُجريًا التغييرات دون الحاجة إلى إعادة تحميل الصفحة كاملةً. يُؤدي هذا النهج إلى أداء أفضل وتجربة مستخدم أكثر ديناميكية.
يعتمد React على DOM افتراضي، وهو نسخة من DOM الحقيقي. يُعاد تحميل DOM الافتراضي لـ React فورًا ليعكس التغيير الجديد عند حدوث تغيير في حالة البيانات. ثم يقارن React DOM الافتراضي بـ DOM الحقيقي لتحديد ما تغير بالضبط.
ثم يجد React الطريقة الأقل تكلفةً لتصحيح DOM الفعلي بهذا التحديث دون الحاجة إلى عرضه. ونتيجةً لذلك، تعكس مكونات React وواجهات المستخدم التغييرات بسرعة، إذ لا يتعين عليك إعادة تحميل الصفحة بالكامل في كل مرة يتم فيها تحديث شيء ما.
كيفية استخدام React.js
بخلاف أطر عمل أخرى مثل Angular، لا يفرض React قواعد صارمة على قواعد كتابة الشيفرة البرمجية أو تنظيم الملفات. هذا يعني أن المطورين والفرق لديهم حرية تحديد القواعد الأنسب لهم وتطبيق React بالطريقة التي يرونها مناسبة. مع React، يمكنك استخدام React بالقدر الذي تحتاجه بفضل مرونته.
باستخدام React، يمكنك إنشاء زر، أو بعض أجزاء واجهة، أو واجهة مستخدم تطبيقك بالكامل. يمكنك دمجها تدريجيًا في تطبيق موجود مع بعض التفاعل، أو الأفضل من ذلك، استخدامها لبناء تطبيقات React قوية من البداية، حسب احتياجاتك.
دمج React في موقع ويب موجود
إذا كنت ترغب في إضافة تفاعل ديناميكي إلى موقعك الإلكتروني، فإن React خيار ممتاز. من خلال دمج React، يمكنك إنشاء مكونات تفاعلية قابلة لإعادة الاستخدام، ويمكن وضعها في أي مكان على موقعك، مثل الأشرطة الجانبية أو عناصر واجهة المستخدم. إليك شرح مبسط لخطوات تحقيق ذلك.
الخطوة 1: إضافة نصوص CDN إلى HTML
- ابدأ بإضافة واجهة برمجة التطبيقات الخاصة بمكتبة React الأساسية من شبكة CDN إلى ملف فهرس HTML الخاص بموقع الويب الخاص بك.
- ثم استورد React DOM من شبكة CDN. هذا ضروري لعرض المكونات على نموذج كائن المستند (DOM).
- بعد ذلك، أضف Babel من شبكة CDN، التي تترجم شيفرة React لضمان التوافق بين المتصفحات. لا تنسَ أيضًا تحميل ملف مكون React.
الخطوة الأولى هي إضافة نصين برمجيين رئيسيين لشبكة توصيل المحتوى (CDN) إلى ملف فهرس HTML لموقعك الإلكتروني. ستحتاج إلى هذين النصين لتحميل React في تطبيقك عبر خدمة شبكة توصيل المحتوى (CDN).
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src='https://unpkg.com/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
الخطوة 2: حدد موقع العرض على موقع الويب الخاص بك
حدد موقع عرض مكون React في HTML. يمكنك القيام بذلك بإضافة عنصر <div> لقد فعل ذلك باستخدام معرف فريد، والذي سنشير إليه في كود React الخاص بنا.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
الخطوة 3: بناء مكون React
- قم بإنشاء مكون React في هذه الحالة يسمى like_widget.js.
- سيحتوي هذا المكون على وظيفة بسيطة تقوم بإرجاع عبارة JSX التي تعرض الرسالة "Hello World".
- وبمساعدة ReactDOM، نقوم بعد ذلك بتقديم هذا المكون إلى DOM، مستهدفين المعرف الفريد الذي قمنا بتعيينه سابقًا في HTML الخاص بنا.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
إذا قمت بتشغيل البرنامج، فسوف يعرض "Hello World" للمتصفح في المكان المحدد الذي حددته في الصورة أدناه.
ربما لاحظتَ بنيةً لغويةً غريبةً تُسمى JavaScript XML (JSX) تُرجعها دالة ActualWidget. يمكنك استخدام JSX مع React لدمج HTML وJavaScript بسهولة. طوّر فيسبوك JSX كامتدادٍ لبنية لـ JavaScript لتوسيع وظائف HTML بتضمينها مباشرةً في شيفرة JavaScript. مع JSX، لا حاجة لفصل شيفرة HTML عن شيفرة JS، لأن React يسمح لك بكتابة HTML تصريحي مباشرةً في شيفرة JavaScript.
إنشاء تطبيق React كامل الميزات
بينما يُمكنك بسهولة دمج React في تطبيق ويب موجود لإنشاء أجزاء صغيرة من واجهة، إلا أن استخدام React لبناء تطبيقات ويب كاملة يُعدّ أكثر عملية. مع ذلك، يتطلب React بعض متطلبات تهيئة الأدوات الثقيلة، والتي غالبًا ما تكون مُرهقة ومُملة عند إنشاء تطبيقات React جديدة.
لحسن الحظ، لستَ بحاجة إلى تعلّم إعدادات البناء هذه أو تهيئة أدوات البناء بنفسك. فقد طوّرت فيسبوك أداة سطر أوامر Node تُسمى cre-react-app لمساعدتك على بناء تطبيق React. تُساعدك هذه الحزمة على القيام بذلك فورًا، وتوفر بنيةً متسقةً لتطبيقات React ستتعرّف عليها عند التنقل بين مشاريع React.
إن إنشاء مشروع React جديد أمر بسيط مثل تشغيل الأوامر التالية في محطتك الطرفية:
npx create-react-app my-new-app
cd my-new-app
npm start
أمثلة React.js
فيسبوك
باعتباره نشأة React.js، يُعد فيسبوك مثالاً على براعة هذه المكتبة. يُبسط React ميزات المنصة الفورية، مثل الإعجابات والتعليقات وتحديثات الحالة، مما يضمن تجربة مستخدم سلسة وديناميكية. كما تُسهّل طبيعة React المعيارية واجهة فيسبوك المتطورة باستمرار، وتتكيف مع احتياجات أكثر من 2.8 مليار مستخدم نشط شهريًا.
انستغرام
إنستغرام ويب عبارة عن لوحة من العناصر التفاعلية، جميعها مدعومة بتقنية React.js. كل صورة، مثل عرض القصة والرسالة المباشرة، تُبرز قدرة React على التعامل بسرعة مع تفاعلات المستخدم المعقدة. واجهة المنصة الجميلة وسهلة الاستخدام دليل على مهارة React في توفير تفاعلات عالية الأداء.
نتفليكس
يُظهر Airbnb كيف يُمكن لـ React.js تحويل البيانات المعقدة إلى تجربة مستخدم بديهية. كل إعلان عقاري، وخريطة تفاعلية، وحجز فوري، تُمثل سيمفونية من مكونات React تعمل بتناغم لخلق تجربة مستخدم سلسة، من التصفح إلى الحجز.
