बटन किसी भी रिएक्ट एप्लिकेशन के निर्विवाद रूप से महत्वपूर्ण यूआई घटक हैं, बटन का उपयोग फॉर्म सबमिट करने या नया पेज खोलने जैसे परिदृश्यों में किया जा सकता है। आप React.js में पुन: प्रयोज्य बटन घटक बना सकते हैं जिनका उपयोग आप अपने एप्लिकेशन के विभिन्न अनुभागों में कर सकते हैं। परिणामस्वरूप, आपके एप्लिकेशन को बनाए रखना आसान हो जाएगा और आपका कोड DRY रखा जाएगा (खुद को दोहराएँ नहीं)।

पुन: प्रयोज्य बटन घटक बनाने के लिए आपको पहले अपने घटक फ़ोल्डर में Button.jsx नामक एक नई फ़ाइल बनानी होगी। अगला कदम फ़ंक्शन "बटन" को परिभाषित करना है, जो पैरामीटर टेक्स्ट और ऑनक्लिक को स्वीकार करता है।

बटन पर प्रदर्शित होने वाला टेक्स्ट टेक्स्ट प्रॉप में समाहित होता है। जब बटन क्लिक किया जाता है, तो ऑनक्लिक प्रोप द्वारा निर्दिष्ट फ़ंक्शन को कॉल किया जाएगा।

अंत में, आपको एक "बटन" तत्व वापस करना होगा जिसमें बटन पर प्रदर्शित होने वाले टेक्स्ट के लिए टेक्स्ट प्रोप सेट हो और बटन के ऑनक्लिक इवेंट के लिए ऑनक्लिक प्रोप हैंडलर पर सेट हो।

यहां React.js में पुन: प्रयोज्य बटन घटक का एक उदाहरण दिया गया है:

const Button = ({ text, onClick }) => {
  return (
    
      {text}
    
  );
};

export default Button;

एक बार जब आप अपना पुन: प्रयोज्य बटन घटक बना लेते हैं, तो आप इसे किसी अन्य घटक में आयात कर सकते हैं जिसमें आप इसका उपयोग करना चाहते हैं। उदाहरण के लिए, आप MyComponent नामक एक घटक बना सकते हैं जो टेक्स्ट के साथ एक बटन प्रस्तुत करने के लिए बटन घटक का उपयोग करता है "मुझे क्लिक करें!"।

किसी अन्य घटक में बटन घटक का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} />
    
  );
};

export default MyComponent;

यह "मुझे क्लिक करें!" टेक्स्ट वाला एक बटन प्रस्तुत करेगा। जब बटन क्लिक किया जाता है, तो कंसोल.लॉग फ़ंक्शन को कॉल किया जाएगा और संदेश "बटन क्लिक किया गया!" कंसोल पर लॉग इन किया जाएगा।

आप विभिन्न शैलियों वाले बटन बनाने के लिए बटन घटक का भी उपयोग कर सकते हैं। उदाहरण के लिए, आप कस्टम शैली लागू करने के लिए बटन तत्व में एक क्लास जोड़ सकते हैं। उदाहरण के लिए:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} className="my-custom-class" />
    
  );
};

export default MyComponent;

यह "मुझे क्लिक करें!" टेक्स्ट वाला एक बटन प्रस्तुत करेगा। बटन पर क्लास my-custom-class भी लागू होगा। आप अपनी CSS फ़ाइल में बटन को स्टाइल करने के लिए इस क्लास का उपयोग कर सकते हैं।