نحوه ادغام قالب بوت استرپ با برنامه React

قدرت طرح‌های تمیز Bootstrap را در چند مرحله آسان به پروژه React خود اضافه کنید.

ایجاد یک رابط front-end می تواند چالش برانگیز باشد اگر شما تازه وارد ReactJS هستید. فریم ورک بوت استرپ، در کنار قالب هایش، آن را آسان تر و سریع تر می کند.

بوت استرپ دارای قالب هایی با مضمون است که هر کسی می تواند آن ها را سفارشی کرده و به صورت رایگان منتشر کند. قبل از دانلود و استفاده از آنها در برنامه خود می توانید از بین بسیاری از الگوها انتخاب کنید.

الگوها به شما کمک می کنند تا به سرعت رابط های ظاهری قابل توجهی ایجاد کنید و زمان بیشتری را برای تمرکز بر روی ویژگی های پیچیده باقی بگذارید. می‌توانید با ادغام قالب‌های Bootstrap با یک برنامه ReactJS، درباره قالب‌های Bootstrap اطلاعات کسب کنید.

برنامه React خود را ایجاد کنید

با ایجاد یک برنامه ReactJS در یک پوشه در دستگاه خود شروع کنید. از طرف دیگر، می‌توانید از راهنمای رسمی React برای ایجاد یک برنامه جدید پیروی کنید.

یک قالب بوت استرپ را دانلود کنید

یک الگوی انتخابی خود را از وب سایت Start Bootstrap themes یا یکی دیگر از موارد دلخواه خود دانلود کنید. چندین سایت با قالب های بوت استرپ رایگان به صورت آنلاین وجود دارد.

برای این راهنما، تم بوت استرپ با نام آژانس را دانلود کنید.

پس از دانلود، فایل پوشه را از حالت فشرده خارج کنید تا محتویات آن را ببینید. متوجه خواهید شد که پوشه هایی با نام assets، CSS، JS و فایلی به نام index.html دارید.

قالب بوت استرپ را به برنامه ReactJS اضافه کنید

در مرحله بعد، محتویات پوشه دانلود شده را در پوشه ای به نام public در React App خود کپی کنید. متوجه خواهید شد که اکنون دو فایل index.html دارید. محتویات فایل Bootstrap index.html را در فایل index.html React App کپی کنید.

نمایش قالب بوت استرپ

پس از افزودن Bootstrap HTML به index.html برنامه، برنامه را اجرا کنید تا ببینید آیا ادغام موفقیت آمیز بوده است یا خیر. از دستور زیر استفاده کنید:

npm start

همانطور که تصویر زیر نشان می دهد باید الگو را در مرورگر خود مشاهده کنید.

مطلب مرتبط: درک صفات و طول عمر رست

تم بوت استرپ را در اجزای برنامه ادغام کنید

برای ادغام قالب Bootstrap در React App، باید بخش‌های HTML را از index.html در هر مؤلفه کپی کنید. کامپوننت ها به شما امکان می دهند برای قسمت های مختلف برنامه کد بنویسید و دوباره از آنها استفاده کنید. این کار باعث کاهش تکرار و همچنین سازماندهی ساختار برنامه شما می شود.

فایل index.html اکنون دارای بخش های مختلف ناوبری، درباره ما، تماس و پاورقی است. در پوشه src دو پوشه، کامپوننت و صفحه ایجاد کنید. بخش ها را به پوشه های زیر تقسیم کنید:

اجزاء باید شامل موارد زیر باشد:

Header.jsx: بخش سرصفحه.
Navigation.jsx: نوار ناوبری و پاورقی.

پوشه صفحات دارای موارد زیر خواهد بود:

AboutUs.jsx: اطلاعات درباره ما.
Home.jsx: بخش های خدمات، نمونه کارها، مشتریان و تیم.
Contacts.jsx: اطلاعات تماس.

HTML هر بخش را از فایل index.html کپی کرده و به هر جزء اضافه کنید. نحو باید به این صورت باشد:

import React from 'react'

const Header = () => {
    return (
      <div>
        <header className="masthead">
          <div className="container">
            <div className="masthead-subheading">Welcome To Our Studio!</div>

            <div className="masthead-heading text-uppercase">
              It's Nice To Meet You
            </div>

            <a className="btn btn-primary btn-xl text-uppercase" href="#services">
              Tell Me More
            </a>
          </div>
        </header>
      </div>
    );
};

export default Header

سپس، سینتکس HTML موجود در کامپوننت ها را به JSX تغییر دهید. برای انجام خودکار این کار در ویرایشگر Vscode، کلیدهای Ctrl + Shift + P را بزنید. در پنجره باز شده روی گزینه HTML to JSX کلیک کنید تا HTML را به JSX تغییر دهید.

JSX یک پسوند نحوی برای جاوا اسکریپت است. به شما امکان می دهد از ترکیبی از HTML و جاوا اسکریپت برای نوشتن کد در کامپوننت ها استفاده کنید. پس از کپی کردن تمام بخش‌ها در مؤلفه‌ها، فایل index.html تنها با پیوندها و اسکریپت‌های سبک باقی می‌ماند.

مطلب مرتبط: آشنایی با روش‌های رندر Next.js: CSR، SSR، SSG، ISR

به این صورت خواهد بود:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"/>
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />

    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>

    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" />

    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="%PUBLIC_URL%/css/styles.css" rel="stylesheet" />
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root"></div>

    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Core theme JS-->
    <script src="%PUBLIC_URL%/js/scripts.js"></script>

    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->

    <!-- * * SB Forms JS * *-->

    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->

    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->

    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>

</html>

ایجاد مسیرها برای کامپوننت ها

اکنون که پیوندها، اسکریپت ها و مؤلفه ها را در برنامه دارید، باید مسیرهایی را برای آنها در فایل App.js ایجاد کنید. مسیرها صفحات روی برنامه را نمایش می دهند تا آن را پویا کنند.

مطلب مرتبط: 7 بهترین روش امنیتی API که باید در نظر بگیرید

برای رندر کردن صفحات، react-router-dom را با دستور زیر نصب کنید:

npm install react-router-dom

در فایل App.js، BrowserRouter را به عنوان روتر، Routes و Route را از کتابخانه react-router-dom وارد کنید. سپس تمام اجزا و صفحات را وارد کنید. فایل باید به این شکل باشد:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from './components/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact'
import Header from "./components/Header";

function App() {
    return (
      <div className="App">
        <Header />
        <Home />
        <About />
        <Contact/>

        <Router>
          <Navigation>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/contact" element={<Contact />} />
            </Routes>
          </Navigation>
        </Router>
      </div>
    );
}

export default App;

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

تبریک می‌گوییم، شما با موفقیت یک تم Bootstrap را در برنامه React خود ادغام کردید. اکنون می توانید صفحات را به دلخواه خود سفارشی کنید.

چرا از قالب های تم Bootstrap استفاده کنیم؟

قالب های بوت استرپ به ایجاد رابط های جلویی قابل توجه در مدت زمان بسیار کوتاه کمک می کنند. تم های زیادی برای انتخاب وجود دارد. تمام تم ها از آخرین نسخه بوت استرپ هستند. آنها همچنین دارای مجوز MIT هستند و جدیدترین طرح های صنعت هستند.

در حالی که مزایا بسیار زیاد است، تکیه بر الگوها خلاقیت را کاهش می دهد. یافتن یک تم محبوب که در سایت های دیگر به صورت آنلاین استفاده می شود، معمول است. با این حال، شما می توانید یک قالب را به یک طراحی منحصر به فرد سفارشی کنید.

اکنون می توانید یک قالب بوت استرپ را با برنامه React خود ادغام کنید. ساختن را با قالب های بوت استرپ شروع کنید و از رابط های جلویی زیبا لذت ببرید.

Tags: اچ تی ام ال برنامه نويسی توسعه وب سی اس اس واکنش نشان دهند