एक नया React प्रोजेक्ट प्रारंभ करें

यदि आप पूरी तरह से React के साथ एक नया ऐप या एक नई वेबसाइट बनाना चाहते हैं, तो हम समुदाय में लोकप्रिय React-संचालित फ्रेमवर्क में से एक को चुनने की सलाह देते हैं। फ़्रेमवर्क ऐसी सुविधाएँ प्रदान करते हैं जिनकी अधिकांश ऐप्स और साइटों को अंततः आवश्यकता होती है, जिसमें रूटिंग, डेटा फ़ेचिंग और HTML जनरेट करना शामिल है।

Note

आपको इंस्टॉल करना होगा Node.js स्थानीय विकास के लिए। आप भी उत्पादन में Node.js का उपयोग करना चुन सकते हैं, लेकिन आपको ऐसा करने की ज़रूरत नहीं है। कई रिएक्ट फ्रेमवर्क स्टैटिक में निर्यात का समर्थन करते हैं HTML/CSS/JS folder.

प्रोडक्शन-ग्रेड रिएक्ट फ्रेमवर्क

Next.js

Next.js एक पूर्ण-स्टैक रिएक्ट फ्रेमवर्क है। यह बहुमुखी है और आपको किसी भी आकार के रिएक्ट ऐप्स बनाने की सुविधा देता है - ज्यादातर स्थिर ब्लॉग से लेकर जटिल गतिशील एप्लिकेशन तक . एक नया Next.js प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में चलाएँ:

Terminal

npx create-next-app

यदि आप Next.js में नए हैं, तो Next.js ट्यूटोरियल देखें।

Next.js का रखरखाव Vercel द्वारा किया जाता है। आप किसी भी Node.js या सर्वर रहित होस्टिंग, या अपने स्वयं के सर्वर पर [Next.js ऐप तैनात] (https://nextjs.org/docs/deployment) कर सकते हैं। पूरी तरह से स्थिर Next.js ऐप्स को किसी भी स्थिर होस्टिंग पर तैनात किया जा सकता है।

Remix

Remix नेस्टेड रूटिंग के साथ एक फुल-स्टैक रिएक्ट फ्रेमवर्क है. यह आपको अपने ऐप को नेस्टेड भागों में तोड़ने की सुविधा देता है जो समानांतर में डेटा लोड कर सकता है और उपयोगकर्ता की गतिविधियों के जवाब में ताज़ा कर सकता है. एक नया रीमिक्स प्रोजेक्ट बनाने के लिए चलाएँ:

Terminal

npx create-remix

यदि आप रीमिक्स में नए हैं, तो रीमिक्स देखें ब्लॉग ट्यूटोरियल (short) और ऐप ट्यूटोरियल (long).

रीमिक्स का रखरखाव किया जाता है Shopify. जब आप रीमिक्स प्रोजेक्ट बनाते हैं, तो आपको इसकी आवश्यकता होती है pick your deployment target. आप इसका उपयोग करके या लिखकर किसी भी Node.js या सर्वर रहित होस्टिंग पर रीमिक्स ऐप को तैनात कर सकते हैं adapter.

Gatsby

Gatsby तेज़ CMS-समर्थित वेबसाइटों के लिए एक रिएक्ट फ्रेमवर्क है।. इसका समृद्ध प्लगइन इकोसिस्टम और इसकी ग्राफक्यूएल डेटा परत सामग्री, एपीआई और सेवाओं को एक वेबसाइट में एकीकृत करना आसान बनाती है।. एक नया गैट्सबी प्रोजेक्ट बनाने के लिए, चलाएँ:

Terminal

npx create-gatsby

यदि आप गैट्सबी में नए हैं, तो इसे देखें गैट्सबी ट्यूटोरियल.

गैट्सबी द्वारा बनाए रखा जाता है Netlify. तुम कर सकते हो पूरी तरह से स्थिर गैट्सबी साइट तैनात करें किसी भी स्थिर होस्टिंग के लिए. यदि आप केवल सर्वर सुविधाओं का उपयोग करने का विकल्प चुनते हैं, तो सुनिश्चित करें कि आपका होस्टिंग प्रदाता गैट्सबी के लिए उनका समर्थन करता है.

Expo (for native apps)

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

Terminal

npx create-expo-app

यदि आप एक्सपो में नए हैं, तो इसे देखें एक्सपो ट्यूटोरियल.

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

Deep Dive

क्या मैं बिना फ्रेमवर्क के रिएक्ट का उपयोग कर सकता हूँ?

आप निश्चित रूप से बिना किसी ढांचे के रिएक्ट का उपयोग कर सकते हैं—आप ऐसा ही करेंगे अपने पेज के एक भाग के लिए रिएक्ट का उपयोग करें। हालाँकि, यदि आप पूरी तरह से रिएक्ट के साथ एक नया ऐप या साइट बना रहे हैं, तो हम एक फ्रेमवर्क का उपयोग करने की सलाह देते हैं।

उसकी वजह यहाँ है।

भले ही आपको शुरुआत में रूटिंग या डेटा फ़ेचिंग की आवश्यकता न हो, आप संभवतः उनके लिए कुछ लाइब्रेरी जोड़ना चाहेंगे। जैसे-जैसे आपका जावास्क्रिप्ट बंडल हर नई सुविधा के साथ बढ़ता है, आपको यह पता लगाना होगा कि प्रत्येक रूट के लिए कोड को अलग-अलग कैसे विभाजित किया जाए। जैसे-जैसे आपकी डेटा प्राप्त करने की आवश्यकताएं अधिक जटिल होती जाती हैं, आपको सर्वर-क्लाइंट नेटवर्क झरनों का सामना करने की संभावना होती है जो आपके ऐप को बहुत धीमा महसूस कराते हैं। चूंकि आपके दर्शकों में खराब नेटवर्क स्थितियों और कम-एंड डिवाइस वाले अधिक उपयोगकर्ता शामिल हैं, इसलिए आपको सामग्री को जल्दी प्रदर्शित करने के लिए अपने घटकों से HTML उत्पन्न करने की आवश्यकता हो सकती है - या तो सर्वर पर, या निर्माण समय के दौरान। सर्वर पर या बिल्ड के दौरान अपना कुछ कोड चलाने के लिए अपना सेटअप बदलना बहुत मुश्किल हो सकता है।

ये समस्याएँ प्रतिक्रिया-विशिष्ट नहीं हैं। यही कारण है कि Svelte के पास SvelteKit है, Vue के पास Nuxt है, इत्यादि। इन समस्याओं को स्वयं हल करने के लिए, आपको अपने बंडलर को अपने राउटर और अपनी डेटा फ़ेचिंग लाइब्रेरी के साथ एकीकृत करना होगा। आरंभिक सेटअप को कार्यान्वित करना कठिन नहीं है, लेकिन एक ऐप बनाने में कई बारीकियां शामिल होती हैं जो समय के साथ बढ़ने के बावजूद तेजी से लोड होती हैं। आप न्यूनतम मात्रा में ऐप कोड भेजना चाहेंगे, लेकिन पेज के लिए आवश्यक किसी भी डेटा के समानांतर, एकल क्लाइंट-सर्वर राउंडट्रिप में ऐसा करें। प्रगतिशील वृद्धि का समर्थन करने के लिए, आप संभवतः चाहेंगे कि आपका जावास्क्रिप्ट कोड चलने से पहले ही पेज इंटरैक्टिव हो जाए। हो सकता है कि आप अपने मार्केटिंग पेजों के लिए पूरी तरह से स्थिर HTML फ़ाइलों का एक फ़ोल्डर बनाना चाहें, जिन्हें कहीं भी होस्ट किया जा सके और फिर भी जावास्क्रिप्ट अक्षम के साथ काम किया जा सके। इन क्षमताओं का निर्माण स्वयं करने के लिए वास्तविक कार्य की आवश्यकता होती है।

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

यदि आप अभी भी आश्वस्त नहीं हैं, या आपके ऐप में असामान्य बाधाएं हैं जो इन फ़्रेमवर्क द्वारा अच्छी तरह से काम नहीं करती हैं और आप अपना स्वयं का कस्टम सेटअप रोल करना चाहते हैं, तो हम आपको रोक नहीं सकते - ऐसा करें! Grab react and react-dom from npm, जैसे बंडलर के साथ अपनी कस्टम बिल्ड प्रक्रिया सेट करें Vite or Parcel, और रूटिंग, स्टैटिक जेनरेशन या सर्वर-साइड रेंडरिंग और बहुत कुछ के लिए आवश्यकतानुसार अन्य टूल जोड़ें।

ब्लीडिंग-एज रिएक्ट फ्रेमवर्क

जैसा कि हमने पता लगाया है कि रिएक्ट में सुधार कैसे जारी रखा जाए, हमने महसूस किया कि रिएक्ट को फ्रेमवर्क (विशेष रूप से, रूटिंग, बंडलिंग और सर्वर प्रौद्योगिकियों के साथ) के साथ अधिक निकटता से एकीकृत करना रिएक्ट उपयोगकर्ताओं को बेहतर ऐप बनाने में मदद करने का हमारा सबसे बड़ा अवसर है। नेक्स्ट.जेएस टीम फ्रेमवर्क-अज्ञेयवादी ब्लीडिंग-एज रिएक्ट सुविधाओं के शोध, विकास, एकीकरण और परीक्षण में हमारे साथ सहयोग करने के लिए सहमत हो गई है। React Server Components.

ये सुविधाएं हर दिन उत्पादन के लिए तैयार होने के करीब पहुंच रही हैं, और हम उन्हें एकीकृत करने के बारे में अन्य बंडलर और फ्रेमवर्क डेवलपर्स के साथ बातचीत कर रहे हैं। हमारी आशा है कि एक या दो साल में, इस पृष्ठ पर सूचीबद्ध सभी रूपरेखाओं को इन सुविधाओं के लिए पूर्ण समर्थन प्राप्त होगा। (यदि आप एक फ्रेमवर्क लेखक हैं और इन सुविधाओं के साथ प्रयोग करने के लिए हमारे साथ साझेदारी करने में रुचि रखते हैं, तो कृपया हमें बताएं!)

Next.js (App Router)

Next.js’s App Router नेक्स्ट.जेएस एपीआई का एक नया स्वरूप है जिसका लक्ष्य रिएक्ट टीम के फुल-स्टैक आर्किटेक्चर दृष्टिकोण को पूरा करना है। यह आपको सर्वर पर या यहां तक कि निर्माण के दौरान चलने वाले अतुल्यकालिक घटकों में डेटा लाने की सुविधा देता है।

Next.js द्वारा बनाए रखा जाता है वर्सेल. तुम कर सकते हो Next.js ऐप तैनात करें किसी भी Node.js या सर्वर रहित होस्टिंग, या अपने स्वयं के सर्वर पर. Next.js भी सपोर्ट करता है static export जिसके लिए सर्वर की आवश्यकता नहीं है.

Pitfall

Next.js का ऐप राउटर है currently in beta and is not yet recommended for production (as of Mar 2023). मौजूदा Next.js प्रोजेक्ट में इसका प्रयोग करने के लिए, इस वृद्धिशील माइग्रेशन मार्गदर्शिका का पालन करें.

Deep Dive

कौन सी विशेषताएँ रिएक्ट टीम की पूर्ण-स्टैक आर्किटेक्चर दृष्टि का निर्माण करती हैं?

Next.js का ऐप राउटर बंडलर पूरी तरह से आधिकारिक कार्यान्वयन करता है React Server Components specification. यह आपको बिल्ड-टाइम, सर्वर-ओनली और इंटरैक्टिव घटकों को एक ही रिएक्ट ट्री में मिलाने देता है.

उदाहरण के लिए, आप केवल-सर्वर रिएक्ट घटक को एक के रूप में लिख सकते हैं async फ़ंक्शन जो डेटाबेस से या फ़ाइल से पढ़ता है. फिर आप इससे डेटा को अपने इंटरैक्टिव घटकों तक भेज सकते हैं:

// यह घटक *केवल* सर्वर पर चलता है (या निर्माण के दौरान).

async function Talks({ confId }) {

  // 1. आप सर्वर पर हैं, इसलिए आप अपने डेटा स्तर से बात कर सकते हैं. एपीआई समापन बिंदु की आवश्यकता नहीं है.

  const talks = await db.Talks.findAll({ confId });



  // 2. किसी भी मात्रा में प्रतिपादन तर्क जोड़ें. यह आपके JavaScript बंडल को बड़ा नहीं बनाएगा.

  const videos = talks.map(talk => talk.video);



  // 3. डेटा को उन घटकों तक पहुँचाएँ जो ब्राउज़र में चलेंगे.

  return <SearchableVideoList videos={videos} />;

}

Next.js का ऐप राउटर भी एकीकृत होता है सस्पेंस के साथ डेटा प्राप्त करना. यह आपको एक लोडिंग स्थिति निर्दिष्ट करने देता है (एक कंकाल प्लेसहोल्डर की तरह) आपके उपयोगकर्ता इंटरफ़ेस के विभिन्न भागों के लिए सीधे आपके रिएक्ट ट्री में:

<Suspense fallback={<TalksLoading />}>

  <Talks confId={conf.id} />

</Suspense>

सर्वर कंपोनेंट्स और सस्पेंस नेक्स्ट.जेएस फीचर्स के बजाय रिएक्ट फीचर्स हैं। हालाँकि, उन्हें फ्रेमवर्क स्तर पर अपनाने के लिए खरीद-फरोख्त और गैर-तुच्छ कार्यान्वयन कार्य की आवश्यकता होती है। फिलहाल, नेक्स्ट.जेएस ऐप राउटर सबसे पूर्ण कार्यान्वयन है। अगली पीढ़ी के फ्रेमवर्क में इन सुविधाओं को लागू करना आसान बनाने के लिए रिएक्ट टीम बंडलर डेवलपर्स के साथ काम कर रही है।

PreviousInstallation NextAdd React to an Existing Project