రియాక్ట్ యాప్‌తో బూట్‌స్ట్రాప్ థీమ్ టెంప్లేట్‌ను ఎలా ఇంటిగ్రేట్ చేయాలి

మీలాంటి పాఠకులు 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 నుండి JSX ఎంపికపై క్లిక్ చేయండి.

JSX అనేది జావాస్క్రిప్ట్‌కి సింటాక్స్ పొడిగింపు. ఇది భాగాలలో కోడ్‌ని వ్రాయడానికి 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; 
 

మీరు బ్రౌజర్‌ని నావిగేట్ చేసినప్పుడు స్థానిక హోస్ట్‌లో రెండర్ చేయబడిన పేజీలను మీరు చూడాలి. మీరు డౌన్‌లోడ్ చేసిన టెంప్లేట్ మాదిరిగానే, దిగువన చిత్రీకరించబడింది.

అభినందనలు, మీరు మీ రియాక్ట్ యాప్‌లో బూట్‌స్ట్రాప్ థీమ్‌ను విజయవంతంగా ఇంటిగ్రేట్ చేసారు. మీరు ఇప్పుడు మీ ప్రాధాన్యతకు పేజీలను అనుకూలీకరించవచ్చు.

బూట్‌స్ట్రాప్ యొక్క నేపథ్య టెంప్లేట్‌లను ఎందుకు ఉపయోగించాలి?

బూట్‌స్ట్రాప్ టెంప్లేట్‌లు చాలా తక్కువ సమయంలో చెప్పుకోదగిన ఫ్రంట్-ఎండ్ ఇంటర్‌ఫేస్‌లను రూపొందించడంలో సహాయపడతాయి. ఎంచుకోవడానికి చాలా థీమ్‌లు ఉన్నాయి. అన్ని థీమ్‌లు తాజా బూట్‌స్ట్రాప్ వెర్షన్‌కు చెందినవి. అవి MIT లైసెన్స్‌లతో కూడా వస్తాయి మరియు తాజా పరిశ్రమ డిజైన్‌లు.

ప్రయోజనాలు చాలా ఉన్నప్పటికీ, టెంప్లేట్‌లపై ఆధారపడటం సృజనాత్మకతను తగ్గిస్తుంది. ఆన్‌లైన్‌లో ఇతర సైట్‌లలో ఉపయోగించే ఒక ప్రసిద్ధ థీమ్‌ను కనుగొనడం సర్వసాధారణం. అయితే, మీరు ఒక టెంప్లేట్‌ను ప్రత్యేకమైన డిజైన్‌కు అనుకూలీకరించవచ్చు.

ఇప్పుడు మీరు మీ రియాక్ట్ యాప్‌తో బూట్‌స్ట్రాప్ టెంప్లేట్‌ని ఇంటిగ్రేట్ చేయవచ్చు. బూట్‌స్ట్రాప్ టెంప్లేట్‌లతో నిర్మాణాన్ని ప్రారంభించండి మరియు అందమైన ఫ్రంట్-ఎండ్ ఇంటర్‌ఫేస్‌లను ఆస్వాదించండి.