بوٹسٹریپ تھیم ٹیمپلیٹ کو ری ایکٹ ایپ کے ساتھ کیسے ضم کریں۔

آپ جیسے قارئین MUO کو سپورٹ کرنے میں مدد کرتے ہیں۔ جب آپ ہماری سائٹ پر لنکس کا استعمال کرتے ہوئے خریداری کرتے ہیں، تو ہم ملحق کمیشن حاصل کر سکتے ہیں۔ مزید پڑھ.

اگر آپ ReactJS میں نئے ہیں تو فرنٹ اینڈ انٹرفیس بنانا مشکل ہو سکتا ہے۔ بوٹسٹریپ فریم ورک، اس کے ٹیمپلیٹس کے ساتھ، اسے آسان اور تیز تر بناتا ہے۔

بوٹسٹریپ میں تھیم والے ٹیمپلیٹس ہیں جنہیں کوئی بھی اپنی مرضی کے مطابق بنا اور مفت میں شائع کر سکتا ہے۔ آپ اپنی ایپ میں ڈاؤن لوڈ اور استعمال کرنے سے پہلے بہت سے ٹیمپلیٹس میں سے انتخاب کر سکتے ہیں۔

ٹیمپلیٹس آپ کو تیزی سے قابل ذکر فرنٹ اینڈ انٹرفیس بنانے میں مدد کرتے ہیں، پیچیدہ خصوصیات پر توجہ مرکوز کرنے کے لیے زیادہ وقت چھوڑتے ہیں۔ آپ بوٹسٹریپ ٹیمپلیٹس کے بارے میں ایک ReactJS ایپ کے ساتھ ضم کر کے جان سکتے ہیں۔

اپنا رد عمل ایپ بنائیں

سے شروع کریں۔ ReactJS ایپ بنانا آپ کی مشین کے فولڈر میں۔ متبادل طور پر، آپ اہلکار کی پیروی کر سکتے ہیں۔ رد عمل کا رہنما ایک نئی ایپ بنانے پر۔

بوٹسٹریپ ٹیمپلیٹ ڈاؤن لوڈ کریں۔

سے اپنی پسند کا ٹیمپلیٹ ڈاؤن لوڈ کریں۔ بوٹسٹریپ شروع کریں۔ تھیمز ویب سائٹ یا آپ کی کوئی اور ترجیح۔ آن لائن مفت بوٹسٹریپ ٹیمپلیٹس والی کئی سائٹیں ہیں۔

اس گائیڈ کے لیے ایجنسی نامی بوٹسٹریپ تھیم ڈاؤن لوڈ کریں۔

ایک بار ڈاؤن لوڈ ہونے کے بعد، فولڈر فائل کو اس کے مواد کو دیکھنے کے لیے ان زپ کریں۔ آپ دیکھیں گے کہ آپ کے پاس اثاثہ جات، CSS، JS، اور index.html نامی ایک فائل ہے۔

ReactJS ایپ میں بوٹسٹریپ ٹیمپلیٹ شامل کریں۔

اگلا، ڈاؤن لوڈ کردہ فولڈر کے مواد کو نام والے فولڈر میں کاپی کریں۔ عوام آپ کی React ایپ میں۔ آپ دیکھیں گے کہ اب آپ کے پاس دو index.html فائلیں ہیں۔ بوٹسٹریپ کے مواد کو کاپی کریں۔ index.html ری ایکٹ ایپ میں فائل کریں۔ index.html فائل

کیا آپ ائیر پوڈز کو اینڈرائیڈ سے جوڑ سکتے ہیں؟

بوٹسٹریپ ٹیمپلیٹ کے ساتھ ری ایکٹ ایپ کا انٹرفیس

بوٹسٹریپ ٹیمپلیٹ ڈسپلے کریں۔

بوٹسٹریپ ایچ ٹی ایم ایل کو ایپ کے index.html میں شامل کرنے کے بعد، یہ دیکھنے کے لیے ایپ چلائیں کہ آیا انضمام کامیاب رہا ہے۔ درج ذیل کمانڈ کا استعمال کریں:

 npm start

آپ کو اپنے براؤزر میں ٹیمپلیٹ دیکھنا چاہیے، جیسا کہ مندرجہ ذیل تصویر واضح کرتی ہے۔

بوٹسٹریپ ٹیمپلیٹ ری ایکٹ ایپ پر ظاہر ہوتا ہے۔

بوٹسٹریپ تھیم کو ایپ کے اجزاء میں ضم کریں۔

بوٹسٹریپ ٹیمپلیٹ کو React ایپ میں ضم کرنے کے لیے، آپ کو index.html سے ہر ایک جزو میں HTML سیکشن کاپی کرنا چاہیے۔ اجزاء آپ کو ایپ کے مختلف حصوں کے لیے کوڈ لکھنے اور انہیں دوبارہ استعمال کرنے کی اجازت دیتے ہیں۔ یہ تکرار کو کم کرتا ہے اور آپ کی ایپ کی ساخت کو بھی منظم کرتا ہے۔

index.html فائل میں اب نیویگیشن، ہمارے بارے میں، رابطہ اور فوٹر کے مختلف حصے ہیں۔ src فولڈر میں، دو فولڈرز، اجزاء اور صفحات بنائیں۔ ذیل میں دکھائے گئے فولڈرز میں حصوں کو تقسیم کریں:

اجزاء میں مندرجہ ذیل شامل ہونا چاہئے:

Header.jsx: ماسٹ ہیڈ سیکشن۔
Navigation.jsx: نیویگیشن بار اور فوٹر۔

صفحات کے فولڈر میں درج ذیل ہوں گے:

AboutUs.jsx: ہمارے بارے میں معلومات۔
Home.jsx: خدمات، پورٹ فولیو، کلائنٹس، اور ٹیم کے حصے۔
Contacts.jsx: رابطہ کی معلومات۔

index.html فائل سے ہر سیکشن کا 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 کو JSX میں تبدیل کرنے کے لیے پاپ اپ ہونے والی ونڈو پر HTML to JSX آپشن پر کلک کریں۔

JSX JavaScript کی ایک نحوی توسیع ہے۔ یہ آپ کو اجزاء میں کوڈ لکھنے کے لیے HTML اور JavaScript کا مرکب استعمال کرنے کی اجازت دیتا ہے۔ ایک بار جب آپ تمام حصوں کو اجزاء میں کاپی کر لیتے ہیں، تو index.html فائل صرف اسٹائلنگ لنکس اور اسکرپٹ کے ساتھ رہ جاتی ہے۔

یہ اس طرح نظر آئے گا:

گوگل ڈرائیو کو منظم کرنے کا بہترین طریقہ

 <!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 فائل میں ان کے لیے راستے بنانے چاہئیں۔ روٹس ایپ کے صفحات کو متحرک بنانے کے لیے رینڈر کریں گے۔

صفحات کو رینڈر کرنے کے لیے، درج ذیل کمانڈ کے ساتھ react-router-dom انسٹال کریں:

 npm install react-router-dom

میں App.js فائل، براؤزر راؤٹر کو بطور روٹر، روٹس، اور روٹ سے درآمد کریں۔ 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;

جب آپ براؤزر پر تشریف لاتے ہیں تو آپ کو مقامی میزبان پر پیش کردہ صفحات کو دیکھنا چاہیے۔ آپ کے ڈاؤن لوڈ کردہ ٹیمپلیٹ سے ملتا جلتا، جیسا کہ ذیل میں دکھایا گیا ہے۔

ایک ویب براؤزر میں مربوط بوٹسٹریپ ٹیمپلیٹ

مبارک ہو، آپ نے کامیابی کے ساتھ بوٹسٹریپ تھیم کو اپنی React ایپ میں ضم کر لیا ہے۔ اب آپ صفحات کو اپنی پسند کے مطابق بنا سکتے ہیں۔

بوٹسٹریپ کے تھیمڈ ٹیمپلیٹس کیوں استعمال کریں؟

بوٹسٹریپ ٹیمپلیٹس بہت کم وقت میں نمایاں فرنٹ اینڈ انٹرفیس بنانے میں مدد کرتے ہیں۔ منتخب کرنے کے لیے بہت سے تھیمز ہیں۔ تمام تھیمز تازہ ترین بوٹسٹریپ ورژن کے ہیں۔ وہ MIT لائسنس کے ساتھ بھی آتے ہیں اور صنعت کے جدید ترین ڈیزائن ہیں۔

اگرچہ فوائد بہت سے ہیں، ٹیمپلیٹس پر انحصار تخلیقی صلاحیتوں کو کم کرتا ہے۔ آن لائن دوسری سائٹوں پر استعمال ہونے والی ایک مشہور تھیم تلاش کرنا عام ہے۔ تاہم، آپ کسی ٹیمپلیٹ کو منفرد ڈیزائن کے مطابق بنا سکتے ہیں۔

اب آپ بوٹسٹریپ ٹیمپلیٹ کو اپنی React ایپ کے ساتھ ضم کر سکتے ہیں۔ بوٹسٹریپ ٹیمپلیٹس کے ساتھ تعمیر شروع کریں اور خوبصورت فرنٹ اینڈ انٹرفیس سے لطف اندوز ہوں۔