अध्याय 1: परिचय (Introduction)

अध्याय 1: परिचय (Introduction)

रिएक्ट.js (React.js) एक फ्रंट-एंड जावास्क्रिप्ट लाइब्रेरी है जिसे फेसबुक ने विकसित किया है। यह विशेष रूप से वेब अनुप्रयोगों के लिए उपयोगकर्ता इंटरफेस (UI) बनाने के लिए डिज़ाइन की गई है। रिएक्ट की प्रमुख विशेषता इसकी कम्पोनेंट-बेस्ड आर्किटेक्चर है, जो डेवलपर्स को पुन: उपयोग योग्य और प्रबंधनीय कोड लिखने में मदद करती है। रिएक्ट का उपयोग बड़े पैमाने पर फेसबुक, इंस्टाग्राम और अन्य प्रमुख वेब अनुप्रयोगों में किया जाता है, जिससे यह आज के समय की सबसे लोकप्रिय और शक्तिशाली जावास्क्रिप्ट लाइब्रेरी में से एक बन गया है।

रिएक्ट.js क्या है? (What is React.js?)

रिएक्ट एक ओपन-सोर्स लाइब्रेरी है जो वेब अनुप्रयोगों के यूजर इंटरफेस को बनाने के लिए उपयोग की जाती है। यह डेवलपर्स को विभिन्न UI तत्वों को कम्पोनेंट्स के रूप में बनाने और प्रबंधित करने की अनुमति देती है, जिससे कोड की पुन: उपयोगिता और स्थिरता बढ़ती है।

रिएक्ट.js की विशेषताएं (Features of React.js)

  • कम्पोनेंट-बेस्ड आर्किटेक्चर: रिएक्ट का डिज़ाइन कम्पोनेंट्स पर आधारित है, जिससे कोड को मॉड्यूलर और पुन: उपयोग योग्य बनाना आसान हो जाता है।
  • डेक्लेरेटिव यूआई: रिएक्ट में, आप अपने एप्लिकेशन की स्थिति का वर्णन करते हैं, और रिएक्ट DOM को आवश्यकतानुसार अपडेट करता है।
  • वर्चुअल DOM: रिएक्ट वर्चुअल DOM का उपयोग करता है जो वास्तविक DOM की तुलना में तेज़ी से अपडेट्स और रेंडरिंग करता है।
  • जावास्क्रिप्ट XML (JSX): JSX एक सिंटैक्स एक्सटेंशन है जो जावास्क्रिप्ट और HTML को मिलाकर अधिक पठनीय और लिखने में आसान बनाता है।
  • वन-वे डेटा फ्लो: रिएक्ट में डेटा एक दिशा में बहता है, जिससे डेटा प्रबंधन सरल और अधिक पूर्वानुमेय होता है।

रिएक्ट.js का इतिहास (History of React.js)

रिएक्ट.js (React.js) का इतिहास एक दिलचस्प यात्रा है, जिसने वेब विकास की दुनिया में एक महत्वपूर्ण बदलाव लाया है। आइए इसके विकास के मुख्य चरणों पर एक नजर डालते हैं:

प्रारंभिक विकास (Early Development)

रिएक्ट.js की शुरुआत 2011 में फेसबुक में हुई। जॉर्डन वॉल्क (Jordan Walke) नामक इंजीनियर ने इसे एक आंतरिक परियोजना के रूप में विकसित किया था। उस समय, फेसबुक अपने उपयोगकर्ता इंटरफेस को और अधिक कुशल बनाने के तरीकों की तलाश में था। जॉर्डन वॉल्क ने एक लाइब्रेरी बनाई जो उपयोगकर्ता इंटरफेस को अधिक तेज़ी और सुगमता से अपडेट कर सकती थी।

सार्वजनिक रिलीज़ (Public Release)

2013 में, फेसबुक ने रिएक्ट.js को ओपन-सोर्स परियोजना के रूप में जारी किया। यह कदम एक महत्वपूर्ण मोड़ था, जिसने वेब विकास समुदाय को रिएक्ट की अद्वितीय विशेषताओं और शक्तियों से अवगत कराया। ओपन-सोर्स होने के बाद, रिएक्ट ने डेवलपर्स के बीच तेजी से लोकप्रियता हासिल की।

वर्चुअल DOM का परिचय (Introduction of Virtual DOM)

रिएक्ट.js की एक प्रमुख विशेषता वर्चुअल DOM का उपयोग है। वर्चुअल DOM ने वास्तविक DOM के साथ काम करने में आने वाली कठिनाइयों को कम कर दिया और प्रदर्शन को बेहतर बनाया। इस तकनीक ने रिएक्ट को अन्य फ्रंट-एंड लाइब्रेरियों और फ्रेमवर्क्स से अलग और अधिक कुशल बनाया।

रिएक्ट नेटिव का विकास (Development of React Native)

2015 में, फेसबुक ने रिएक्ट नेटिव (React Native) को लॉन्च किया, जो मोबाइल एप्लिकेशन विकास के लिए रिएक्ट का उपयोग करता है। रिएक्ट नेटिव ने डेवलपर्स को एक ही कोडबेस से एंड्रॉइड और iOS एप्लिकेशन बनाने की अनुमति दी, जिससे मोबाइल विकास की प्रक्रिया सरल और तेज हो गई।

व्यापक अपनाना (Wide Adoption)

रिएक्ट की लोकप्रियता और सामर्थ्य के कारण, इसे दुनिया भर में कई प्रमुख कंपनियों द्वारा अपनाया गया। फेसबुक, इंस्टाग्राम, वॉट्सऐप, नेटफ्लिक्स, एयरबीएनबी, और कई अन्य प्रमुख वेब अनुप्रयोग रिएक्ट का उपयोग करते हैं। रिएक्ट का बड़ा और सक्रिय समुदाय भी इसके विकास और सुधार में महत्वपूर्ण भूमिका निभाता है।

नवीनतम विकास (Recent Developments)

रिएक्ट की टीम लगातार नई सुविधाओं और सुधारों पर काम कर रही है। हाल के वर्षों में, रिएक्ट ने कई प्रमुख अपडेट और सुधार देखे हैं, जैसे कि हुक्स (Hooks), Concurrent Mode, और Suspense। ये सुधार रिएक्ट को और अधिक शक्तिशाली और उपयोग में आसान बनाते हैं।

सेटअप और इंस्टॉलेशन (Setup and Installation)

रिएक्ट.js के साथ काम कैसे शुरू करें (How to Get Started with React.js)

रिएक्ट.js के साथ काम शुरू करने के लिए आपको कुछ प्रारंभिक सेटअप की आवश्यकता होगी। यहां हम आपको बताएंगे कि कैसे आप अपने कंप्यूटर पर रिएक्ट.js सेटअप और इंस्टॉल कर सकते हैं।

आवश्यकताएँ (Requirements)

रिएक्ट.js के साथ काम करने के लिए आपको निम्नलिखित चीजों की आवश्यकता होगी:

  • Node.js और npm: रिएक्ट ऐप्लिकेशन बनाने और उन्हें चलाने के लिए आपके सिस्टम पर Node.js और npm (Node Package Manager) का इंस्टॉल होना आवश्यक है।
  • टेक्स्ट एडिटर: कोड लिखने के लिए एक अच्छा टेक्स्ट एडिटर जैसे Visual Studio Code, Sublime Text, या Atom।

Node.js और npm इंस्टॉलेशन (Installing Node.js and npm)

  1. Node.js डाउनलोड करें: Node.js की आधिकारिक वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए उपयुक्त वर्शन डाउनलोड करें।
  2. इंस्टॉल करें: डाउनलोड की गई फाइल को खोलें और इंस्टॉलेशन निर्देशों का पालन करें।
  3. npm की जांच करें: इंस्टॉलेशन के बाद, टर्मिनल या कमांड प्रॉम्प्ट खोलें और निम्नलिखित कमांड टाइप करें यह सुनिश्चित करने के लिए कि npm सफलतापूर्वक इंस्टॉल हो गया है:
    node -v
    npm -v
    

    यह कमांड्स आपको Node.js और npm के वर्शन दिखाएंगे।

क्रिएट रिएक्ट ऐप (Create React App)

रिएक्ट ऐप्लिकेशन बनाने का सबसे सरल और आधिकारिक तरीका “Create React App” टूल का उपयोग करना है। यह टूल सभी आवश्यक कॉन्फ़िगरेशन और डिपेंडेंसी को सेटअप करता है, ताकि आप कोड पर ध्यान केंद्रित कर सकें।

  1. Create React App इंस्टॉल करें: निम्नलिखित कमांड का उपयोग करके “Create React App” को ग्लोबल रूप से इंस्टॉल करें:
    npx create-react-app my-app
    

     

  2. रिएक्ट ऐप बनाएँ: एक नया रिएक्ट ऐप्लिकेशन बनाने के लिए निम्नलिखित कमांड चलाएँ:
    npx create-react-app my-app
    

     

  3. प्रोजेक्ट डायरेक्टरी में जाएं: अब आपको अपने प्रोजेक्ट डायरेक्टरी में जाना होगा:
    cd my-app
    

     

  4. रिएक्ट ऐप चलाएं: निम्नलिखित कमांड का उपयोग करके अपने रिएक्ट ऐप को चलाएं:
    npm start
    

    यह कमांड आपके ऐप को लोकल सर्वर पर चलाएगा और आपका ब्राउज़र स्वतः खुल जाएगा जिसमें आपके रिएक्ट ऐप का स्वागत पृष्ठ दिखाई देगा।

टेक्स्ट एडिटर सेटअप (Setting Up a Text Editor)

रिएक्ट कोड लिखने के लिए, आप एक अच्छा टेक्स्ट एडिटर चुन सकते हैं। हम Visual Studio Code की सलाह देते हैं क्योंकि यह रिएक्ट विकास के लिए कई एक्सटेंशन और टूल्स प्रदान करता है।

  1. Visual Studio Code डाउनलोड और इंस्टॉल करें: Visual Studio Code की आधिकारिक वेबसाइट पर जाएं और अपने ऑपरेटिंग सिस्टम के लिए उपयुक्त वर्शन डाउनलोड करें।
  2. रिएक्ट एक्सटेंशन इंस्टॉल करें: Visual Studio Code में “React” के लिए एक्सटेंशन सर्च करें और उन्हें इंस्टॉल करें। यह एक्सटेंशन कोडिंग अनुभव को बेहतर बनाएंगे।


Index