प्रतिक्रिया का उपयोग करके एक बंधनेवाला नेविगेशन मेनू कैसे बनाएं

एक साइडबार नेविगेशन मेनू में आमतौर पर लिंक की एक लंबवत सूची होती है। आप प्रतिक्रिया-राउटर-डोम का उपयोग करके प्रतिक्रिया में लिंक का एक सेट बना सकते हैं।

सामग्री UI आइकन वाले लिंक के साथ रिएक्ट साइड नेविगेशन मेनू बनाने के लिए इन चरणों का पालन करें। जब आप उन पर क्लिक करेंगे तो लिंक विभिन्न पृष्ठों को प्रस्तुत करेंगे।

---

---

एक प्रतिक्रिया आवेदन बनाना

यदि आपके पास पहले से ही प्रतिक्रिया परियोजना , अगले चरण पर जाने के लिए स्वतंत्र महसूस करें।

दिन का मेकअप वीडियो

आप प्रतिक्रिया के साथ जल्दी से उठने और चलने के लिए create-react-app कमांड का उपयोग कर सकते हैं। यह आपके लिए सभी निर्भरताओं और कॉन्फ़िगरेशन को स्थापित करता है।

React-sidenav नामक रिएक्ट प्रोजेक्ट बनाने के लिए निम्न कमांड चलाएँ।

नेटफ्लिक्स कोड का उपयोग कैसे करें

npx create-react-app react-sidenav 

यह आपको आरंभ करने के लिए कुछ फ़ाइलों के साथ एक प्रतिक्रिया-सिडनेव फ़ोल्डर बनाएगा। इस फ़ोल्डर को थोड़ा साफ करने के लिए, src फ़ोल्डर में नेविगेट करें और App.js की सामग्री को इसके साथ बदलें:

import './App.css'; 
  
function App() { 
  return ( 
    <div className="App"></div> 
  ); 
} 
  
export default App;

नेविगेशन घटक बनाना

आपके द्वारा बनाया गया नेविगेशन घटक इस तरह दिखेगा:

---

---

यह बहुत आसान है, लेकिन एक बार जब आप समाप्त कर लेते हैं, तो आपको अपनी आवश्यकताओं के अनुरूप इसे संशोधित करने में सक्षम होना चाहिए। आप शीर्ष पर डबल एरो आइकन का उपयोग करके नेविगेशन घटक को संक्षिप्त कर सकते हैं:

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

---

---

प्रदर्शित करने के लिए, lib नामक एक नया फ़ोल्डर बनाएं और navData.js नामक एक नई फ़ाइल जोड़ें।

import HomeIcon from '@mui/icons-material/Home'; 
import TravelExploreIcon from '@mui/icons-material/TravelExplore'; 
import BarChartIcon from '@mui/icons-material/BarChart'; 
import SettingsIcon from '@mui/icons-material/Settings'; 
  
export const navData = [ 
    { 
        id: 0, 
        icon: <HomeIcon/>, 
        text: "Home", 
        link: "/" 
    }, 
    { 
        id: 1, 
        icon: <TravelExploreIcon/>, 
        text: "Explore", 
        link: "explore" 
    }, 
    { 
        id: 2, 
        icon: <BarChartIcon/>, 
        text: "Statistics", 
        link: "statistics" 
    }, 
    { 
        id: 3, 
        icon: <SettingsIcon/>, 
        text: "Settings", 
        link: "settings" 
    } 
] 

ऊपर उपयोग किए गए आइकन सामग्री UI लाइब्रेरी से हैं, इसलिए इसे पहले इस कमांड का उपयोग करके इंस्टॉल करें:

npm install @mui/material @emotion/react @emotion/styled 
npm install @mui/icons-material 

इसके बाद, नाम का एक फोल्डर बनाएं अवयव और नामक एक नया घटक जोड़ें सिडेनव.जेएस .

इस फ़ाइल में, ../lib से navData आयात करें और इसके लिए कंकाल बनाएं Sidenav समारोह:

// In Sidenav.js 
import { navData } from "../lib/navData"; 
export default function Sidenav() { 
  return ( 
    <div> 
    </div> 
  ) 
} 

लिंक बनाने के लिए, इस घटक में div तत्व को इसमें संशोधित करें:

<div> 
    <button className={styles.menuBtn}> 
        <KeyboardDoubleArrowLeftIcon /> 
    </button> 
    {navData.map(item =>{ 
        return <div key={item.id} className={styles.sideitem}> 
	                {item.icon} 
	                <span className={styles.linkText}>{item.text}</span> 
		       </div> 
        })} 
 </div>

यह घटक मानचित्र फ़ंक्शन में प्रत्येक पुनरावृत्ति के लिए आइकन और लिंक टेक्स्ट युक्त एक नेविगेशन लिंक बनाता है।

बटन तत्व सामग्री UI लाइब्रेरी से बायां तीर आइकन रखता है। इस कोड का उपयोग करके इसे घटक के शीर्ष पर आयात करें।

import KeyboardDoubleArrowLeftIcon from '@mui/icons-material/KeyboardDoubleArrowLeft'; 

आपने यह भी देखा होगा कि वर्ग के नाम एक शैली वस्तु का संदर्भ देते हैं। ऐसा इसलिए है क्योंकि यह ट्यूटोरियल CSS मॉड्यूल का उपयोग करता है। CSS मॉड्यूल आपको रिएक्ट में स्थानीय रूप से स्कोप्ड स्टाइल बनाने की अनुमति देता है . यदि आपने इस प्रोजेक्ट को शुरू करने के लिए create-react-app का उपयोग किया है तो आपको कुछ भी इंस्टॉल या कॉन्फ़िगर करने की आवश्यकता नहीं है।

घटक फ़ोल्डर में, नामक एक नई फ़ाइल बनाएँ sidenav.module.css और निम्नलिखित जोड़ें:

.sidenav { 
    width: 250px; 
    transition: width 0.3s ease-in-out; 
    height: 100vh; 
    background-color: rgb(10,25,41); 
    padding-top: 28px; 
} 
  
.sidenavd { 
    composes: sidenav; 
    transition: width 0.3s ease-in-out; 
    width: 60px 
} 
  
.sideitem { 
    display: flex; 
    align-items: center; 
    padding: 10px 20px; 
    cursor: pointer; 
    color: #B2BAC2; 
    text-decoration: none; 
} 
  
.linkText { 
    padding-left: 16px; 
} 
  
.linkTextd { 
    composes: linkText; 
    visibility: hidden; 
} 
  
.sideitem:hover { 
    background-color: #244f7d1c; 
} 
  
.menuBtn { 
    align-self: center; 
    align-self: flex-start;   
    justify-self: flex-end; 
    color: #B2BAC2; 
    background-color: transparent; 
    border: none; 
    cursor: pointer; 
    padding-left: 20px; 
}

रिएक्ट राउटर सेट करना

मानचित्र फ़ंक्शन द्वारा लौटाए गए div तत्व लिंक होने चाहिए। रिएक्ट में, आप रिएक्ट-राउटर-डोम का उपयोग करके लिंक और रूट बना सकते हैं।

टर्मिनल में, npm के माध्यम से प्रतिक्रिया-राउटर-डोम स्थापित करें।

npm install react-router-dom@latest 

यह आदेश प्रतिक्रिया-राउटर-डोम का नवीनतम संस्करण स्थापित करता है।

Index.js में, ऐप कंपोनेंट को राउटर से लपेटें।

import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
const root = ReactDOM.createRoot(document.getElementById('root')); 
  
root.render( 
  <React.StrictMode> 
    <BrowserRouter> 
	    <App /> 
    </BrowserRouter> 
  </React.StrictMode> 
); 

इसके बाद, App.js में, अपने मार्ग जोड़ें।

import { 
  BrowserRouter, 
  Routes, 
  Route, 
} from "react-router-dom"; 
  
import './App.css'; 
import Sidenav from './Components/Sidenav'; 
import Explore from "./Pages/Explore"; 
import Home from "./Pages/Home"; 
import Settings from "./Pages/Settings"; 
import Statistics from "./Pages/Statistics"; 
  
function App() { 
  return ( 
    <div className="App"> 
      <Sidenav/> 
      <main> 
        <Routes> 
          <Route  path="/" element={<Home />}/> 
          <Route path="/explore" element={<Explore />} /> 
          <Route path="/statistics" element={<Statistics />}/> 
          <Route path="/settings" element={<Settings />} /> 
        </Routes> 
      </main> 
    </div> 
  ); 
} 
export default App; 

इन शैलियों के साथ App.css को संशोधित करें।

body { 
  margin: 0; 
  padding: 0; 
} 
  
.App { 
  display: flex; 
} 
  
main { 
  padding: 10px; 
} 

प्रत्येक मार्ग को दिए गए URL के आधार पर एक अलग पृष्ठ लौटाता है पथ सहारा . पेज नामक एक नया फ़ोल्डर बनाएं और चार घटक जोड़ें - होम, एक्सप्लोर, सांख्यिकी और सेटिंग्स पेज। यहाँ एक उदाहरण है:

export default function Home() { 
  return ( 
    <div>Home</div> 
  ) 
} 

यदि आप /होम पथ पर जाते हैं, तो आपको 'होम' देखना चाहिए।

नेविगेशन लिंक संशोधित करना

जब आप उन पर क्लिक करते हैं तो साइडबार के लिंक मेल खाने वाले पेज पर ले जाने चाहिए। Sidenav.js में, div तत्व के बजाय प्रतिक्रिया-राउटर-डोम से NavLink घटक का उपयोग करने के लिए मानचित्र फ़ंक्शन को संशोधित करें।

{navData.map(item => { 
    return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
               {item.icon} 
               <span className={styles.linkText}>{item.text}</span> 
           </NavLink> 
})} 

फ़ाइल के शीर्ष पर NavLink आयात करना याद रखें।

import { NavLink } from "react-router-dom"; 

NavLink को प्रोप के माध्यम से लिंक के लिए URL पथ प्राप्त होता है।

इस बिंदु तक, नेविगेशन बार खुला है। इसे छोटा करने योग्य बनाने के लिए, जब कोई उपयोगकर्ता तीर बटन पर क्लिक करता है, तो आप CSS वर्ग को बदलकर इसकी चौड़ाई को टॉगल कर सकते हैं। फिर आप इसे खोलने के लिए CSS क्लास को फिर से बदल सकते हैं।

इस टॉगल कार्यक्षमता को प्राप्त करने के लिए, आपको यह जानना होगा कि साइडबार कब खुला और बंद है।

इसके लिए यूजस्टेट हुक का इस्तेमाल करें। इस प्रतिक्रिया हुक आपको एक कार्यात्मक घटक में राज्य को जोड़ने और ट्रैक करने की अनुमति देता है।

sideNav.js में, ओपन स्टेट के लिए हुक बनाएं।

const [open, setopen] = useState(true) 

ओपन स्टेट को ट्रू में इनिशियलाइज़ करें, इसलिए जब आप एप्लिकेशन शुरू करेंगे तो साइडबार हमेशा खुला रहेगा।

इसके बाद, वह फ़ंक्शन बनाएं जो इस स्थिति को चालू करेगा।

const toggleOpen = () => { 
    setopen(!open) 
} 

अब आप इस तरह से डायनामिक CSS क्लासेस बनाने के लिए ओपन वैल्यू का उपयोग कर सकते हैं:

<div className={open?styles.sidenav:styles.sidenavd}> 
    <button className={styles.menuBtn} onClick={toggleOpen}> 
            {open? <KeyboardDoubleArrowLeftIcon />: <KeyboardDoubleArrowRightIcon />} 
    </button> 
    {navData.map(item =>{ 
        return <NavLink key={item.id} className={styles.sideitem} to={item.link}> 
                  {item.icon} 
                   <span className={open?styles.linkText:styles.linkTextd}>{item.text}</span> 
               </NavLink> 
     })} 
</div> 

उपयोग किए गए CSS वर्ग के नाम खुले राज्य द्वारा निर्धारित किए जाएंगे। उदाहरण के लिए, यदि खुला सत्य है, तो बाहरी डिव तत्व का एक सिडेनव वर्ग का नाम होगा। अन्यथा, वर्ग sidenavd होगा।

यह आइकन के लिए समान है, जो साइडबार को बंद करने पर दायां तीर आइकन में बदल जाता है।

इसे आयात करना याद रखें।

import KeyboardDoubleArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowRight'; 

साइडबार घटक अब बंधनेवाला है।

इसमें से पूरा कोड लें गिटहब भंडार और इसे स्वयं आजमाएं।

स्टाइलिंग रिएक्ट कंपोनेंट्स

रिएक्ट एक बंधनेवाला नेविगेशन घटक बनाने के लिए आसान बनाता है। आप कुछ ऐसे टूल का उपयोग कर सकते हैं जो रिएक्ट प्रदान करता है जैसे कि रूटिंग को संभालने के लिए रिएक्ट-राउटर-डोम और ढह गई स्थिति पर नज़र रखने के लिए हुक।

ऐप जो कहता है कि आप क्या टाइप करते हैं

आप घटकों को स्टाइल करने के लिए सीएसएस मॉड्यूल का भी उपयोग कर सकते हैं, हालांकि आपको ऐसा करने की आवश्यकता नहीं है। स्थानीय रूप से स्कोप वाली कक्षाएं बनाने के लिए उनका उपयोग करें जो अद्वितीय हैं और यदि आप उपयोग में नहीं हैं तो आप बंडल फ़ाइलों से हिल सकते हैं।