आप जैसे पाठक MUO का समर्थन करने में मदद करते हैं। जब आप हमारी साइट पर लिंक का उपयोग करके खरीदारी करते हैं, तो हम संबद्ध कमीशन अर्जित कर सकते हैं। और पढ़ें।

यदि आप ReactJS में नए हैं तो फ्रंट-एंड इंटरफ़ेस बनाना चुनौतीपूर्ण हो सकता है। बूटस्ट्रैप फ्रेमवर्क, इसके टेम्प्लेट के साथ, इसे आसान और तेज़ बनाता है।

बूटस्ट्रैप में थीम वाले टेम्पलेट हैं जिन्हें कोई भी मुफ्त में अनुकूलित और प्रकाशित कर सकता है। आप अपने ऐप में उन्हें डाउनलोड करने और उपयोग करने से पहले कई टेम्प्लेट में से चुन सकते हैं।

जटिल विशेषताओं पर ध्यान केंद्रित करने के लिए अधिक समय छोड़ते हुए, टेम्प्लेट आपको जल्दी से उल्लेखनीय फ्रंटएंड इंटरफेस बनाने में मदद करते हैं। आप रिएक्टजेएस ऐप के साथ एक को एकीकृत करके बूटस्ट्रैप टेम्प्लेट के बारे में जान सकते हैं।

अपना रिएक्ट ऐप बनाएं

से शुरू एक ReactJS ऐप बनाना आपकी मशीन पर एक फ़ोल्डर में। वैकल्पिक रूप से, आप अधिकारी का अनुसरण कर सकते हैं प्रतिक्रिया गाइड एक नया ऐप बनाने पर।

बूटस्ट्रैप टेम्पलेट डाउनलोड करें

से अपनी पसंद का टेम्पलेट डाउनलोड करें बूटस्ट्रैप प्रारंभ करें थीम वेबसाइट या आपकी पसंद का कोई अन्य। ऑनलाइन मुफ्त बूटस्ट्रैप टेम्प्लेट वाली कई साइटें हैं।

instagram viewer

इस गाइड के लिए, एजेंसी नाम की बूटस्ट्रैप थीम डाउनलोड करें।

एक बार डाउनलोड हो जाने पर, इसकी सामग्री देखने के लिए फ़ोल्डर फ़ाइल को अनज़िप करें। आप देखेंगे कि आपके पास एसेट्स, CSS, JS नाम के फोल्डर और index.html नाम की एक फाइल है।

ReactJS ऐप में बूटस्ट्रैप टेम्प्लेट जोड़ें

अगला, डाउनलोड किए गए फ़ोल्डर की सामग्री को नामित फ़ोल्डर में कॉपी करें जनता आपके रिएक्ट ऐप में। आप देखेंगे कि अब आपके पास दो index.html फाइलें हैं। बूटस्ट्रैप की सामग्री की प्रतिलिपि बनाएँ index.html रिएक्ट ऐप में फाइल करें index.html फ़ाइल।

बूटस्ट्रैप टेम्पलेट प्रदर्शित करें

बूटस्ट्रैप HTML को ऐप के index.html में जोड़ने के बाद, यह देखने के लिए ऐप चलाएं कि एकीकरण सफल रहा या नहीं। निम्न आदेश का प्रयोग करें:

एनपीएम प्रारंभ

आपको अपने ब्राउज़र में टेम्प्लेट देखना चाहिए, जैसा कि निम्न चित्र दिखाता है।

ऐप घटकों में बूटस्ट्रैप थीम को एकीकृत करें

बूटस्ट्रैप टेम्पलेट को रिएक्ट ऐप में एकीकृत करने के लिए, आपको HTML अनुभागों को index.html से प्रत्येक घटक में कॉपी करना होगा। घटक आपको ऐप के विभिन्न भागों के लिए कोड लिखने और उनका पुन: उपयोग करने की अनुमति देते हैं। यह दोहराव को कम करता है और आपके ऐप की संरचना को भी व्यवस्थित करता है।

index.html फ़ाइल में अब अलग-अलग अनुभाग नेविगेशन, हमारे बारे में, संपर्क और पाद लेख हैं। Src फोल्डर में, दो फोल्डर, कंपोनेंट्स और पेज बनाएं। अनुभागों को नीचे दिखाए गए फ़ोल्डरों में विभाजित करें:

घटकों में निम्नलिखित शामिल होना चाहिए:

  • Header.jsx: मास्टहेड अनुभाग।
  • Navigation.jsx: नेविगेशन बार और फुटर।

पृष्ठों के फ़ोल्डर में निम्नलिखित होंगे:

  • हमारे बारे में.jsx: हमारे बारे में जानकारी।
  • Home.jsx: सेवाएं, पोर्टफोलियो, ग्राहक और टीम अनुभाग।
  • Contacts.jsx: संपर्क जानकारी।

index.html फ़ाइल से प्रत्येक अनुभाग के HTML की प्रतिलिपि बनाएँ और इसे प्रत्येक घटक में जोड़ें। वाक्य-विन्यास ऐसा दिखना चाहिए:

आयात प्रतिक्रिया से'प्रतिक्रिया'
कॉन्स्ट हैडर = () => {
वापस करना (




"मास्टहेड">
"कंटेनर">
"मास्टहेड-उपशीर्षक">हमारे स्टूडियो में आपका स्वागत है!</div>









"मास्टहेड-हेडिंग टेक्स्ट-अपरकेस">
 यहआपसे मिलकर अच्छा लगा
 </div>



"बीटीएन बीटीएन-प्राथमिक बीटीएन-एक्सएल टेक्स्ट-अपरकेस" href="#सेवाएं">
 मुझे और बताएँ
 </a>
 </div>
 </header>
 </div>
 );
};


निर्यातगलती करना हैडर

अगला, घटकों में HTML के सिंटैक्स को JSX में बदलें। Vscode एडिटर पर इसे स्वचालित रूप से करने के लिए क्लिक करें CTRL + SHIFT + P. HTML को JSX में बदलने के लिए पॉप अप होने वाली विंडो पर HTML से JSX विकल्प पर क्लिक करें।

JSX जावास्क्रिप्ट का सिंटैक्स एक्सटेंशन है। यह आपको घटकों में कोड लिखने के लिए HTML और जावास्क्रिप्ट के मिश्रण का उपयोग करने की अनुमति देता है। एक बार जब आप सभी अनुभागों को घटकों में कॉपी कर लेते हैं, तो index.html फ़ाइल केवल स्टाइलिंग लिंक और स्क्रिप्ट के साथ बनी रहती है।

यह ऐसा दिखेगा:

एचटीएमएल>
<एचटीएमएललैंग="एन">


<सिर>
<मेटाcharset="यूटीएफ-8" />
<जोड़नासंबंधित="आइकन"href="%PUBLIC_URL%/favicon.ico" />
<मेटानाम="व्यूपोर्ट"संतुष्ट="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1" />
<मेटानाम="विषय-रंग"संतुष्ट="#000000" />
<मेटानाम="विवरण"संतुष्ट="क्रिएट-रिएक्शन-ऐप का उपयोग करके बनाई गई वेब साइट"/>
<जोड़नासंबंधित="ऐप्पल-टच-आइकन"href="%PUBLIC_URL%/logo192.png" />
<जोड़नासंबंधित="घोषणापत्र"href="%PUBLIC_URL%/manifest.json" />
<शीर्षक>प्रतिक्रिया ऐपशीर्षक>
<जोड़नासंबंधित="आइकन"प्रकार="इमेज/एक्स-आइकन"href="संपत्ति/favicon.ico" />


 फ़ॉन्ट विस्मयकारी चिह्न (मुफ्त संस्करण)
<लिखी हुई कहानीस्रोत=" https://use.fontawesome.com/releases/v6.1.0/js/all.js"crossorigin="अनाम">लिखी हुई कहानी>


 गूगल फोंट
<जोड़नाhref=" https://fonts.googleapis.com/css? परिवार=मोंटसेराट: 400,700"संबंधित="शैली पत्रक"प्रकार="पाठ/सीएसएस" />
<जोड़नाhref=" https://fonts.googleapis.com/css? परिवार = रोबोटो + स्लैब: 400,100,300,700"संबंधित="शैली पत्रक"प्रकार="पाठ/सीएसएस" />


 कोर थीम सीएसएस (बूटस्ट्रैप शामिल है)
<जोड़नाhref="%PUBLIC_URL%/css/styles.css"संबंधित="शैली पत्रक" />
सिर>


<शरीर>
<नोस्क्रिप्ट>इस ऐप को चलाने के लिए आपको जावास्क्रिप्ट सक्षम करने की आवश्यकता है।नोस्क्रिप्ट>


<डिवपहचान="जड़">डिव>


 बूटस्ट्रैप कोर जेएस
<लिखी हुई कहानीस्रोत=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">लिखी हुई कहानी>


 कोर थीम जे.एस
<लिखी हुई कहानीस्रोत="%PUBLIC_URL%/js/scripts.js">लिखी हुई कहानी>


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


 * *एसबी फॉर्म जेएस* *


 * *पर अपना प्रपत्र सक्रिय करें https://startbootstrap.com/solution/contact-forms * *


 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *


<लिखी हुई कहानीस्रोत=" https://cdn.startbootstrap.com/sb-forms-latest.js">लिखी हुई कहानी>
शरीर>
एचटीएमएल>

घटकों के लिए मार्ग बनाएँ

अब जब आपके पास ऐप में लिंक, स्क्रिप्ट और घटक हैं, तो आपको उनके लिए App.js फ़ाइल में रूट बनाना होगा। मार्ग गतिशील बनाने के लिए ऐप पर पृष्ठों को प्रस्तुत करेंगे।

पृष्ठों को प्रस्तुत करने के लिए, निम्नलिखित कमांड के साथ प्रतिक्रिया-राउटर-डोम स्थापित करें:

एनपीएम प्रतिक्रिया-राउटर-डोम स्थापित करें

में ऐप.जेएस फ़ाइल, ब्राउज़र राउटर को राउटर, रूट और रूट के रूप में आयात करें प्रतिक्रिया-राउटर-डोम लाइब्रेरी. फिर सभी आयात करें अवयव और पृष्ठों. फ़ाइल इस तरह दिखनी चाहिए:

आयात {ब्राउज़र राउटर जैसा राउटर, रूट, रूट} से"प्रतिक्रिया-राउटर-डोम";
आयात मार्गदर्शन से'./घटक/नेविगेशन';
आयात घर से'./पेज/होम';
आयात के बारे में से'./पृष्ठ/के बारे में';
आयात संपर्क से'./पृष्ठ/संपर्क'
आयात हैडर से"./components/Header";
समारोहअनुप्रयोग() {
वापस करना (


"अनुप्रयोग">










"/" तत्व = {} />
"/के बारे में" तत्व = {} />
"/संपर्क करना" तत्व = {} />
 </Routes>
 </Navigation>
 </Router>
 </div>
 );
}


निर्यातगलती करना अनुप्रयोग;

जब आप ब्राउज़र नेविगेट करते हैं तो आपको स्थानीय होस्ट पर रेंडर किए गए पृष्ठ दिखाई देने चाहिए। आपके द्वारा डाउनलोड किए गए टेम्प्लेट के समान, जैसा कि नीचे दिखाया गया है।

बधाई हो, आपने बूटस्ट्रैप थीम को अपने रिएक्ट ऐप में सफलतापूर्वक एकीकृत कर लिया है। अब आप पृष्ठों को अपनी पसंद के अनुसार अनुकूलित कर सकते हैं।

बूटस्ट्रैप के थीम वाले टेम्पलेट का उपयोग क्यों करें?

बूटस्ट्रैप टेम्प्लेट बहुत कम समय में उल्लेखनीय फ्रंट-एंड इंटरफेस बनाने में मदद करते हैं। चुनने के लिए कई थीम हैं। सभी विषय नवीनतम बूटस्ट्रैप संस्करण के हैं। वे एमआईटी लाइसेंस के साथ भी आते हैं और नवीनतम उद्योग डिजाइन हैं।

जबकि फायदे कई हैं, टेम्प्लेट पर निर्भर रहने से रचनात्मकता कम हो जाती है। ऑनलाइन अन्य साइटों पर उपयोग की जाने वाली एक लोकप्रिय थीम का पता लगाना आम बात है। हालाँकि, आप एक टेम्पलेट को एक अद्वितीय डिज़ाइन के लिए अनुकूलित कर सकते हैं।

अब आप बूटस्ट्रैप टेम्प्लेट को अपने रिएक्ट ऐप के साथ एकीकृत कर सकते हैं। बूटस्ट्रैप टेम्प्लेट के साथ निर्माण शुरू करें और सुंदर फ्रंट-एंड इंटरफेस का आनंद लें।