JSX

1. 1. जे एस एक्स : शुरुआती गाइड

जे एस एक्स (JSX) एक सिंटैक्स एक्सटेंशन है जो जावास्क्रिप्ट के साथ एचटीएमएल (HTML) जैसा कोड लिखने की अनुमति देता है। यह React लाइब्रेरी के साथ गहराई से जुड़ा हुआ है, लेकिन इसका उपयोग अन्य लाइब्रेरी और फ्रेमवर्क के साथ भी किया जा सकता है। जे एस एक्स का उपयोग मुख्य रूप से यूजर इंटरफेस (UI) बनाने के लिए किया जाता है। यह लेख शुरुआती लोगों के लिए जे एस एक्स की मूल बातें, इसके फायदे, उपयोग और कुछ सामान्य उदाहरणों को विस्तार से बताएगा।

जे एस एक्स क्या है?

जे एस एक्स, जावास्क्रिप्ट ट्रांसपाइलर, आमतौर पर बाबेल (Babel) के माध्यम से, सादे जावास्क्रिप्ट में परिवर्तित हो जाता है। ब्राउज़र सीधे जे एस एक्स कोड को नहीं समझ सकते हैं, इसलिए इसे पहले जावास्क्रिप्ट में बदलना आवश्यक है। जे एस एक्स का मुख्य उद्देश्य जावास्क्रिप्ट में एचटीएमएल जैसी संरचनाओं को लिखना आसान बनाना है, जिससे कोड अधिक पठनीय और रखरखाव योग्य बन जाता है।

यह समझना महत्वपूर्ण है कि जे एस एक्स एचटीएमएल नहीं है। यह एक एक्सप्रेशन है जो जावास्क्रिप्ट के भीतर लिखा जाता है। इसका मतलब है कि आप जे एस एक्स के भीतर जावास्क्रिप्ट कोड का उपयोग कर सकते हैं और जावास्क्रिप्ट के भीतर जे एस एक्स का उपयोग कर सकते हैं।

जे एस एक्स क्यों उपयोग करें?

जे एस एक्स का उपयोग करने के कई फायदे हैं:

• पठनीयता: जे एस एक्स कोड एचटीएमएल के समान दिखता है, जिससे इसे समझना और बनाए रखना आसान हो जाता है, खासकर उन डेवलपर्स के लिए जो एचटीएमएल से परिचित हैं।
• रखरखाव: जे एस एक्स कंपोनेंट-आधारित आर्किटेक्चर को प्रोत्साहित करता है, जिससे कोड को छोटे, पुनः प्रयोज्य भागों में विभाजित करना आसान हो जाता है।
• सुरक्षा: जे एस एक्स स्वचालित रूप से एचटीएमएल इंजेक्शन हमलों से बचाता है, क्योंकि यह एचटीएमएल को डेटा से अलग करता है।
• डेवलपर उत्पादकता: जे एस एक्स कोड लिखना तेज और आसान है, क्योंकि यह एचटीएमएल और जावास्क्रिप्ट को एक साथ लिखने की अनुमति देता है।
• डीबगिंग: जे एस एक्स त्रुटियों को ढूंढना और ठीक करना आसान बनाता है, क्योंकि यह त्रुटि संदेशों को अधिक जानकारीपूर्ण बनाता है।

जे एस एक्स का सिंटैक्स

जे एस एक्स का सिंटैक्स एचटीएमएल के समान है, लेकिन कुछ महत्वपूर्ण अंतर हैं:

• टैग: जे एस एक्स में, एचटीएमएल टैग को केस-सेंसिटिव होना चाहिए। उदाहरण के लिए, `
  ` के बजाय `

  ` का उपयोग करें।
• एट्रिब्यूट: एचटीएमएल एट्रिब्यूट को camelCase में लिखा जाना चाहिए। उदाहरण के लिए, `class` के बजाय `className` का उपयोग करें।
• एक्सप्रेशन: जे एस एक्स के भीतर, आप कर्ली ब्रेसेस `{}` का उपयोग करके जावास्क्रिप्ट एक्सप्रेशन लिख सकते हैं।
• कमेंट्स: जे एस एक्स में, आप `/* */` का उपयोग करके कमेंट लिख सकते हैं।

जे एस एक्स सिंटैक्स उदाहरण

एचटीएमएल	जे एस एक्स	विवरण
` Hello World `	` Hello World `	क्लास एट्रिब्यूट को camelCase में बदला गया।
` Hello, {name}! `	` Hello, {name}! `	जावास्क्रिप्ट एक्सप्रेशन का उपयोग।
` {condition ? True  : False } `	` {condition ? True  : False } `	कंडीशनल रेंडरिंग।
`function MyComponent(props) { return Hello, {props.name}! ; }`	`function MyComponent(props) { return Hello, {props.name}! ; }`	कंपोनेंट में जे एस एक्स का उपयोग।

जे एस एक्स के उदाहरण

आइए कुछ सरल उदाहरणों के माध्यम से जे एस एक्स को समझते हैं:

उदाहरण 1: एक साधारण हेडिंग

```javascript

const element =

Hello, world!

;

```

इस उदाहरण में, हमने एक जे एस एक्स एलिमेंट बनाया है जो एक `