macOS पर ServBay के साथ React प्रोजेक्ट बनाना और चलाना

React क्या है?

React एक ओपन-सोर्स JavaScript लाइब्रेरी है जिसे Meta (पूर्व में Facebook) और इसकी कम्युनिटी द्वारा मेंटेन किया जाता है, जो खासतौर पर यूज़र इंटरफेस (UI) बनाने के लिए डिज़ाइन की गई है। यह इंटरैक्टिव UI को कॉम्पोनेंट-आधारित तरीके से बनाती है, जिससे डेवलपर्स को जटिल और मेंटेनेबल सिंगल पेज ऐप्लिकेशन्स (SPA) या बड़े वेब ऐप्लिकेशन्स के व्यू लेयर को प्रभावी ढंग से बनाने की सुविधा मिलती है। React की प्रमुख ताकत इसके डिक्लेरेटिव प्रोग्रामिंग पैटर्न, कुशल वर्चुअल DOM अपडेट मैकेनिज़्म और मजबूत कम्युनिटी ईकोसिस्टम में हैं।

React के मुख्य फ़ीचर्स और लाभ

• कॉम्पोनेंट-आधारित डेवलपमेंट: जटिल UI को स्वतंत्र और पुन: उपयोग योग्य कॉम्पोनेंट्स में विभाजित करना, जिससे कोड की मेंटेनेबिलिटी और री-यूज़ेबिलिटी बढ़ती है।
• डिक्लेरेटिव व्यू: UI की स्टेट को सीधे वर्णित करें; React DOM को उस स्टेट के अनुसार अपडेट करने का ज़िम्मा लेता है, जिससे UI लॉजिक सरल हो जाती है।
• वर्चुअल DOM (Virtual DOM): मेमोरी में DOM का एक वर्चुअल प्रतिनिधित्व बनाए रखता है और डिफ की तुलना कर वास्तविक DOM में न्यूनतम बदलाव करता है, जिससे परफ़ॉर्मेंस में उल्लेखनीय सुधार आता है।
• एकतरफ़ा डेटा फ़्लो: डेटा ऊपर से नीचे की ओर बहता है, जिससे ऐप की स्टेट ट्रेस करना और समझना आसान होता है।
• JSX: JavaScript के लिए एक सिंटैक्स एक्सटेंशन, जिसकी मदद से JavaScript कोड में HTML-जैसा स्ट्रक्चर लिखा जा सकता है—यह कोड को और पढ़ने योग्य बनाता है।
• मजबूत ईकोसिस्टम: बड़ा कम्युनिटी सपोर्ट और React Router, Redux/Zustand/MobX, Material UI आदि जैसे तृतीय-पक्ष लाइब्रेरीज़ की समृद्धता, जो स्टेट मैनेजमेंट, राउटिंग और UI कॉम्पोनेंट्स समेत कई पहलुओं को कवर करते हैं।

React के साथ, डेवलपर्स तेज़ी से और अधिक कुशलता से मॉडर्न, उच्च-प्रदर्शन वेब एप्लिकेशन्स बना सकते हैं।

ServBay के साथ React डेवलपमेंट एवं प्रोडक्शन एनवायरनमेंट सेटअप करें

ServBay एक शक्तिशाली लोकल वेब डेवलपमेंट प्लेटफॉर्म है जो macOS यूज़र्स के लिए Node.js समेत कई सॉफ़्टवेयर पैकेज ऑफर करता है। यह गाइड विस्तार से बताएगा कि कैसे ServBay का Node.js एनवायरनमेंट और वेबसाइट्स (Websites) फीचर्स उपयोग करके एक React प्रोजेक्ट बनाएं, कॉन्फ़िगर करें और चलाएं, जिसमें डेवलपमेंट मोड के लिए रिवर्स प्रॉक्सी तथा प्रोडक्शन मोड के लिए स्टैटिक फाइल सर्विसिंग शामिल है।

आवश्यकताएँ

शुरू करने से पहले, कृपया सुनिश्चित करें:

1. ServBay इंस्टॉल करें: आपके macOS सिस्टम पर ServBay सफलतापूर्वक इंस्टॉल और रन कर रहा है।
2. Node.js पैकेज इंस्टॉल करें: ServBay के इंटरफ़ेस या कमांड लाइन द्वारा Node.js पैकेज इंस्टॉल करें। विवरण के लिए ServBay में Node.js पैकेज इंस्टॉल करना देखें। ServBay Node.js के वर्शन और एनवायरनमेंट वेरिएबल्स को ऑटोमैटिकली मैनेज करता है।

React प्रोजेक्ट बनाना

हम आधुनिक फ़्रंटएंड टूल Vite का इस्तेमाल करेंगे ताकि React प्रोजेक्ट जल्दी और आसानी से बनाया जा सके। Vite तेज़ बूट टाइम और इंस्टेंट हॉट मॉड्यूल रिप्लेसमेंट (HMR) ऑफर करता है, जिससे डेवलपमेंट एक्सपीरियंस मज़ेदार और फास्ट हो जाता है। आजकल, Vite नए React प्रोजेक्ट्स के लिए स्टैंडर्ड बनता जा रहा है (पारंपरिक create-react-app की जगह)।

1. टर्मिनल खोलें और वेबसाइट रूट डायरेक्टरी में जाएं

   टर्मिनल ऐप्लिकेशन खोलें। ServBay द्वारा सुझाई गई डिफ़ॉल्ट वेबसाइट रूट डायरेक्टरी है: /Applications/ServBay/www। इसमें जाएं:

   cd /Applications/ServBay/www

2. Vite से नया React प्रोजेक्ट बनाएं

   नीचे दिया कमांड चलाकर create-vite स्कैफ़ोल्डिंग टूल से servbay-react-demo नाम का नया प्रोजेक्ट बनाएं और React टेम्पलेट सिलेक्ट करें:

   npx create-vite servbay-react-demo --template react

   • npx npm पैकेज एग्जीक्यूटर है, जिससे आप npm रजिस्ट्री के कमांड लाइन टूल्स रन कर सकते हैं बिना उन्हें ग्लोबली इंस्टॉल किये, ताकि हमेशा टूल का लेटेस्ट वर्शन मिले।
   • create-vite Vite का ऑफिशियल प्रोजेक्ट स्कैफ़ोल्डिंग टूल है।
   • servbay-react-demo आपके प्रोजेक्ट की डायरेक्टरी का नाम है।
   • --template react प्रोजेक्ट स्ट्रक्चर के लिए React टेम्पलेट इस्तेमाल करता है।

   स्क्रीन पर दिए गए निर्देशों का पालन करें और प्रोजेक्ट कंप्लीट करें।

3. प्रोजेक्ट डायरेक्टरी में जाएँ एवं डिपेंडेंसी इंस्टॉल करें

   प्रोजेक्ट की नई डायरेक्टरी में जाएं और npm से डिपेंडेंसी इंस्टॉल करें:

   cd servbay-react-demo
   npm install

   • आप चाहें तो yarn install या pnpm install भी यूज़ कर सकते हैं अगर आपका पसंदीदा पैकेज मैनेजर Yarn या pnpm है।

React प्रोजेक्ट की सामग्री बदलें (वैकल्पिक)

सेटअप की सफलता को देखने के लिए, हम प्रोजेक्ट के होमपेज को थोड़ा बदल सकते हैं।

1. src/App.jsx या src/App.tsx फ़ाइल खोलें

   अपने पसंदीदा कोड एडिटर से src/App.jsx (अगर JS टेम्पलेट चुना है) या src/App.tsx (अगर TypeScript टेम्पलेट चुना है) ओपन करें।

2. संतुष्ट हों कि मुख्य सामग्री अपडेट की गई है

   मुख्य कंटेंट के उस हिस्से को खोजें जो रेंडर करता है, और उसे "Hello ServBay!" दिखाने के लिए अपडेट करें:

   // ... अन्य इम्पोर्ट्स ...
   import './App.css';
   
   function App() {
     // ... अन्य कोड ...
     return (
       <>
         {/* ... अन्य एलमेंट्स ... */}
         <h1>Hello ServBay!</h1>
         {/* ... अन्य एलमेंट्स ... */}
       </>
     );
   }
   
   export default App;

   फाइल को सेव करें।

डेवलपमेंट मोड में काम करें

डेवलपमेंट के समय आमतौर पर लोकल डेवलपमेंट सर्वर चलाते हैं, जो HMR जैसी सुविधाएँ देता है, जिससे विकास बहुत तेज हो जाता है। ServBay रिवर्स प्रॉक्सी का उपयोग कर बाहरी रिक्वेस्ट को इस डेवलपमेंट सर्वर तक भेज सकता है।

1. टर्मिनल में डेवलपमेंट सर्वर शुरू करें

   प्रोजेक्ट रूट servbay-react-demo में, नीचे कमांड चलाएँ (एक उदाहरण पोर्ट, जैसे 8585, के लिए):

   npm run dev -- --port 8585

   • npm run dev आपके प्रोजेक्ट के package.json फाइल में डिफाइन dev स्क्रिप्ट (आमतौर पर Vite डेव सर्वर) को चलाता है।
   • -- --port 8585 Vite कमांड के लिए पोर्ट पैरामीटर भेजता है।

   सर्वर स्टार्ट होने के बाद, टर्मिनल में आमतौर पर लोकल ऐड्रेस दिखेगा (जैसे http://localhost:8585)। टर्मिनल विंडो ओपन रखें, सर्वर को बंद न करें!

2. ServBay में साइट के लिए रिवर्स प्रॉक्सी सेट करें

   ServBay ऐप ओपन करें। Websites सेक्शन में जाएं, और एक नया साइट सेटअप बनाएं:

   • नाम (Name): ServBay React Dev (विवरण के लिए)
   • डोमेन (Domain): servbay-react-dev.servbay.demo (ब्रांडेड डेमो डोमेन)
   • साइट प्रकार (Site Type): Reverse Proxy चुनें
   • प्रॉक्सी IP: 127.0.0.1 (लोकल सर्वर)
   • प्रॉक्सी पोर्ट: 8585 (जो आपने ऊपर यूज किया है)

   सेटिंग सेव करें। ServBay स्वचालित रूप से Web Server (Caddy या Nginx) को इस डोमेन के ट्रैफ़िक को http://127.0.0.1:8585 पर भेजने के लिए कॉन्फ़िगर कर देगा।

   विस्तृत स्टेप्स के लिए ServBay वेबसाइट मैनेजमेंट गाइड पढ़ें।

3. डेव साइट पर जाएं

   अपने ब्राउज़र में, नए सेट किए डोमेन पर जाएं: https://servbay-react-dev.servbay.demo

   • ServBay के शक्तिशाली फीचर्स के कारण, आपकी लोकल डेव वेबसाइट का SSL सर्टिफिकेट (ServBay User CA या ServBay Public CA द्वारा जारी) ऑटोमैटिक मिल जाता है, जिससे आप HTTPS के ज़रिए सुरक्षित रूप से साइट देख सकते हैं। अधिक जानकारी के लिए देखें: SSL का इस्तेमाल कर साइट सुरक्षित करें।
   • अब, जब आप कोड एडिटर में फाइल सेव करेंगे, ब्राउज़र में पेज ऑटोमैटिक अपडेट हो जाएगा—यही है हॉट मॉड्यूल रिप्लेसमेंट।

प्रोडक्शन वर्शन बिल्ड करें

जब आपका React प्रोजेक्ट तैयार है और आप उसे तैनात करना चाहते हैं, तो उसका प्रोडक्शन बिल्ड बनाएं।

1. प्रोडक्शन बिल्ड के लिए टर्मिनल में कमांड चलाएँ

   प्रोजेक्ट रूट servbay-react-demo में नीचे कमांड चलाएँ:

   npm run build

   यह कमांड आपके प्रोजेक्ट के package.json की build स्क्रिप्ट चलाता है। Vite आधारित React प्रोजेक्ट के लिए, यह सोर्स कोड को HTML, CSS, JavaScript और अन्य स्टैटिक आसेट्स के रूप में बंडल, संपीड़ित और अनुकूलित करता है, और आउटपुट आमतौर पर dist फोल्डर में होता है। बिल्ड पूरा होने पर टर्मिनल में मैसेज मिलेगा।

2. ServBay में स्टैटिक फाइल सर्विसिंग सेट करें

   प्रोडक्शन बिल्ड का dist फोल्डर वास्तविक स्टैटिक फाइल होस्टिंग के लिए तैयार है। ServBay में नई स्टैटिक वेबसाइट बनाएं, जिसका रूट इस फोल्डर को पॉइंट करें:

   ServBay ऐप में वेबसाइट्स सेक्शन पर जाएं, और नया साइट सेट करें:

   • नाम (Name): ServBay React Prod (विवरणात्मक नाम)
   • डोमेन (Domain): servbay-react.servbay.demo (प्रोडक्शन के लिए ब्रांडेड डेमो डोमेन)
   • साइट प्रकार (Site Type): Static चुनें
   • वेबसाइट रूट डायरेक्टरी: /Applications/ServBay/www/servbay-react-demo/dist (जहाँ बिल्ड की गई फाइल्स हैं)

   सेव करें। अब ServBay, इन स्टैटिक फाइल्स को लोकल वेब सर्वर से सर्व करेगा।

3. प्रोडक्शन वेबसाइट पर जाएं

   अपने ब्राउज़र में https://servbay-react.servbay.demo खोलें।

   अब आपको बिल्ड की गई, ऑप्टिमाइज़्ड React वेबसाइट दिखेगी। ये साइट भी ServBay के जरिए ऑटोमैटिक SSL प्रोविजनिंग का लाभ लेती है।

निष्कर्ष

ऊपर दिए गए स्टेप्स के अनुसार, आपने ServBay के साथ macOS पर एक React प्रोजेक्ट बनाया और उसे डेवलपमेंट मोड में रिवर्स प्रॉक्सी तथा प्रोडक्शन मोड में स्टैटिक फाइल सर्विसिंग के जरिए चलाया। ServBay लोकल डेवेलपमेंट एनवायरनमेंट के सेटअप और मैनेजमेंट को सहज बनाता है, खासकर इसके इन-बिल्ट Node.js सपोर्ट, लचीले वेबसाइट कॉन्फ़िगरेशन (रिवर्स प्रॉक्सी व स्टैटिक दोनों) और ऑटोमैटिक SSL फंक्शनलिटी के साथ। ये विशेषताएँ React डेवेलपर्स के लिए काफी फायदेमंद हैं। अब आप इसी आधार पर अपना एप्लिकेशन आगे बना सकते हैं, टेस्ट कर सकते हैं और तैनात कर सकते हैं।