एक नया React प्रोजेक्ट शुरू करें
यदि आप एक नया ऐप या वेबसाइट पूरी तरह से React के साथ बनाना चाहते हैं, तो हम आपको समुदाय में लोकप्रिय React-शक्ति प्राप्त फ्रेमवर्क में से एक चुनने की सलाह देते हैं।
आप React का उपयोग बिना किसी फ्रेमवर्क के भी कर सकते हैं, हालांकि हमने पाया है कि अधिकांश ऐप्स और साइट्स अंततः सामान्य समस्याओं जैसे कोड-स्प्लिटिंग, राउटिंग, डेटा फ़ेचिंग, और HTML जनरेट करने के लिए समाधान बनाते हैं। ये समस्याएँ सभी UI लाइब्रेरीज़ के लिए सामान्य हैं, केवल React के लिए नहीं।
फ्रेमवर्क के साथ शुरुआत करने से, आप React के साथ जल्दी से शुरुआत कर सकते हैं, और बाद में अपना खुद का फ्रेमवर्क बनाने से बच सकते हैं।
Deep Dive
आप निश्चित रूप से React का उपयोग बिना किसी फ्रेमवर्क के कर सकते हैं—यह वही तरीका है जिसका आप एक पेज के कुछ हिस्से के लिए React का उपयोग करेंगे। हालांकि, यदि आप एक नया ऐप या साइट पूरी तरह से React के साथ बना रहे हैं, तो हम एक फ्रेमवर्क का उपयोग करने की सलाह देते हैं।
यहाँ कारण है।
चाहे आपको शुरुआत में राउटिंग या डेटा फ़ेचिंग की आवश्यकता न हो, आप संभवतः उनके लिए कुछ लाइब्रेरी जोड़ना चाहेंगे। जैसे-जैसे आपका JavaScript बंडल हर नई विशेषता के साथ बढ़ता है, आपको प्रत्येक रूट के लिए कोड को स्प्लिट करने का तरीका खोजना पड़ सकता है। जैसे-जैसे आपके डेटा फ़ेचिंग की ज़रूरतें जटिल होती हैं, आपको सर्वर-क्लाइंट नेटवर्क वॉटरफॉल का सामना करना पड़ सकता है जो आपके ऐप को बहुत धीमा महसूस कराएगा। जैसे-जैसे आपके दर्शकों में अधिक उपयोगकर्ता आते हैं जिनकी नेटवर्क स्थितियाँ और कम-एंड डिवाइस हैं, आपको अपने घटकों से HTML जनरेट करने की आवश्यकता हो सकती है ताकि कंटेंट जल्दी से दिखाया जा सके—या तो सर्वर पर, या बिल्ड समय के दौरान। इस सेटअप को बदलना ताकि आप अपना कुछ कोड सर्वर पर या बिल्ड के दौरान चला सकें, बहुत जटिल हो सकता है।
यह समस्याएँ React-विशिष्ट नहीं हैं। यही कारण है कि Svelte के पास SvelteKit है, Vue के पास Nuxt है, और इसी तरह। इन समस्याओं को स्वयं हल करने के लिए, आपको अपने बंडलर को अपने राउटर और डेटा फ़ेचिंग लाइब्रेरी के साथ जोड़ने की आवश्यकता होगी। एक प्रारंभिक सेटअप को काम में लाना मुश्किल नहीं है, लेकिन जब आपका ऐप समय के साथ बढ़ता है, तो यह सुनिश्चित करना कि यह जल्दी लोड हो, में कई बारीकियाँ शामिल हैं। आप शायद ऐप को न्यूनतम कोड भेजना चाहेंगे लेकिन यह एक ही क्लाइंट-सरवर राउंडट्रिप में हो, साथ ही पेज के लिए आवश्यक डेटा भी। आप शायद पेज को आपके JavaScript कोड चलने से पहले इंटरएक्टिव बनाना चाहेंगे, ताकि प्रोग्रेसिव एन्हांसमेंट को समर्थन मिल सके। आप अपनी मार्केटिंग पृष्ठों के लिए पूरी तरह से स्थैतिक HTML फ़ाइलों का एक फ़ोल्डर जनरेट करना चाह सकते हैं, जिन्हें कहीं भी होस्ट किया जा सकता है और फिर भी JavaScript अक्षम होने पर काम करता है। इन क्षमताओं को स्वयं बनाना असली काम है।
इस पृष्ठ पर React फ्रेमवर्क इन समस्याओं को डिफ़ॉल्ट रूप से हल करते हैं, आपके द्वारा अतिरिक्त कार्य किए बिना। वे आपको बहुत हल्के से शुरुआत करने और फिर अपनी आवश्यकताओं के अनुसार अपने ऐप को स्केल करने की अनुमति देते हैं। प्रत्येक React फ्रेमवर्क का एक समुदाय होता है, जिससे सवालों के जवाब ढूंढना और टूलिंग को अपग्रेड करना आसान होता है। फ्रेमवर्क भी आपके कोड को संरचना प्रदान करते हैं, जिससे आप और अन्य लोग विभिन्न परियोजनाओं के बीच संदर्भ और कौशल बनाए रख सकते हैं। इसके विपरीत, एक कस्टम सेटअप के साथ यह आसान है कि आप अप्रतिबद्ध निर्भरता संस्करणों पर फंसे रहें, और आप अंततः अपना खुद का फ्रेमवर्क बना लेंगे—हालाँकि वह समुदाय या अपग्रेड पथ के बिना (और यदि यह हमारे द्वारा किए गए फ्रेमवर्क जैसा है, तो अधिक अव्यवस्थित डिज़ाइन के साथ)।
यदि आपके ऐप में ऐसी असामान्य बाधाएँ हैं जो इन फ्रेमवर्क्स द्वारा अच्छी तरह से सेवा नहीं दी जाती हैं, या आप इन समस्याओं को स्वयं हल करना पसंद करते हैं, तो आप React के साथ अपना खुद का कस्टम सेटअप बना सकते हैं। react और react-dom को npm से प्राप्त करें, अपना कस्टम बिल्ड प्रोसेस एक बंडलर जैसे Vite या Parcel के साथ सेट करें, और राउटिंग, स्थैतिक निर्माण या सर्वर-साइड रेंडरिंग, और अधिक के लिए अन्य उपकरण जोड़ें, जैसा कि आपको आवश्यकता हो।
प्रोडक्शन-ग्रेड React फ्रेमवर्क्स
ये फ्रेमवर्क्स सभी सुविधाओं का समर्थन करते हैं जिन्हें आपको अपने ऐप को प्रोडक्शन में तैनात करने और स्केल करने के लिए चाहिए और हमारे फुल-स्टैक आर्किटेक्चर विज़न का समर्थन करने की दिशा में काम कर रहे हैं। हम जो फ्रेमवर्क्स सुझाते हैं, वे सभी ओपन सोर्स हैं और समर्थन के लिए सक्रिय समुदाय हैं, और इन्हें आपके अपने सर्वर या होस्टिंग प्रदाता पर तैनात किया जा सकता है। यदि आप एक फ्रेमवर्क लेखक हैं और इस सूची में शामिल होने में रुचि रखते हैं, तो कृपया हमें बताएं.
Next.js
Next.js’ Pages Router एक फुल-स्टैक React फ्रेमवर्क है। यह बहु-उद्देश्यीय है और आपको किसी भी आकार के React ऐप्स बनाने की अनुमति देता है—जैसे एक मुख्य रूप से स्थैतिक ब्लॉग से लेकर एक जटिल डायनेमिक एप्लिकेशन तक। एक नया Next.js प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में चलाएँ:
यदि आप Next.js के लिए नए हैं, तो learn Next.js course देखें।
Next.js को Vercel द्वारा बनाए रखा जाता है। आप किसी भी Node.js या सर्वरलेस होस्टिंग पर या अपने सर्वर पर एक Next.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 साइट तैनात कर सकते हैं। यदि आप सर्वर-केवल सुविधाओं का उपयोग करते हैं, तो सुनिश्चित करें कि आपका होस्टिंग प्रदाता Gatsby के लिए उनका समर्थन करता है।
Expo (नैटिव ऐप्स के लिए)
Expo एक React फ्रेमवर्क है जो आपको Android, iOS, और वेब ऐप्स बनाने की अनुमति देता है जिनमें वास्तव में नैटिव UI होते हैं। यह एक SDK प्रदान करता है React Native के लिए जो नैटिव हिस्सों का उपयोग करना आसान बनाता है। एक नया Expo प्रोजेक्ट बनाने के लिए, चलाएँ:
यदि आप Expo के लिए नए हैं, तो Expo ट्यूटोरियल देखें।
Expo को Expo (कंपनी) द्वारा बनाए रखा जाता है। Expo के साथ ऐप्स बनाना मुफ्त है, और आप उन्हें Google और Apple ऐप स्टोर में बिना किसी प्रतिबंध के सबमिट कर सकते हैं। Expo अतिरिक्त रूप से ऑप्ट-इन भुगतान क्लाउड सेवाएँ प्रदान करता है।
Bleeding-edge React फ्रेमवर्क्स
जैसा कि हमने React को सुधारने के तरीकों का पता लगाया है, हमने महसूस किया कि React को फ्रेमवर्क्स (विशेष रूप से राउटिंग, बंडलिंग, और सर्वर प्रौद्योगिकियों) के साथ और अधिक निकटता से एकीकृत करना हमारे लिए React उपयोगकर्ताओं को बेहतर ऐप्स बनाने में मदद करने का सबसे बड़ा अवसर है। Next.js टीम ने React Server Components जैसे फ्रेमवर्क-एग्नोस्टिक bleeding-edge React फीचर्स पर शोध, विकास, एकीकरण और परीक्षण में हमारे साथ सहयोग करने पर सहमति व्यक्त की है।
यह विशेषताएँ प्रत्येक दिन प्रोडक्शन-रेडी होने के करीब हैं, और हम अन्य बंडलर और फ्रेमवर्क डेवलपर्स के साथ इनका एकीकरण करने के बारे में बातचीत कर रहे हैं। हमारी आशा है कि एक या दो साल में, इस पृष्ठ पर सूचीबद्ध सभी फ्रेमवर्क इन विशेषताओं के लिए पूरी तरह से समर्थन करेंगे। (यदि आप एक फ्रेमवर्क लेखक हैं और इन विशेषताओं के साथ प्रयोग करने के लिए हमारे साथ साझेदारी करना चाहते हैं, तो कृपया हमें बताएं!)
Next.js (App Router)
Next.js का App Router Next.js APIs का एक डिज़ाइन है जो React टीम के फुल-स्टैक आर्किटेक्चर विज़न को पूरा करता है। यह आपको सर्वर या बिल्ड के दौरान चलने वाले एसिंक्रोनस कंपोनेंट्स में डेटा फ़ेच करने की अनुमति देता है।
Next.js को Vercel द्वारा मेंटेन किया जाता है। आप किसी भी Node.js या सर्वरलेस होस्टिंग पर, या अपने खुद के सर्वर पर Next.js ऐप को डिप्लॉय कर सकते हैं। Next.js static export को भी सपोर्ट करता है, जिसे सर्वर की आवश्यकता नहीं होती।
Deep Dive
Next.js का ऐप राउटर bundler आधिकारिक React Server Components specification को पूरी तरह से लागू करता है। इससे आप एक ही 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 का ऐप राउटर Suspense के साथ डेटा फेचिंग भी इंटीग्रेट करता है। इससे आप अपने यूजर इंटरफेस के विभिन्न हिस्सों के लिए लोडिंग स्टेट (जैसे कि स्केलेटन प्लेसहोल्डर) को सीधे अपने React ट्री में निर्दिष्ट कर सकते हैं:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>सर्वर कम्पोनेंट्स और Suspense React की विशेषताएँ हैं, न कि Next.js की। हालांकि, इन्हें फ्रेमवर्क स्तर पर अपनाने के लिए सहमति और जटिल कार्यान्वयन की आवश्यकता होती है। वर्तमान में, Next.js का ऐप राउटर सबसे पूर्ण कार्यान्वयन है। React टीम इन विशेषताओं को अगले पीढ़ी के फ्रेमवर्क में लागू करना आसान बनाने के लिए बंडलर डेवलपर्स के साथ काम कर रही है।