كيف يمكن تثبيت وإعداد بوتستراب في تطبيق React

بالطبع يمكنك ذلك، ويتم تثبيته وإعداده بخطوات بسيطة. في الحقيقة، يوجد ثلاث طرق لعمل ذلك نلخصها في التالي:

1. التثبيت والإستعمال عن طريق CDN خارجي.
2. تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm.
3. إستعمال واحدة من حزم React Bootstrap.

الطريقة الأولى: التثبيت والإستعمال عن طريق CDN خارجي

ولعلها أسهل طريقة، أين يمكن مباشرة تضمين ملفات التنسيقات والجافاسكربت وإرفاقها بروابط صالحة، فملفات التنسيقات تضمن في وسم head كالتالي:

<link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]">

ويتم تضمين ملفات الجافاسكربت لها كالتالي:

<!-- تضمين ملف جيكويري -->
<script src="[JQUERY_CDN_LINK_HERE]"></script>
    
<!-- popper تضمين ملف  -->
<script src="[POPPERJS_CDN_LINK_HERE]"></script>
    
<!-- bootstrap تضمين ملف  -->
<script src="[BOOTSTRAP_JS_HERE]"></script>

الطريقة الثانية: تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm

أين ستحتاج في هذا تثبيت حزمة bootstrap عن طريق مدير الحزم npm كالتالي:

npm install bootstrap

ثم تضمين ملفات تنسيقات بوتستراب وأيضا jQuery و popper في ملف index.js كالتالي:

import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

import React from 'react';

ان لم تكن قد قمت بتثبيت jquery و popper فتأكد من ذلك أولا عن طريق طباعة الأمر:

npm install jquery popper.js

لأن بوتستراب يستعمل كلا منهما.

الطريقة الثالثة: إستعمال واحدة من حزم React Bootstrap

لعل الأكثر شيوعا من بين هاته الحزم هي حزمة react-bootstrap، يتم تثبيتها عن طريق طباعة الأمر:

npm install react-bootstrap bootstrap@5.1.3

ثم بتضمين المكون المستهدف لإستعماله:

import { Button } from 'react-bootstrap';

الإستعمال:

<Button variant="primary">زر بوتستراب</Button>