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

React क्या है?

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

React की मुख्य विशेषताएँ और लाभ

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

React के साथ, डेवलपर्स तेज़ और प्रभावी तरीके से मॉडर्न, हाई परफॉर्मेंस वेब एप्लिकेशन बना सकते हैं।

ServBay का उपयोग कर React डेवलपमेंट और प्रोडक्शन पर्यावरण सेटअप

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

आवश्यक तैयारी

शुरू करने से पहले सुनिश्चित करें कि आपने यह तैयारियाँ कर ली हैं:

ServBay इंस्टॉल करें: आपके सिस्टम पर ServBay सफलतापूर्वक इंस्टॉल और चालू है।
Node.js पैकेज इंस्टॉल करें: ServBay के UI या कमांड लाइन से Node.js पैकेज इंस्टॉल करें। विस्तृत स्टेप्स के लिए ServBay में Node.js पैकेज इंस्टॉल करने का दस्तावेज़ देखें। ServBay स्वतः Node.js के वर्शन और एनवायरनमेंट वेरिएबल मैनेज करता है।

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

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

टर्मिनल खोलें और वेबसाइट रूट डायरेक्टरी पर जाएँ
अपना टर्मिनल ऐप खोलें। ServBay की अनुशंसित डिफ़ॉल्ट वेबसाइट रूट डायरेक्टरी:
macOS:
bash
```
cd /Applications/ServBay/www
```
1
Windows:
cmd
```
cd C:\ServBay\www
```
1
Vite से नया React प्रोजेक्ट बनाएँ
निम्न कमांड चलाएँ, जिससे create-vite टूल के ज़रिए servbay-react-demo नामक नया प्रोजेक्ट बनेगा और React टेम्पलेट चयनित होगा:
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx npm पैकेज एक्सिक्यूटर है, जिससे npm रजिस्ट्री के CLI टूल्स बिना ग्लोबल इंस्टॉल किए चला सकते हैं। इससे आप हमेशा लेटेस्ट वर्शन यूज़ करते हैं।
- create-vite Vite का ऑफिसियल प्रोजेक्ट क्रिएशन टूल है।
- servbay-react-demo आपके प्रोजेक्ट फोल्डर का नाम है।
- --template react React टेम्पलेट से प्रोजेक्ट स्ट्रक्चर इनिशियलाइज़ करता है।
स्क्रीन पर दिखने वाले निर्देशों का पालन करें।
प्रोजेक्ट डायरेक्टरी में जाएँ और डिपेंडेंसी इंस्टॉल करें
नए प्रोजेक्ट डायरेक्टरी में जाएँ और npm से आवश्यक पैकेज इंस्टॉल करें:
bash
```
cd servbay-react-demo
npm install
```
1
2
- अगर आप Yarn या pnpm पसंद करते हैं तो yarn install या pnpm install भी चला सकते हैं।

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

सेटअप सफल है या नहीं जाँचने के लिए हम होमपेज के कंटेंट को बदल सकते हैं।

src/App.jsx या src/App.tsx फ़ाइल खोलें
अपनी मनपसंद कोड एडिटर में प्रोजेक्ट डायरेक्टरी के अंतर्गत src/App.jsx (अगर जावास्क्रिप्ट टेम्पलेट चुना है) या src/App.tsx (अगर टाइपस्क्रिप्ट टेम्पलेट चुना है) फ़ाइल खोलें।

सामग्री बदलें

मेन कंटेंट रेंडरिंग कोड को "Hello ServBay!" दिखाने के लिए बदलें:

javascript

// ... अन्य इंपोर्ट्स ...
import './App.css';

function App() {
  // ... अन्य कोड ...
  return (
    <>
      {/* ... अन्य एलिमेंट्स ... */}
      <h1>Hello ServBay!</h1>
      {/* ... अन्य एलिमेंट्स ... */}
    </>
  );
}

export default App;

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

डेवलपमेंट मोड में जाएँ

डेवलपमेंट में अक्सर लोकल डेवलपमेंट सर्वर चलता है, जो हॉट मॉड्यूल रिप्लेसमेंट (HMR) जैसी सुविधाएँ देता है, जिससे डेवलपमेंट आसान हो जाता है। ServBay रिवर्स प्रॉक्सी से बाहरी रिक्वेस्ट को इस सर्वर तक पहुँचा सकता है।

टर्मिनल में डेवलपमेंट सर्वर चालू करें
प्रोजेक्ट रूट डायरेक्टरी servbay-react-demo में जाकर, Vite डेवलपमेंट सर्वर को चुने गए पोर्ट (उदाहरण: 8585) पर चालू करें:
bash
```
npm run dev -- --port 8585
```
1
- npm run dev आपके package.json में बताए गए dev स्क्रिप्ट को चलाता है जो Vite सर्वर चालू करता है।
- -- --port 8585 Vite कमांड को पोर्ट पैरामीटर पास करता है।
सर्वर चालू होने पर, टर्मिनल में आमतौर पर http://localhost:8585 का पता दिखाई देगा। टर्मिनल विंडो खुला रखें, सर्वर बंद न करें।
ServBay में वेबसाइट रिवर्स प्रॉक्सी कॉन्फ़िगर करें
ServBay एप्लिकेशन खोलें। वेबसाइट (Websites) सेक्शन में जाएँ। नया वेबसाइट कॉन्फ़िगरेशन बनाने के लिए "+" बटन दबाएँ:
- नाम (Name): ServBay React Dev (एक वर्णनात्मक नाम)
- डोमेन (Domain): servbay-react-dev.servbay.demo (ServBay ब्रांड के डेमो डोमेन का उपयोग)
- वेबसाइट प्रकार (Site Type): रिवर्स प्रॉक्सी (Reverse Proxy) चयन करें
- प्रॉक्सी IP: 127.0.0.1 (सर्वर लोकल पर है)
- प्रॉक्सी पोर्ट: 8585 (आपके चुने गए पोर्ट के अनुरूप)
सेव करें। ServBay स्वतः वेब सर्वर (Caddy या Nginx) से डोमेन पर आने वाली रिक्वेस्ट को http://127.0.0.1:8585 पर फॉरवर्ड कर देगा।
ServBay में वेबसाइट जोड़ने के विस्तार से निर्देशों के लिए ServBay वेबसाइट मैनेजमेंट दस्तावेज़ देखें।
डेवलपमेंट वेबसाइट पर जाएँ
ब्राउज़र में अपना सेट किया हुआ डोमेन खोलें: https://servbay-react-dev.servbay.demo।
- ServBay की मजबूत फीचर्स के कारण आपका लोकल डेवलपमेंट वेबसाइट स्वतः SSL सर्टिफिकेट से सुरक्षित हो जाता है (ServBay User CA या ServBay Public CA द्वारा साइन)। SSL संबंधी जानकारी के लिए SSL से वेबसाइट को सुरक्षित कैसे करें दस्तावेज़ देखें।
- अब, कोड एडिटर में प्रोजेक्ट फाइलें बदलने और सेव करने पर ब्राउज़र में पेज ऑटोमैटिकली अपडेट होगा, जो HMR है।

प्रोडक्शन वर्शन बनाना

React प्रोजेक्ट तैयार होने पर आपको ऑप्टिमाइज़्ड प्रोडक्शन वर्शन बनाना होगा।

टर्मिनल में प्रोडक्शन बिल्ड करें
प्रोजेक्ट रूट servbay-react-demo में ये कमांड चलाएँ:
bash
```
npm run build
```
1
इस कमांड से package.json का build स्क्रिप्ट चलेगा। Vite आधारित React प्रोजेक्ट में, यह आपके सोर्स कोड को कंम्पाइल, पैक और ऑप्टिमाइज़ कर स्टैटिक फाइल्स (HTML, CSS, JavaScript आदि) की एक फोल्डर dist में रख देता है। बिल्ड पूरी होने पर टर्मिनल में सफल संदेश दिखता है।
ServBay में स्टैटिक फाइल सर्विस सेट करें
प्रोडक्शन बिल्ड से तैयार dist फोल्डर को वेब सर्वर से डायरेक्ट सर्व करने के लिए, ServBay में स्टैटिक वेबसाइट सेट करें।
ServBay UI खोलें, वेबसाइट (Websites) सेक्शन में जाएँ। नया वेबसाइट ऐड करें:
- नाम (Name): ServBay React Prod (एक वर्णनात्मक नाम)
- डोमेन (Domain): servbay-react.servbay.demo (डेवलपमेंट डोमेन से अलग, ServBay ब्रांड के डेमो डोमेन का उपयोग)
- वेबसाइट प्रकार (Site Type): स्टैटिक (Static) चुनें
- वेबसाइट रूट डायरेक्टरी: अपने प्रोजेक्ट के dist फोल्डर का पथ सेट करें:
  - macOS: /Applications/ServBay/www/servbay-react-demo/dist
  - Windows: C:\ServBay\www\servbay-react-demo\dist
सेव करें। ServBay का बिल्ट-इन वेब सर्वर अब dist डायरेक्टरी की फाइल्स दे सकता है।
प्रोडक्शन वेबसाइट खोलें
ब्राउज़र में प्रोडक्शन वेबसाइट के डोमेन पर जाएँ: https://servbay-react.servbay.demo।
अब आपके सामने ऑप्टिमाइज़्ड, बिल्ट प्रोडक्शन वेबसाइट आएगी। यह वेबसाइट भी ServBay द्वारा ऑटोमैटिक SSL सपोर्ट के साथ सुरक्षित होगी।

सारांश

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

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

React क्या है? ​

React की मुख्य विशेषताएँ और लाभ ​

ServBay का उपयोग कर React डेवलपमेंट और प्रोडक्शन पर्यावरण सेटअप ​

आवश्यक तैयारी ​

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

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

डेवलपमेंट मोड में जाएँ ​

प्रोडक्शन वर्शन बनाना ​

सारांश ​