ரியாக்ட் ஆப்ஸுடன் பூட்ஸ்டார்ப் தீம் டெம்ப்ளேட்டை எவ்வாறு ஒருங்கிணைப்பது

உங்களைப் போன்ற வாசகர்கள் MUO ஐ ஆதரிக்க உதவுகிறார்கள். எங்கள் தளத்தில் உள்ள இணைப்புகளைப் பயன்படுத்தி நீங்கள் வாங்கும் போது, ​​நாங்கள் ஒரு இணை கமிஷனைப் பெறலாம். மேலும் படிக்க.

நீங்கள் ReactJS க்கு புதியவராக இருந்தால், முன்-இறுதி இடைமுகத்தை உருவாக்குவது சவாலாக இருக்கும். பூட்ஸ்டார்ப் கட்டமைப்பானது, அதன் டெம்ப்ளேட்களுடன், எளிதாகவும் வேகமாகவும் செய்கிறது.

பூட்ஸ்டார்ப்பில் யார் வேண்டுமானாலும் தனிப்பயனாக்கி இலவசமாக வெளியிடக்கூடிய கருப்பொருள் வார்ப்புருக்கள் உள்ளன. உங்கள் பயன்பாட்டில் பதிவிறக்கம் செய்து பயன்படுத்துவதற்கு முன் பல டெம்ப்ளேட்களில் இருந்து நீங்கள் தேர்வு செய்யலாம்.

---

---

என் தொலைபேசியில் வோல்ட் என்றால் என்ன

சிக்கலான அம்சங்களில் கவனம் செலுத்த அதிக நேரத்தை விட்டுவிட்டு, குறிப்பிடத்தக்க முகப்பு இடைமுகங்களை விரைவாக உருவாக்க டெம்ப்ளேட்டுகள் உங்களுக்கு உதவுகின்றன. ReactJS ஆப்ஸுடன் ஒன்றை ஒருங்கிணைப்பதன் மூலம் பூட்ஸ்டார்ப் டெம்ப்ளேட்களைப் பற்றி அறிந்து கொள்ளலாம்.

உங்கள் எதிர்வினை பயன்பாட்டை உருவாக்கவும்

தொடங்குங்கள் ReactJS பயன்பாட்டை உருவாக்குகிறது உங்கள் கணினியில் உள்ள ஒரு கோப்புறையில். மாற்றாக, நீங்கள் அதிகாரியைப் பின்பற்றலாம் எதிர்வினை வழிகாட்டி புதிய பயன்பாட்டை உருவாக்கும் போது.

பூட்ஸ்டார்ப் டெம்ப்ளேட்டைப் பதிவிறக்கவும்

இதிலிருந்து உங்களுக்கு விருப்பமான டெம்ப்ளேட்டைப் பதிவிறக்கவும் பூட்ஸ்ட்ராப்பைத் தொடங்கவும் கருப்பொருள்கள் இணையதளம் அல்லது உங்கள் விருப்பம் ஆன்லைனில் இலவச பூட்ஸ்டார்ப் டெம்ப்ளேட்களுடன் பல தளங்கள் உள்ளன.

இந்த வழிகாட்டிக்கு, ஏஜென்சி என்ற பூட்ஸ்டார்ப் தீம் பதிவிறக்கவும்.

பதிவிறக்கம் செய்தவுடன், கோப்புறை கோப்பை அன்சிப் செய்து அதன் உள்ளடக்கங்களைப் பார்க்கவும். உங்களிடம் சொத்துக்கள், CSS, JS என்ற கோப்புறைகள் மற்றும் index.html என்ற கோப்பு இருப்பதை நீங்கள் கவனிப்பீர்கள்.

---

---

ReactJS பயன்பாட்டில் பூட்ஸ்டார்ப் டெம்ப்ளேட்டைச் சேர்க்கவும்

அடுத்து, பதிவிறக்கம் செய்யப்பட்ட கோப்புறையின் உள்ளடக்கங்களை பெயரிடப்பட்ட கோப்புறையில் நகலெடுக்கவும் பொது உங்கள் எதிர்வினை பயன்பாட்டில். இப்போது உங்களிடம் இரண்டு index.html கோப்புகள் இருப்பதை நீங்கள் கவனிப்பீர்கள். பூட்ஸ்டார்ப்பின் உள்ளடக்கங்களை நகலெடுக்கவும் index.html ரியாக்ட் ஆப்ஸில் கோப்பு index.html கோப்பு.

பூட்ஸ்டார்ப் டெம்ப்ளேட்டைக் காட்டு

பயன்பாட்டின் index.html இல் பூட்ஸ்டார்ப் HTML ஐச் சேர்த்த பிறகு, ஒருங்கிணைப்பு வெற்றிகரமாக உள்ளதா என்பதைப் பார்க்க, பயன்பாட்டை இயக்கவும். பின்வரும் கட்டளையைப் பயன்படுத்தவும்:

---

---

 npm start

பின்வரும் படம் விளக்குவது போல, உங்கள் உலாவியில் டெம்ப்ளேட்டைப் பார்க்க வேண்டும்.

பயன்பாட்டுக் கூறுகளில் பூட்ஸ்டார்ப் தீமை ஒருங்கிணைக்கவும்

ரியாக்ட் பயன்பாட்டில் பூட்ஸ்டார்ப் டெம்ப்ளேட்டை ஒருங்கிணைக்க, நீங்கள் HTML பிரிவுகளை index.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 ஆக மாற்றவும். Vcode எடிட்டரில் தானாக இதைச் செய்ய கிளிக் செய்யவும் 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 கோப்பு, BrowserRouter ஐ ஒரு ரூட்டராக இறக்குமதி செய்யவும், வழிகள் மற்றும் வழி 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; 
 

நீங்கள் உலாவியில் செல்லும்போது, ​​ரெண்டர் செய்யப்பட்ட பக்கங்களை லோக்கல் ஹோஸ்டில் பார்க்க வேண்டும். நீங்கள் பதிவிறக்கிய டெம்ப்ளேட்டைப் போன்றது, கீழே விளக்கப்பட்டுள்ளது.

விண்டோஸ் 10 எத்தனை கிக்ஸ்

வாழ்த்துகள், உங்கள் ரியாக்ட் பயன்பாட்டில் பூட்ஸ்ட்ராப் தீம் ஒன்றை வெற்றிகரமாக ஒருங்கிணைத்துவிட்டீர்கள். இப்போது உங்கள் விருப்பத்திற்கேற்ப பக்கங்களைத் தனிப்பயனாக்கலாம்.

பூட்ஸ்டார்ப்பின் கருப்பொருள் டெம்ப்ளேட்களை ஏன் பயன்படுத்த வேண்டும்?

பூட்ஸ்டார்ப் வார்ப்புருக்கள் மிகக் குறுகிய காலத்திற்குள் குறிப்பிடத்தக்க முன்-இறுதி இடைமுகங்களை உருவாக்க உதவுகின்றன. தேர்வு செய்ய பல தீம்கள் உள்ளன. அனைத்து தீம்களும் சமீபத்திய பூட்ஸ்டார்ப் பதிப்பில் உள்ளன. அவை எம்ஐடி உரிமங்களுடனும் வருகின்றன மற்றும் சமீபத்திய தொழில் வடிவமைப்புகளாகும்.

பல நன்மைகள் இருந்தாலும், டெம்ப்ளேட்களை நம்புவது படைப்பாற்றலைக் குறைக்கிறது. ஆன்லைனில் மற்ற தளங்களில் பயன்படுத்தப்படும் பிரபலமான தீம் ஒன்றைக் கண்டறிவது பொதுவானது. இருப்பினும், நீங்கள் ஒரு டெம்ப்ளேட்டை ஒரு தனித்துவமான வடிவமைப்பிற்கு தனிப்பயனாக்கலாம்.

இப்போது உங்கள் ரியாக்ட் ஆப்ஸுடன் பூட்ஸ்டார்ப் டெம்ப்ளேட்டை ஒருங்கிணைக்கலாம். பூட்ஸ்டார்ப் டெம்ப்ளேட்களுடன் உருவாக்கத் தொடங்குங்கள் மற்றும் அழகான முன்-இறுதி இடைமுகங்களை அனுபவிக்கவும்.