4 طرق لتثبيت Bootstrap في React لإنشاء تطبيق أكثر تفصيلاً
يُعد React من بين أكثر مكتبات وإطارات عمل JavaScript شيوعًا لبناء تطبيقات ذات صفحة واحدة وواجهات مستخدم. إن مرونتها في بناء واجهات المستخدم باستخدام مكوناتها القابلة لإعادة الاستخدام وسرعة التطوير والمجتمع الداعم هي أسباب لشعبيتها.
ومع ذلك ، يجب دمج React مع Cascading Style Sheets (CSS) لجعل تطبيقاتها أكثر جاذبية من الناحية المرئية ورائعة. قد تستغرق كتابة CSS من البداية وقتًا طويلاً.
قد يقضي المطورون الكثير من الوقت في العمل على التصميم بدلاً من الوظائف الأساسية لتطبيق React. الخبر السار هو أن الأدوات والأطر مثل Bootstrap تجعل إضافة CSS إلى تطبيق React الخاص بك أسهل.
ما هو Bootstrap؟
Bootstrap هو إطار عمل CSS مفتوح المصدر لتطوير الواجهة الأمامية. يسمح Bootstrap للمطورين بإنشاء مواقع ويب سريعة الاستجابة ومحمولة أولاً من خلال مجموعته الشاملة من أدوات وقوالب جافا سكريبت و CSS للتصميم.
تم إنشاء Bootstrap بواسطة Twitter ويتم صيانته أيضًا بواسطة فريق من المهندسين من نفس الشركة. يتم الاحتفاظ بالشفرة المصدرية الخاصة بها على GitHub ، ويمكن لأعضاء المجتمع المساهمة وإرسال تقارير الأخطاء والاقتراحات. يعد Bootstrap 5.3.0-alpha1 أحدث إصدار حتى وقت كتابة هذا التقرير.
لماذا استخدام Bootstrap مع React؟
- يوفر الوقت: يعتني Bootstrap بالتنسيق ، مما يمنحك مزيدًا من الوقت للتركيز على الوظائف. وبالتالي ، لا داعي للقلق بشأن مشكلات مثل ظهور النماذج أو الأزرار الخاصة بك ولكن بشأن مناطق مثل ما إذا كان زر الإرسال يرسل البيانات إلى الواجهة الخلفية أو واجهة برمجة التطبيقات.
- سهولة الاستخدام: بمجرد إضافة Bootstrap إلى تطبيق React ، ما عليك سوى أخذ مكونات واجهة المستخدم المصممة مسبقًا وإضافتها إلى تطبيقك.
- تصميم متسق: يزداد حجم معظم التطبيقات بمرور الوقت. يعد ضمان تصميم ثابت لموقع الويب الخاص بك أمرًا مهمًا إذا كنت ترغب في جذب المستخدمين المخلصين. يتميز Bootstrap بأسلوب ثابت يمنح صفحاتك مظهرًا موحدًا.
- عدد كبير من القوالب للاختيار من بينها: يحتوي Bootstrap على مئات القوالب التي تتراوح من أشرطة التنقل والأزرار والنماذج والدوارات إلى القوائم المنسدلة ، على سبيل المثال لا الحصر ، للاختيار من بينها.
- سهولة التخصيص: على الرغم من أن Bootstrap يحتوي على قوالب تصميم ، يمكنك دائمًا تخصيص حجم الخط واللون والميزات الأخرى لتناسب احتياجاتك.
- دعم المجتمع: يحتوي Bootstrap على وثائق شاملة لمساعدتك على البدء. ومع ذلك ، لا يزال بإمكانك الاعتماد على المجتمع الكبير ، وإضافة ميزات جديدة دائمًا والحفاظ على إطار عمل CSS هذا.
- تصميم سريع الاستجابة: بمجرد إضافة Bootstrap إلى تطبيق React الخاص بك ، فأنت متأكد من أن تطبيق الويب الخاص بك سيستجيب لجميع أحجام الشاشة.
كيفية تثبيت Bootstrap في React
لا يأتي تطبيق React مثبتًا عليه Bootstrap افتراضيًا. ولكن قبل أن نستكشف كيفية إضافة / تثبيت Bootstrap في React ، نحتاج إلى التحقق من بعض الأشياء ؛
المتطلبات الأساسية
استخدم هذا الأمر للتحقق مما إذا كان node.js مثبتًا على جهاز الكمبيوتر الخاص بك:
node -v
إذا تم تثبيت node.js ، فسيكون لديك إخراج مشابه لهذا على جهازك الطرفي.
إصدار العقدة
إذا لم يتم تثبيته ، يمكنك التحقق من تعليمات التنزيل من https://nodejs.org/ar/.
استخدم هذا الأمر للتحقق مما إذا كان React مثبتًا على جهاز الكمبيوتر الخاص بك:
npm list react
إذا تم تثبيت React عالميًا على جهازك ، فسيكون لديك شيء مثل هذا على جهازك الطرفي.
رد الفعل الإصدار
- قم بتثبيت تطبيق React-create-app على جهازك. باستخدام هذا الأمر
npm install -g create-react-app
- أنشئ تطبيق React باستخدام هذا الأمر
npx create-react-app my-app
يمكنك استبدال تطبيقي بأي اسم من اختيارك. بالنسبة لحالتنا ، أطلقنا على تطبيقنا رد فعل ب.
بمجرد التثبيت ، سيكون لديك شيء مشابه على جهازك الطرفي:
قم بتشغيل هذه الأوامر للبدء
- cd reaction-b (استخدم اسم التطبيق الذي اخترته في الخطوة السابقة)
- npm start (يبدأ هذا الأمر تطبيق React الخاص بك)
يمكننا الآن الانتقال إلى الخطوات التالية وإضافة / تثبيت Bootstrap إلى تطبيق React الخاص بنا:
NPM تثبيت طريقة Bootstrap
يأتي Node.js مع npm (مدير حزمة العقدة) مثبتًا بشكل افتراضي.
يمكنك التحقق من إصدار npm الخاص بك من خلال هذا الأمر:
npm -v
إذا تم تثبيت npm ، فستحصل على مخرج مثل 9.2.0
يمكنك الآن تثبيت bootstrap باستخدام هذا الأمر:
npm install bootstrap
بمجرد الانتهاء ، انتقل إلى ملف ./src/index.js. أضف هذا الخط في الأعلى.
استيراد “bootstrap / dist / css / bootstrap.css” ؛
باستخدام مدير حزمة الغزل
على عكس npm ، لا يتم تثبيت الغزل افتراضيًا عند تثبيت node.js.
تثبيت ساحة باستخدام هذا الأمر ؛
npm install -g yarn
سيقوم هذا الأمر بتثبيت الغزل على مستوى العالم ، لذلك لم تعد مضطرًا إلى تثبيت الحزمة في كل مرة تنشئ فيها تطبيق React.
قم بتشغيل هذا الأمر لإضافة bootstrap إلى React:
yarn add bootstrap
بمجرد الانتهاء ، انتقل إلى ملف ./src/index.js. أضف هذا الخط في الأعلى.
استيراد “bootstrap / dist / css / bootstrap.css” ؛
يجب عليك دائمًا استيراد Bootstrap أعلى ملف إدخال التطبيق الخاص بك قبل ملفات CSS الأخرى. هذا يجعل من السهل تغيير إدخالات Bootstrap إذا كنت بحاجة إلى تغيير القيم الافتراضية للقوالب أثناء إنشاء تطبيق React الخاص بك.
طريقة CDN
باستخدام رابط شبكة توصيل المحتوى (CDN) ، يمكنك إضافة Bootstrap إلى React. بإضافة رابط CDN هذا ، فإنك تقوم بتضمين مكتبة Bootstrap إلى تطبيق React الخاص بك دون تنزيل الملفات واستضافتها في مجلد مشروعك. اتبع هذه الخطوات.
- في المجلد الجذر ، انتقل إلى ملف .public / index.html
- في علامة ، أضف علامة هذه
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- تحتاج إلى إضافة تبعيات JavaScript إلى تطبيقك. انتقل إلى نص ملف index.html وأضف هذه العلامة قبل إغلاق علامة مباشرةً:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
تم تثبيت Bootstrap أخيرًا على تطبيق React الخاص بك.
باستخدام حزمة React Bootstrap
تم تصميم الأساليب التي تناولناها حتى الآن في الأصل لملفات HTML. لفهم هذا بشكل أفضل ، ضع في اعتبارك هذا الرمز المنسدل من Bootstrap:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div>
ما هو الخطأ في الكود؟ يستخدم Bootstrap ، افتراضيًا ، الفئة لتصنيف أقسامه (DIVs). ومع ذلك ، تستخدم React لغة JSX ، التي تستخدم صيغة camelCase. وبالتالي يجب عليك استبدال الفئة بـ className يدويًا.
لجعل هذا الرمز يعمل على React ، يجب أن نستبدل كل “class” بـ “className”. سيكون الرمز النهائي:
<div className="dropdown"> <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul className="dropdown-menu"> <li><a className="dropdown-item" href="#">Action</a></li> <li><a className="dropdown-item" href="#">Another action</a></li> <li><a className="dropdown-item" href="#">Something else here</a></li> </ul> </div>
لحسن الحظ ، لدينا طريقتان أخريان ، رد الفعل والتمهيد وإعادة الاستراب ، حيث لا يلزم التدخل اليدوي.
رد فعل التمهيد
يحتوي React-bootstrap على مكونات React حقيقية مبنية من البداية. المكتبة متوافقة مع Bootstrap core.
اتبع هذه الخطوات لبدء استخدام React-bootstrap:
- قم بتثبيت React-bootstrap باستخدام هذا الأمر:
npm install react-bootstrap bootstrap
- انتقل إلى ملف src / index.js أو App.js وأضف هذا السطر قبل ملفات CSS الأخرى
استيراد “bootstrap / dist / css / bootstrap.min.css” ؛
يتيح لك React-bootstrap استيراد مكون معين بدلاً من المكتبة بأكملها. على سبيل المثال ، إذا كنت بحاجة إلى استيراد زر على أحد مكوناتك ، فيمكنك استيراده على النحو التالي ؛
استيراد {Button} من “رد فعل التمهيد” ؛
رياكتستراب
هذه مكتبة مكونة من React لـ Bootstrap. يعتمد Reactstrap على إطار عمل Bootstrap CSS لأنماطه وموضوعه. تستورد هذه المكتبة فئات Bootstrap المناسبة إلى تطبيق React الخاص بك ، مما يسمح لك بالحصول على تصميم متسق للتطبيق. لا تحتاج أيضًا إلى إضافة ملفات JavaScript في Bootstrap لتشغيل الوظائف.
اتبع هذه الخطوات لإضافة Reactstrap إلى تطبيق React الخاص بك:
- قم بتثبيت Reactstrap من خلال هذا الأمر:
npm install reactstrap react react-dom
- قم باستيراد Bootstrap باستخدام هذه الأوامر:
npm install --save bootstrap
استيراد “bootstrap / dist / css / bootstrap.min.css” ؛ (أضف هذا السطر إلى app.js الخاص بك)
يمكنك أيضًا استخدام خيار رابط CDN لتضمين Bootstrap في تطبيقك. بعد الخطوة الأولى ، انتقل إلى الدليل الجذر وانتقل إلى ملف .public / index.html وأضف هذا السطر إلى علامة
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
يتيح لك Reactstrap استيراد مكون معين بدلاً من المكتبة بأكملها. على سبيل المثال ، إذا كنت بحاجة إلى استيراد زر على أحد مكوناتك ، فيمكنك الاستيراد كـ ؛
استيراد {Button} من “rebstrap” ؛
خاتمة
أعلاه بعض الأساليب التي يمكنك استخدامها لتثبيت Bootstrap على تطبيق React الخاص بك لتصميم تطبيقات الويب الخاصة بك. يعد اختيار نهج التثبيت مسألة تفضيل ، حيث أن الهدف النهائي هو نفسه.
يوفر لك الجمع بين React و Bootstrap ألم الاضطرار إلى تتبع جميع أنماط CSS مع نمو تطبيقك. يصبح تصميم التطبيق الخاص بك سهلاً وفعالاً حيث تحصل على مزيد من الوقت للتركيز على الوظائف.
يمكنك استكشاف بعض الأسباب لاختيار React Native لتطوير تطبيقات الأجهزة المحمولة.
