فهم React-Bootstrap وجعله مناسبًا لك
يحتاج كل نوع من التطبيقات إلى تخطيط منطقي، وتصميم مثير للإعجاب وملفت للنظر، وتجربة بديهية وسهلة الاستخدام.
وبدونها، لن يتفاعل الزوار بشكل هادف مع المنتج النهائي. على الرغم من أن إنشاء موقع كهذا يبدو معقدًا، إلا أن الحقيقة هي أنه يمكنك إنشاء مشروع يلبي كل هذه المعايير باستخدام React-Bootstrap.
تعرف على كيفية قيام مكتبة المكونات هذه بتبسيط عملية تطوير الويب للواجهة الأمامية أثناء تصميم موقع الويب الرائع التالي.
نظرة فاحصة على Bootstrap مقابل React
قبل التعمق في كيفية عملها مع صلاحياتها مجتمعة، دعنا نتعرف على الميزات والفوائد الأساسية لـ Bootstrap وReact كمكتبات منفصلة.
ما هو بوتستراب؟
يعد Bootstrap واحدًا من أكثر أطر عمل CSS شيوعًا. إنها مجموعة مفتوحة المصدر من أدوات CSS وHTML وJavaScript التي تساعد المطورين على تقليل وقت البرمجة عند إنشاء مواقع الويب وصفحات الويب.
تم تطوير Bootstrap في الأصل بواسطة Twitter لتصميم الواجهة الأمامية، وقد تم استخدامه على نطاق واسع لإضافة الطباعة والأزرار والأيقونات وأدوات التنقل المتنوعة إلى صفحات الويب منذ إنشائه.
يحب المطورون Bootstrap لأنه سهل الاستخدام، ومرن بشكل لا يصدق، ويمكن الوصول إليه بسهولة، ويأتي مع الكثير من السمات، لذلك لا داعي للقلق كثيرًا بشأن الحصول على التصميم الصحيح.
في الوقت نفسه، يحب المصممون العمل باستخدام Bootstrap لأن السمات المخصصة توفر أساسًا جيدًا للبناء عليه، أو يمكنهم استخدام أي مكونات منطقية لاحتياجات التصميم الخاصة بهم.
يتوافق Bootstrap أيضًا مع مجموعة واسعة من المتصفحات. وهذا يعني أنه يمكن للمطورين أن يثقوا في أن مواقع الويب والتطبيقات ستظهر على النحو المنشود، بغض النظر عن المتصفح المفضل لدى الشخص.
يعد إطار عمل Bootstrap مثاليًا لإنشاء مشاريع الهاتف المحمول أولاً، ويتناسب مع أي نوع جهاز بمختلف الأشكال والأحجام. بالاشتراك مع نظام الشبكة الخاص به، يمكن للمطورين رؤية كيفية محاذاة مكونات الموقع أو الصفحة بالضبط.
سبب آخر يجعل الناس يفضلون Bootstrap هو أنه مجاني.
تتم استضافة هذه المكتبة الواسعة من المكونات وصيانتها على GitHub وهي متاحة للجميع، مما يسهل على المطورين العثور على المكونات التي يحتاجون إليها واستخدامها والانتقال بسرعة إلى المشاريع دون الحاجة إلى كتابة الكثير من التعليمات البرمجية الجديدة.
ما هو رد الفعل؟
React هي مكتبة مبنية على جافا سكريبت، تشبه Bootstrap، وتوصف على نطاق واسع بأنها سهلة الاستخدام ومرنة في العمل معها.
تم تطويره بواسطة فيسبوك لحل مشكلة قابلية التوسع، وقد تم استخدامه داخليًا – بشكل أو بآخر – منذ عام 2011 وأصبح مفتوح المصدر في عام 2013.
ولأنه تم إنشاؤه بواسطة فيسبوك لأغراض فيسبوك، يعد React خيارًا مستقرًا. لن تشهد تغييرات ضخمة وشاملة تزعج المطورين.
على عكس أطر عمل JS الأخرى، لا يخبرك React بما يجب عليك فعله. وبدلاً من ذلك، يمكن للمطورين التعامل مع المكونات وترتيبها كيفما يريدون.
يمكن للمطورين إنشاء واجهات مستخدم تفاعلية باستخدام React بسرعة وسهولة أكبر مما لو كانوا يعتمدون فقط على JavaScript أو مكونات JavaScript الإضافية.
في ندوة عبر الإنترنت لعام 2019، أوضح كوري هاوس، مؤلف Pluralsight، “عندما ظهرت React.
.. ما أدركوه هو JavaScript كان يتمتع بهذه السمعة غير العادلة لكونه بطيئًا لفترة طويلة، في حين أن JavaScript ليست بطيئة في الواقع؛ إنه DOM البطيء.
لذا كانت لدى React هذه الفكرة، “ماذا لو تمكنا من تقليل تغييرات DOM؟” وتقوم React بذلك باستخدام DOM افتراضي خلف الكواليس.
تجعل العملية الأسرع والأكثر انسيابية من React وسيلة فعالة وخالية من المتاعب لتصميم وتنفيذ التغييرات على واجهة المستخدم.
يمكن للمطورين تغيير البيانات وستقوم React بتحديث مكونات محددة وفقًا لذلك.
وكما أشار هاوس في ندوته عبر الإنترنت، فقد تم تصميم React “لتعلمها مرة واحدة وكتابتها في كل مكان”، والتي يتم استخدامها في صفحات الويب وتطبيقات سطح المكتب وتطبيقات الهاتف المحمول والمدونات وما إلى ذلك.
ما هو رد الفعل Bootstrap؟
يأخذ React-Bootstrap إطار عمل CSS الخاص بـ Bootstrap ويستبدل أي JavaScript موجود بمكونات React بدقة. هذا يعني أنك لم تعد بحاجة إلى jQuery أو أي تبعيات أخرى لتغيير عناصر JavaScript.
في الأساس، يؤدي تكامل React-Bootstrap إلى إنشاء تجربة تطوير أكثر سلاسة للواجهة الأمامية من خلال الاستغناء عن الوسيط. يتمتع المطورون بمزيد من التحكم في مظهر ووظيفة المكونات في هذا النموذج.
يحتفظ إطار عمل React-Bootstrap بورقة أنماط Bootstrap في جوهره. ولهذا السبب، فإن React-Bootstrap متوافق مع العديد من سمات Bootstrap الموجودة.
هذه ليست مجرد ميزة لطيفة؛ وبالنظر إلى العدد الهائل من مواقع الويب التي تم إنشاؤها باستخدام Bootstrap، يعد هذا التوافق أمرًا ضروريًا للحفاظ على مظهر متسق عبر موقعك أو تطبيقك.
نظرًا لأن هذه إحدى مكتبات React الأكثر رسوخًا، فقد تطورت تقنيات React وBootstrap معًا لإنشاء نقطة بداية موثوقة وقوية لتطوير واجهة المستخدم وتصميمها.
يتيح الجمع بين الكيانين للمطورين إنشاء مواقع ويب سريعة الاستجابة ومرتكزة على الأجهزة المحمولة أولاً وتلبي توقعات المستخدم من حيث الأداء الوظيفي والتفاعل وسهولة الاستخدام.
متى يجب استخدام React-Bootstrap مقابل Bootstrap وحده؟
يعتمد ما إذا كان يجب عليك استخدام React-Bootstrap أو Bootstrap ببساطة على ما تريده أو تحتاج إليه أو تتوقعه من مشروعك، بالإضافة إلى مدى التدريب العملي الذي تريد أن تكون عليه في إنشائه.
يؤدي استخدام تكامل React-Bootstrap إلى توفير الوقت لأن عناصر JavaScript موجودة بالفعل، ومغلفة بأقواس صغيرة أنيقة على شكل React.
إذا اخترت استخدام Bootstrap كما هو، فيجب أن تكون على دراية جيدة بمكونات JavaScript وJavaScript الإضافية، لأنك ستحتاج إلى العمل مع هذه المكونات بنفسك.
مصطلحات React-Bootstrap الشائعة
هناك بعض الكلمات التي ستراها مرارًا وتكرارًا في مناقشات React-Bootstrap. ولأن هناك دائمًا الكثير لتتعلمه، فلن يضرك أبدًا الحصول على تحديث سريع للمصطلحات التقنية حتى تتمكن من متابعة المحادثة.
مكتبة المكونات
مجموعة من المكونات السحابية التي يمكن لمطوري الويب الوصول إليها وإعادة استخدامها. المكونات هي العناصر المستخدمة لبناء الواجهة الأمامية لموقع الويب، أو الصفحة التي نراها عندما نكون متصلين بالإنترنت.
CDN (شبكة تسليم المحتوى)
تصف Cloudflare شبكة CDN بأنها “مجموعة موزعة جغرافيًا من الخوادم التي تعمل معًا لتوفير توصيل سريع لمحتوى الإنترنت..
. تسمح شبكة CDN بالنقل السريع للأصول اللازمة لتحميل محتوى الإنترنت بما في ذلك صفحات HTML وملفات جافا سكريبت وأوراق الأنماط والصور ومقاطع الفيديو “.
DOM (نموذج كائن المستند)
هذه هي “واجهة برمجة لمستندات الويب”، كما أوضحت موزيلا. بشكل أساسي، هذا هو المكان الذي يمكن للبرامج فيه إجراء تعديلات على بيانات الصفحة، مثل البنية أو النمط.
جافا سكريبت / شبيبة
JavaScript (JS) هي لغة برمجة نصية شائعة ومعروفة تجعل مواقع الويب وتطبيقات الويب تفاعلية.
مسج
مكتبة جافا سكريبت تسمح للمطورين بكتابة جافا سكريبت بسرعة عن طريق تكثيف عدة مهام في سطر واحد من التعليمات البرمجية. غالبًا ما يتم استخدام jQuery في التواصل مع DOM لإجراء تغييرات على عناصر JavaScript.
npm (مدير حزم العقدة)
هذه أداة تُستخدم لتنزيل حزم JavaScript وتثبيتها من الويب. يتم بعد ذلك استخدام مكونات الحزمة لإنشاء موقع الويب الخاص بك أو التطبيق.
كيف أقوم بتثبيت React-Bootstrap؟
يوصي موقع React-Bootstrap بتثبيت React-Bootstrap عن طريق حزمة npm. ومن هناك، يمكنك استيراد المكونات الفردية حسب الحاجة بدلاً من استيراد المكتبة بأكملها.
يؤدي هذا إلى تقليل كمية التعليمات البرمجية التي يتعين عليك أو على أي شخص آخر يعمل في المشروع التعامل معها.
متى يجب على استخدام React-Bootstrap؟
يعد تنوع وعمق المكونات المتاحة أحد أكبر مزايا React-Bootstrap. هذه المكونات هي التي تحول صفحة الويب أو التطبيق من مجرد كونها معلوماتية إلى تجربة تفاعلية.
تحقق من مكونات React-Bootstrap التالية واعرف ما إذا كان بإمكانها العمل في مشروعك التالي.
الأكورديون
يتيح لك تطبيق Accordion وضع الكثير من المعلومات على صفحتك دون إرباك القارئ بكتل ضخمة من النصوص. تكشف كل “طية أكورديون” معلومات عند تحديدها ويمكن تحديدها مرة أخرى لإغلاقها.
مسار التنقل
لا أحد يحب أن يضيع. ليس في الحياة الواقعية، وخاصة عند القيام بشيء بسيط مثل تصفح موقع الويب.
توفر مسارات التنقل طريقة بسيطة وواضحة لإظهار مكان تواجده على موقعك بالضبط للمستخدم، بالإضافة إلى المسار الذي أخذه إلى هناك.
رد فعل التمهيد نافبار
انظر إلى شريط التنقل، الذي ربما يكون الجانب الأكثر أهمية في أي صفحة ويب جيدة. شريط التنقل ليس وظيفيًا فقط؛ يمكن استخدامه كأداة للعلامة التجارية أيضًا.
مع وجود العديد من الخيارات المختلفة لتحديد الموضع والتكوين وطرق الألوان واختيارات القائمة، يمكن لشريط التنقل ضبط نغمة الصفحة.
على الرغم من أنه لا يجب عليك استخدام كل خيار مكون محتمل، إلا أن مشروعك قد يتطلب أكثر مما تدرك. خذ وقتًا لتجربة تخطيطات مختلفة ولاحظ ما يخلق واجهة مستخدم لا تُنسى – وأي التخطيطات يجب ألا تتكرر مرة أخرى.
المصدر: pluralsight
شاهد المزيد:
