نصب بوتسترپ 5 در ریکت جی اس react.js

نویسنده : توفیق حمزه ئی
تاریخ : 1400/01/06
نصب بوتسترپ 5 در ریکت جی اس react.js

در این مقاله به این میپردازیم به چه شکلی میشه در ریکت(react.js) بیایم و از bootstrap 5 استفاده کنیم. بوتسترپ که یک فریمورک css هستش و برای استایل دهی ازش استفاده میکنیم در نسخه جدیدش از jquery استفاده نمیکنه و به جاش از جاوااسکریپت خودش استفاده میکنه به همین دلیل کارمون خیلی راحت هست برای تنظیم این فریمورک و به  همین صورت بهینه تر هم خواهد بود چون میتونیم از vDOM مربوط به ریکت استفاده کنیم. در این مقاله اول به صورت خیلی ساده میایم و یک اپلیکیشن ساده ریکت رو با CRA ایجاد میکنیم و ستایل های بوتسترپ رو لود کرده و در نهایت از مدال استفاده خواهیم کرد.

نصب ریکت با CRA

در مرحله اول باید یک اپلیکیشن ریکت رو نصب کنیم که ما میایم و از CRA استفاده خواهیم کرد. کافیه دستور زیر رو بزنید:

npx create-react-app react-bootstrap

کافیه برین به پروژه و سرور مربوطه رو راه اندازی کنین.

نصب بوتسترپ

حالا که ریکت رو نصب کردیم کافیه بوتسترپ رو هم نصبش کنیم که این با دستورات زیر به راحتی میتونیم انجام بدیم.

yarn add bootstrap@next node-sass

 الان میتونیم ستایل های بوتسترپ رو لود کنیم. کافیه در فایل index.js بیایم و bootstrap.scss رو به شکل زیر لود کنیم:

import 'bootstrap/scss/bootstrap.scss'

 الان اگه به عنوان مثال بخایم کلاس های btn رو اعمال کنیم میبینیم که به درستی ستایل های bootstrap اعمال میشن: 

<button className="btn btn-primary">test</button>

 استفاده از مدال بوتسترپ

همین جوری که گفتم بوتسترپ علاوه بر اینکه استایل سی اس اس داره از جاوااسکریپتم استفاده میکنه. و مدال هم یکی از کامپوننت های بوتسترپه که از جاوااسکریپت استفاده میکنه. برای اینکار با بیسیک ترین مثال خود داکیومنت بوتسترپ شروع میکنیم. کافیه کدای زیر رو مورد استفاده قرار بدین در هر کامپوننتی باشه فرق نمیکنه:

{/* show btn Modal */}
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

{/* Modal */}
<div className="modal fade" id="exampleModal" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

 این مثال بالا شامل دو بخش هست یکی برای نمایش مدال و دومی برای خود مدال. اما این مثال کار نخواهد کرد و دکمه ای که ایجاد شده برای باز کردن یک مدال با کلیک کردن بر روی اون هیچ اتفاقی نمیوفته و به این دلیله که درسته ما استایل های bootstrap رو لود کردیم ولی هنوز جاوااسکریپت بوتسترپ رو لود نکردیم کافیه توی کامپوننتی که این کد بالا یعنی مدال رو که در بخش template نوشتیم بیایم و در قسمت script کامپوننت مدال رو از بوتسترپ لود کنیم یعنی به این شکلی:

import { Modal } from 'bootstrap'

اما حالا اررور داریم که میگه باید پکیج @popperjs/core رو به شکل زیر نصبش کنیم. 

yarn add @popperjs/core

این پکیج رو خود بوتسترپ بهش نیاز داره و بعد نصب این پکیج خواهیم دید که مدال کار میکنه. ایول:)) اما ما داریم از data-bs استفاده میکنیم و هنوز  از خود دام مجازی یا vDOM استفاده نکردیم که در پایین توضیح خواهیم داد.

استفاده از دام مجازی 

ریکت از دام مجازی استفاده میکنه که در نتیجه اون بیشتر با دیتاها سروکار داریم اما گاهی وقتی لازمه با خود المنت کار کنیم مثلا یک اینپوت رو اگه خواستیم فوکوس کنیم باید بیایم از ref ها استفاده کنیم. اینجا هم به همین صورته. حالا ما دو روش داریم برای استفاده از جاوااسکریپت بوتسترپ یکی data-bs یکی هم خود کلاس های بوتسترپ همین Modal که الان لودش کردیم. در مستندات بوتسترپ گفته به این شکلی هم میشه از مدال استفاده کرد.

var myModal = new Modal(document.getElementById('exampleModal'), options)

 ما میتونیم document.getElementById('exampleModal') با رف(ref) خودمون جایگزین کنیم و اسمش رو میذاریم exampleModal. به یک ستیت(state) هم نیاز داریم برای نمایش و مخفی کردن مدال و به این صورت از هوک های ریکت هم استفاده میکنیم:

const [modal, setModal] = useState(null)
const exampleModal = useRef()

useEffect(() => {
  setModal(
    new Modal(exampleModal.current)
  )
}, [])

با ()modal.show میتونیم مدال رو نمایش بدیم که دکمه نمایش مدال به این صورت خواهد بود. 

 modal.show()} className="btn btn-primary">
  Launch demo modal

 حالا ما اومدیم از دام مجازی(vDOM) برای نمایش مدال استفاده کردیم. ایول :)) کل کامپوننت به این صورت خواهد بود:

import { Modal } from 'bootstrap'
import { useState, useEffect, useRef } from 'react'

function App() {
  const [modal, setModal] = useState(null)
  const exampleModal = useRef()

  useEffect(() => {
    setModal(
      new Modal(exampleModal.current)
    )
  }, [])

  return (
    <>
      {/* show btn Modal */}
      <button type="button" onClick={() => modal.show()} className="btn btn-primary">
        Launch demo modal
      </button>

      {/* Modal */}
      <div className="modal fade" ref={exampleModal} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" className="btn-close" onClick={() => modal.hide()} aria-label="Close"></button>
            </div>
            <div className="modal-body">
              ...
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" onClick={() => modal.hide()}>Close</button>
              <button type="button" className="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;

 در این مقاله اومدیم بعد نصب پروژه ریکت، بوتسترپ رو هم نصبش کردیم و دیدیم به چه شکلی میشه از دام مجازی ریکت هم استفاده کرد. امیدوارم این مقاله کوتاه براتون مفید بوده باشه :)) و این نکات و برای ویو هم در دوره سایت webamooz.net هم پوشش دادم.

شما برای ارسال نظر باید اول وارد سایت شوید