React ऐप बनाना

अगर आपके ऐप की ज़रूरतें किसी मौजूदा फ्रेमवर्क से अच्छी तरह पूरी नहीं हो पा रही हैं, आप अपना खुद का फ्रेमवर्क बनाना चाहते हैं, या आप सिर्फ React ऐप की बुनियादी चीज़ें सीखना चाहते हैं, तो आप शुरू से एक React ऐप बनाना सीख सकते हैं।

फुल-स्टैक फ्रेमवर्क्स

ये सुझाए गए फ्रेमवर्क्स वे सभी फ़ीचर्स सपोर्ट करते हैं जो आपकी ऐप को प्रोडक्शन में डिप्लॉय और स्केल करने के लिए ज़रूरी होते हैं। इनमें React के लेटेस्ट फ़ीचर्स इंटीग्रेट किए गए हैं और ये React की संरचना (architecture) का पूरा फ़ायदा उठाते हैं।

Next.js का App Router

Next.js का App Router एक React फ्रेमवर्क है जो React की आर्किटेक्चर का पूरा फ़ायदा उठाकर फुल-स्टैक React ऐप्स बनाने की सुविधा देता है।

Next.js को Vercel द्वारा बनाए और मेंटेन किया जाता है। आप किसी भी Node.js या बिना सर्वर के (serverless) होस्टिंग पर, या अपने खुद के सर्वर पर Next.js ऐप को डिप्लॉय कर सकते हैं। Next.js static export को भी सपोर्ट करता है, जिसे सर्वर की ज़रूरत नहीं होती। Vercel अतिरिक्त रूप से चयन करने योग्य (ऑप्ट-इन) पेड क्लाउड सेवाएं भी प्रदान करता है।

React Router (संस्करण 7)

React Router के लिए सबसे लोकप्रिय राउटिंग लाइब्रेरी है और इसे Vite के साथ जोड़कर एक फुल-स्टैक React फ्रेमवर्क बनाया जा सकता है। यह मानक Web API पर ज़ोर देता है और विभिन्न JavaScript रनटाइम और प्लेटफार्म्स के लिए तैयार-डिप्लॉय टेम्प्लेट प्रदान करता है।

नया React Router फ्रेमवर्क प्रोजेक्ट बनाने के लिए यह कमांड चलाएँ:

React Router को Shopify द्वारा मेंटेन किया जाता है।

Expo (नेटिव ऐप्स के लिए)

Expo एक React फ्रेमवर्क है जो आपको Android, iOS और Web के लिए यूनिवर्सल ऐप्स बनाने की सुविधा देता है, वो भी असली नेटिव UI के साथ। यह React Native के लिए एक SDK प्रदान करता है, जिससे नेटिव पार्ट्स का उपयोग करना आसान हो जाता है। नया Expo प्रोजेक्ट बनाने के लिए यह कमांड चलाएँ:

अगर आप Expo में नए हैं, तो Expo ट्यूटोरियल जरूर देखें।

Expo को Expo (कंपनी) द्वारा मेंटेन किया जाता है। Expo के साथ ऐप बनाना फ्री है, और आप इन ऐप्स को बिना किसी रोक-टोक के Google और Apple के ऐप स्टोर में सबमिट कर सकते हैं। Expo कुछ ऑप्शनल पेड क्लाउड सेवाएं भी देता है, जिन्हें आप अपनी ज़रूरत के हिसाब से चुन सकते हैं।

अन्य फ्रेमवर्क्स

कुछ और नए-नए फ्रेमवर्क्स हैं जो React टीम के फुल-स्टैक विज़न को पूरा करने की दिशा में काम कर रहे हैं:

• TanStack Start (Beta): TanStack Start एक फुल-स्टैक React फ्रेमवर्क है जो TanStack Router पर आधारित है। यह Nitro और Vite जैसे टूल्स का इस्तेमाल कर फुल-डॉक्यूमेंट SSR, स्ट्रीमिंग, सर्वर फंक्शन्स, और बंडलिंग जैसी सुविधाएं देता है।
• RedwoodJS: RedwoodJS एक फुल-स्टैक React फ्रेमवर्क है जिसमें बहुत सारे पैकेज और सेटअप पहले से मौजूद होते हैं, जिससे फुल-स्टैक वेब ऐप बनाना आसान हो जाता है।

// 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} />;
}

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

शुरुआत से शुरू करें (Start From Scratch)

अगर आपकी ऐप की ज़रूरतें ऐसे फ्रेमवर्क्स से पूरी नहीं हो पा रही हैं जो पहले से मौजूद हैं, या आप अपना खुद का फ्रेमवर्क बनाना चाहते हैं, या बस React ऐप के बेसिक्स सीखना चाहते हैं — तो आपके पास शुरुआत से एक React प्रोजेक्ट बनाने के कुछ और विकल्प भी हैं।

शुरुआत से बनाना आपको ज़्यादा फ्लेक्सिबिलिटी देता है, लेकिन इसके साथ आपको यह भी तय करना पड़ता है कि राउटिंग, डेटा फेचिंग और बाकी कॉमन फीचर्स के लिए कौन-से टूल्स का इस्तेमाल करें। यह ठीक वैसा ही है जैसे आप खुद का फ्रेमवर्क बना रहे हों, बजाय इसके कि कोई पहले से बना हुआ फ्रेमवर्क लें। हम जो फ्रेमवर्क्स सजेस्ट करते हैं उनमें ये समस्याओं के लिए पहले से ही (built-in) समाधान मौजूद होते हैं।

अगर आप अपने खुद के समाधान बनाना चाहते हैं, तो हमारा गाइड देखें: React ऐप को शुरुआत से कैसे बनाएं इसमें Vite, Parcel, या RSbuild जैसे टूल्स से प्रोजेक्ट सेटअप करने की जानकारी दी गई है।

अगर आप कोई फ्रेमवर्क बना रहे हैं और इस पेज पर शामिल होना चाहते हैं, तो कृपया हमें बताएं.।