एक नया React प्रोजेक्ट शुरू करें
यदि आप पूरी तरह से React का उपयोग करके एक नया ऐप या नई वेबसाइट बनाना चाहते हैं, तो हम समुदाय में लोकप्रिय React पर आधारित फ्रेमवर्क में से किसी एक को चुनने की सलाह देते हैं।
आप React को बिना किसी फ्रेमवर्क के उपयोग कर सकते हैं, लेकिन हमने पाया है कि अधिकांश ऐप्स और वेबसाइट्स अंततः सामान्य समस्याओं जैसे कोड-स्प्लिटिंग, रूटिंग, डेटा फेचिंग, और HTML जनरेट करने के समाधान विकसित करती हैं। ये समस्याएँ केवल React तक सीमित नहीं हैं, बल्कि सभी UI लाइब्रेरीज़ में सामान्य हैं।
किसी फ्रेमवर्क के साथ शुरुआत करके, आप React के साथ जल्दी शुरुआत कर सकते हैं और बाद में अपना खुद का फ्रेमवर्क बनाने से बच सकते हैं।
Deep Dive
आप निश्चित रूप से React को बिना किसी फ्रेमवर्क के उपयोग कर सकते हैं—यही तरीका है जिससे आप अपने पेज के किसी हिस्से में React का उपयोग कर सकते हैं। हालांकि, यदि आप पूरी तरह से React का उपयोग करके एक नया ऐप या वेबसाइट बना रहे हैं, तो हम किसी फ्रेमवर्क का उपयोग करने की सिफारिश करते हैं।
कारण यह हैं:
भले ही आपको शुरुआत में रूटिंग या डेटा फेचिंग की आवश्यकता न हो, लेकिन समय के साथ आप इनके लिए कुछ लाइब्रेरीज़ जोड़ना चाहेंगे। जैसे-जैसे आपके जावास्क्रिप्ट बंडल का आकार हर नई सुविधा के साथ बढ़ेगा, आपको हर रूट के लिए कोड को अलग-अलग विभाजित करने के तरीके खोजने पड़ सकते हैं।
जैसे-जैसे आपके डेटा फेचिंग की ज़रूरतें जटिल होंगी, आपको क्लाइंट और सर्वर के बीच नेटवर्क की देरी (waterfalls) का सामना करना पड़ सकता है, जिससे आपका ऐप धीमा महसूस हो सकता है। और जब आपका ऑडियंस कमजोर नेटवर्क और लो-एंड डिवाइस का उपयोग करता है, तो आपको अपने कॉम्पोनेंट्स से HTML जेनरेट करके कंटेंट पहले से डिस्प्ले करना पड़ सकता है—या तो सर्वर पर या बिल्ड समय के दौरान।
अपनी सेटअप को बदलकर सर्वर पर या बिल्ड समय पर कुछ कोड चलाना बहुत चुनौतीपूर्ण हो सकता है।
ये समस्याएँ React तक सीमित नहीं हैं। इसी कारण से Svelte के पास SvelteKit है, Vue के पास Nuxt है. इन समस्याओं को स्वयं हल करने के लिए, आपको अपने बंडलर को अपने राउटर और डेटा फेचिंग लाइब्रेरी के साथ एकीकृत करना होगा। शुरूआती सेटअप बनाना आसान हो सकता है, लेकिन एक ऐसा ऐप बनाना जो समय के साथ तेजी से लोड हो, इसमें कई सूक्ष्मताएँ शामिल हैं।
आपको ऐप का न्यूनतम कोड भेजने की आवश्यकता होगी, लेकिन इसे एक ही क्लाइंट–सर्वर राउंडट्रिप में और पेज के डेटा के साथ समानांतर में करना होगा। आप चाहेंगे कि पेज आपके जावास्क्रिप्ट कोड के चलने से पहले इंटरैक्टिव हो, ताकि प्रोग्रेसिव एन्हांसमेंट को सपोर्ट किया जा सके। आप शायद अपनी मार्केटिंग पेज के लिए पूरी तरह से स्थिर HTML फाइलें जनरेट करना चाहेंगे, जिन्हें कहीं भी होस्ट किया जा सके और जो जावास्क्रिप्ट डिसेबल होने पर भी काम करें। इन क्षमताओं का निर्माण अपने आप में एक वास्तविक प्रयास की आवश्यकता होती है।
React फ्रेमवर्क इन समस्याओं का समाधान स्वतः रूप से करते हैं। वे आपको बहुत सरलता से शुरुआत करने देते हैं और आपकी ज़रूरतों के अनुसार आपके ऐप को स्केल करने देते हैं। प्रत्येक React फ्रेमवर्क का अपना समुदाय होता है, जिससे प्रश्नों के उत्तर खोजना और टूलिंग को अपग्रेड करना आसान हो जाता है। फ्रेमवर्क आपके कोड को संरचना प्रदान करते हैं, जिससे आप और अन्य डेवलपर्स विभिन्न प्रोजेक्ट्स के बीच संदर्भ और कौशल बनाए रख सकते हैं। वहीं, कस्टम सेटअप के साथ आप असमर्थित डिपेंडेंसी वर्ज़न पर अटक सकते हैं और अंततः अपना खुद का फ्रेमवर्क बना सकते हैं—जो न तो किसी समुदाय के साथ होगा और न ही अपग्रेड पथ के साथ।
अगर आपके ऐप की कुछ असामान्य आवश्यकताएँ हैं जो इन फ्रेमवर्क द्वारा हल नहीं की जा सकतीं, या आप स्वयं इन समस्याओं को हल करना पसंद करते हैं, तो आप React के साथ अपना कस्टम सेटअप बना सकते हैं। इसके लिए react और react-dom npm से डाउनलोड करें, और Vite या Parcel, जैसे बंडलर के साथ अपना कस्टम बिल्ड प्रोसेस सेटअप करें। रूटिंग, स्टैटिक जनरेशन, या सर्वर-साइड रेंडरिंग जैसी आवश्यकताओं के लिए ज़रूरत के अनुसार अन्य टूल्स जोड़ें।
प्रोडक्शन-ग्रेड React फ्रेमवर्क्स
ये फ्रेमवर्क्स उन सभी सुविधाओं का समर्थन करते हैं जिनकी आपको अपने ऐप को प्रोडक्शन में तैनात और स्केल करने की आवश्यकता है और यह हमारे फुल-स्टैक आर्किटेक्चर विजन. का समर्थन करने की दिशा में काम कर रहे हैं। हम जिन फ्रेमवर्क्स की सिफारिश करते हैं, वे सभी ओपन सोर्स हैं जिनके सक्रिय समुदाय हैं, और इन्हें आपके अपने सर्वर या किसी होस्टिंग प्रोवाइडर पर तैनात किया जा सकता है। यदि आप एक फ्रेमवर्क लेखक हैं और इस सूची में शामिल होने में रुचि रखते हैं, तो कृपया हमें बताएं।.
Next.js
Next.js’ पेजेस राउटर एक फुल-स्टैक React फ्रेमवर्क है। यह बहुपरकारी है और आपको किसी भी आकार के React ऐप्स बनाने की अनुमति देता है— एक मुख्यतः स्थिर ब्लॉग से लेकर एक जटिल डायनामिक एप्लिकेशन तक। नया Next.js प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में यह कमांड चलाएं:
अगर आप Next.js में नए हैं, तो learn Next.js कोर्स को देखें।
Next.js को Vercel द्वारा मेंटेन किया जाता है। आप Next.js ऐप को किसी भी Node.js या सर्वरलेस होस्टिंग पर या अपने सर्वर पर तैनात कर सकते हैं। Next.js एक स्टैटिक एक्सपोर्ट भी समर्थन करता है, जिसके लिए सर्वर की आवश्यकता नहीं होती।
Remix
Remix एक फुल-स्टैक React फ्रेमवर्क है जिसमें नेस्टेड राउटिंग है। यह आपको आपके ऐप को नेस्टेड हिस्सों में विभाजित करने की अनुमति देता है जो समानांतर में डेटा लोड कर सकते हैं और उपयोगकर्ता क्रियाओं के जवाब में रिफ्रेश हो सकते हैं। नया Remix प्रोजेक्ट बनाने के लिए, यह कमांड चलाएं:
अगर आप Remix में नए हैं, तो Remix के ब्लॉग ट्यूटोरियल (संक्षिप्त) और ऐप ट्यूटोरियल (सम्पूर्ण) को देखें।
Remix को Shopify द्वारा मेंटेन किया जाता है। जब आप एक Remix प्रोजेक्ट बनाते हैं, तो आपको अपना डिप्लॉयमेंट टारगेट चुनना होता है। आप Remix ऐप को किसी भी Node.js या सर्वरलेस होस्टिंग पर तैनात कर सकते हैं, इसके लिए एडेप्टर का उपयोग करके या उसे लिखकर।
Gatsby
Gatsby एक React फ्रेमवर्क है जो तेज़ CMS-बैक्ड वेबसाइट्स के लिए है। इसका समृद्ध प्लगइन पारिस्थितिकी तंत्र और इसका GraphQL डेटा लेयर कंटेंट, APIs, और सेवाओं को एक वेबसाइट में एकीकृत करना सरल बनाते हैं। नया Gatsby प्रोजेक्ट बनाने के लिए, यह कमांड चलाएं:
अगर आप Gatsby में नए हैं, तो Gatsby ट्यूटोरियल देखें।
Gatsby को Netlify द्वारा मेंटेन किया जाता है। आप किसी भी स्टैटिक होस्टिंग पर पूर्ण रूप से स्टैटिक Gatsby साइट तैनात कर सकते हैं। यदि आप केवल सर्वर-विशेष सुविधाओं का उपयोग करते हैं, तो सुनिश्चित करें कि आपका होस्टिंग प्रोवाइडर उन सुविधाओं का समर्थन करता हो।
Expo (नेटिव ऐप्स के लिए)
Expo एक React फ्रेमवर्क है जो आपको यूनिवर्सल Android, iOS, और वेब ऐप्स बनाने की अनुमति देता है, जिनमें सच्ची नेटिव UI होती है। यह React Native के लिए एक SDK प्रदान करता है जो नेटिव हिस्सों का उपयोग करना आसान बनाता है। नया Expo प्रोजेक्ट बनाने के लिए, यह कमांड चलाएं:
अगर आप Expo में नए हैं, तो Expo ट्यूटोरियल देखें।
Expo को Expo (कंपनी) द्वारा मेंटेन किया जाता है। Expo के साथ ऐप्स बनाना मुफ्त है, और आप इन्हें बिना किसी प्रतिबंध के Google और Apple ऐप स्टोर्स में सबमिट कर सकते हैं। Expo अतिरिक्त रूप से ऑप्ट-इन भुगतान वाले क्लाउड सेवाएँ प्रदान करता है।
ब्लीडिंग-एज React फ्रेमवर्क्स
जैसा कि हम React को बेहतर बनाने के तरीकों की खोज कर रहे हैं, हमें यह एहसास हुआ कि React को फ्रेमवर्क्स के साथ (विशेष रूप से राउटिंग, बंडलिंग, और सर्वर तकनीकों के साथ) अधिक करीब से एकीकृत करना हमारे लिए React उपयोगकर्ताओं को बेहतर ऐप्स बनाने में मदद करने का सबसे बड़ा अवसर है। Next.js टीम ने हमारे साथ मिलकर, फ्रेमवर्क-agnostic ब्लीडिंग-एज React फीचर्स जैसे React Server Components पर रिसर्च, डेवलपमेंट, एकीकरण और परीक्षण में सहयोग करने पर सहमति जताई है।
ये फीचर्स हर दिन प्रोडक्शन-तैयार होने के करीब आ रहे हैं, और हम अन्य बंडलर और फ्रेमवर्क डेवलपर्स के साथ इनका एकीकरण करने पर बात कर रहे हैं। हमारी उम्मीद है कि एक या दो साल में, इस पृष्ठ पर सूचीबद्ध सभी फ्रेमवर्क्स इन फीचर्स के लिए पूर्ण समर्थन प्रदान करेंगे। (यदि आप एक फ्रेमवर्क लेखक हैं जो इन फीचर्स के साथ प्रयोग करने के लिए हमारे साथ साझेदारी करने में रुचि रखते हैं, तो कृपया हमें बताएं!)
Next.js (ऐप राउटर)
Next.js का ऐप राउटर Next.js APIs का एक नया डिज़ाइन है, जिसका उद्देश्य React टीम की फुल-स्टैक आर्किटेक्चर विजन को पूरा करना है। यह आपको सर्वर पर या यहां तक कि बिल्ड के दौरान चलने वाले असिंक्रोनस कंपोनेंट्स में डेटा को लाने की अनुमति देता है।
Next.js को Vercel द्वारा मेंटेन किया जाता है। आप Next.js ऐप को किसी भी Node.js या सर्वरलेस होस्टिंग पर या अपने खुद के सर्वर पर डिप्लॉय कर सकते हैं। Next.js स्टैटिक एक्सपोर्ट भी सपोर्ट करता है, जो सर्वर की आवश्यकता
Deep Dive
Next.js का App Router bundler आधिकारिक React सर्वर कंपोनेंट्स विनिर्देश को पूरी तरह से लागू करता है। इससे आप एक ही React ट्री में बिल्ड-टाइम, सर्वर-केवल, और इंटरएक्टिव कंपोनेंट्स को मिला सकते हैं।
उदाहरण के लिए, आप एक सर्वर-केवल React कंपोनेंट लिख सकते हैं जो एक async फ़ंक्शन के रूप में होता है, जो डेटाबेस या फ़ाइल से पढ़ता है। फिर आप इसे से डेटा को अपने इंटरएक्टिव कंपोनेंट्स तक भेज सकते हैं।
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });
// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);
// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}Next.js का App Router डेटा फ़ेचिंग को सस्पेंस के साथ भी इंटीग्रेट करता है। इससे आप अपने उपयोगकर्ता इंटरफ़ेस के विभिन्न भागों के लिए लोडिंग स्टेट (जैसे कि एक स्केलेटन प्लेसहोल्डर) को सीधे अपने React ट्री में निर्दिष्ट कर सकते हैं।
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>सर्वर कंपोनेंट्स और सस्पेंस React की विशेषताएँ हैं, न कि Next.js की। हालांकि, इन्हें फ्रेमवर्क स्तर पर अपनाने के लिए सहमति और महत्वपूर्ण कार्यान्वयन की आवश्यकता होती है। इस समय, Next.js App Router सबसे पूरी तरह से लागू की गई कार्यान्वयन है। React टीम इन सुविधाओं को अगली पीढ़ी के फ्रेमवर्क्स में लागू करना आसान बनाने के लिए बंडलर डेवलपर्स के साथ काम कर रही है।