اضافة bootstrap الى React

كيفية اضافة رياكت Bootstrap

اكتسبت التطبيقات أحادية الصفحة شعبية على مدار السنوات القليلة الماضية ، لذا فقد أدخلت العديد من الأطر الأمامية مثل Angular و React و Vue.js و Ember وما إلى ذلك. ونتيجة لذلك ، فإن jQuery ليس شرطًا ضروريًا لإنشاء تطبيقات الويب. اليوم ، تمتلك React إطار عمل JavaScript الأكثر استخدامًا لبناء تطبيقات الويب ، وأصبح Bootstrap أكثر إطار عمل CSS شيوعًا. لذلك ، من الضروري معرفة الطرق المختلفة التي يمكن من خلالها استخدام Bootstrap في تطبيقات React ، وهو الرئيسي لهذا القسم.

طرق إضافة Bootstrap لـ React

يمكننا إضافة Bootstrap إلى تطبيق React بعدة طرق. فيما يلي الطرق الثلاث الأكثر شيوعًا:

باستخدام Bootstrap CDN
Bootstrap مثل التضمين
رياكت بكج بوت ستراب

الطريقة الاولى باستخدام Bootstrap CDN

إنها أسهل طريقة لإضافة Bootstrap إلى تطبيق React. ليست هناك حاجة لتثبيت أو تنزيل Bootstrap. يمكننا ببساطة وضع <link></link> في قسم <head> من ملف index.html لتطبيق React كما هو موضح في المقتطف التالي.

الكود

إذا كانت هناك حاجة لاستخدام مكونات Bootstrap التي تعتمد على JavaScript / jQuery في تطبيق React ، فنحن بحاجة إلى تضمين jQuery و Popper.js و Bootstrap.js في المستند. أضف عمليات الاستيراد التالية في علامات <script> بالقرب من نهاية علامة الإغلاق </body> الخاصة بملف index.html.

الكود

في المقتطف أعلاه ، استخدمنا الإصدار النحيف من jQuery ، على الرغم من أنه يمكننا أيضًا استخدام الإصدار الكامل. الآن ، تمت إضافة Bootstrap بنجاح في تطبيق React ، ويمكننا استخدام جميع أدوات CSS المساعدة ومكونات واجهة المستخدم المتاحة من Bootstrap في تطبيق React.

الطريقة الثانية Bootstrap مثل التضمين

إذا كنا نستخدم أداة إنشاء أو مجمع وحدة نمطية مثل Webpack ، فإن استيراد Bootstrap كاعتماد هو الخيار المفضل لإضافة Bootstrap إلى تطبيق React. يمكننا تثبيت Bootstrap كاعتماد لتطبيق React. لتثبيت Bootstrap ، قم بتشغيل الأوامر التالية في نافذة المحطة الطرفية.

الكود

npm install bootstrap --save

بمجرد تثبيت Bootstrap ، يمكننا استيراده في ملف إدخال تطبيق React. إذا تم إنشاء مشروع React باستخدام أداة create-react-app ، فافتح ملف src / index.js ، وأضف الكود التالي:

الكود

import 'bootstrap/dist/css/bootstrap.min.css';

الآن ، يمكننا استخدام فئات CSS والأدوات المساعدة في تطبيق React. أيضًا ، إذا أردنا استخدام مكونات JavaScript ، فنحن بحاجة إلى تثبيت حزم jquery و popper.js من npm. لتثبيت الحزم التالية ، قم بتشغيل الأمر التالي في النافذة الطرفية.

الكود

npm install jquery popper.js

بعد ذلك ، انتقل إلى ملف src / index.js وأضف عمليات الاستيراد التالية.

الكود

npm install jquery popper.js

import $ from 'jquery';

import Popper from 'popper.js';

import 'bootstrap/dist/js/bootstrap.bundle.min';

الآن ، يمكننا استخدام مكونات Bootstrap JavaScript في تطبيق React.

الطريقة الثالثة بكج Bootstrap في رياكت

حزمة React Bootstrap هي الطريقة الأكثر شيوعًا لإضافة bootstrap في تطبيق React. هناك العديد من حزم Bootstrap التي أنشأها المجتمع ، والتي تهدف إلى إعادة بناء مكونات Bootstrap كمكونات React. أكثر حزم Bootstrap شيوعًا هي:

رياكت التمهيد: هو إعادة تنفيذ كاملة لمكونات Bootstrap كمكونات React. لا يحتاج إلى أي تبعيات مثل bootstrap.js أو jQuery. إذا تم تثبيت إعداد React و React-Bootstrap ، فلدينا كل ما نحتاجه.

رياكت : هي مكتبة تحتوي على مكونات React Bootstrap 4 التي تفضل التكوين والتحكم. لا يعتمد على jQuery أو Bootstrap JavaScript. ومع ذلك ، هناك حاجة إلى رد الفعل بوبر لتحديد المواقع المتقدمة للمحتوى مثل تلميحات الأدوات ، والقوائم المنسدلة ، والقوائم المنسدلة التي تقلب تلقائيًا.

تثبيت Bootstrap في رياكت

لنقم بإنشاء تطبيق React جديد باستخدام الأمر create-reaction-app كما يلي.

npx create-react-app react-bootstrap-app

بعد إنشاء تطبيق React ، فإن أفضل طريقة لتثبيت Bootstrap هي عبر حزمة npm. لتثبيت Bootstrap ، انتقل إلى مجلد تطبيق React ، وقم بتشغيل الأمر التالي.

npm install react-bootstrap bootstrap --save

يمكننا أيضًا استيراد مكونات فردية مثل import {SplitButton، Dropdown} من "رد فعل التمهيد"؛ بدلا من المكتبة بأكملها. إنه يوفر المكونات المحددة التي نحتاج إلى استخدامها ، ويمكن أن يقلل بشكل كبير من كمية الكود.

import 'bootstrap/dist/css/bootstrap.min.css';

في تطبيق React ، قم بإنشاء ملف جديد باسم ThemeSwitcher.js في دليل src ووضع الكود التالي.

import React, { Component } from 'react';

import { SplitButton, Dropdown } from 'react-bootstrap';

class ThemeSwitcher extends Component {

state = { theme: null }

chooseTheme = (theme, evt) => {

evt.preventDefault();

if (theme.toLowerCase() === 'reset') { theme = null }

this.setState({ theme });

}

render() {

const { theme } = this.state;

const themeClass = theme ? theme.toLowerCase() : 'default';

const parentContainerStyles = {

position: 'absolute',

height: '100%',

width: '100%',

display: 'table'

};

const subContainerStyles = {

position: 'relative',

height: '100%',

width: '100%',

display: 'table-cell',

};

return (

<span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span>

<Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item>

<Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item>

<Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item>

<Dropdown.Item divider />

<Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item>

</SplitButton>

</div>

);

}

export default ThemeSwitcher;

استيراد Bootstrap

الآن ، افتح ملف src / index.js وأضف الكود التالي لاستيراد ملف Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.js';

import './index.css';

import ThemeSwitcher from './ThemeSwitcher';

ReactDOM.render(<ThemeSwitcher />, document.getElementById('root'));

Output

عندما ننفذ تطبيق React ، يجب أن نحصل على الإخراج على النحو التالي.

انقر على القائمة المنسدلة. سوف نحصل على الشاشة التالية.

الآن ، إذا اخترنا موضوع النجاح ، فسنحصل على الشاشة أدناه.

تعلم لغة رياكت تعلم React تمارين react