diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index 7aa71efd2..a61d19942 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -8,7 +8,7 @@ All stable builds of React go through a high level of testing and follow semanti -For a list of previous releases, see the [Versions](/versions) page. +This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page. ## Stable releases {/*stable-releases*/} @@ -24,7 +24,9 @@ Major releases can also contain new features, and any release can include bug fi Minor releases are the most common type of release. -### Breaking Changes {/*breaking-changes*/} +We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability. + +### Breaking changes {/*breaking-changes*/} Breaking changes are inconvenient for everyone, so we try to minimize the number of major releases – for example, React 15 was released in April 2016 and React 16 was released in September 2017, and React 17 was released in October 2020. diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index ed6a90070..590a7fc91 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -45,7 +45,7 @@ title: किसी मौजूदा प्रोजेक्ट में Rea * **यदि आपका ऐप पहले से ही उन फ़ाइलों में विभाजित है जो `import` स्टेटमेंट का उपयोग करती हैं, तो,** आपके पास पहले से मौजूद सेटअप का उपयोग करने का प्रयास करें।जांचें कि क्या आपके JS कोड में `
` लिखना एक सिंटैक्स त्रुटि का कारण बनता है।यदि यह एक सिंटैक्स त्रुटि का कारण बनता है, तो आपको [बाबेल के साथ अपने जावास्क्रिप्ट कोड को बदलने की आवश्यकता हो सकती है](https://babeljs.io/setup),और JSX का उपयोग करने के लिए [बैबेल रिएक्ट प्रीसेट](https://babeljs.io/docs/babel-preset-react) को सक्षम करें। -* **यदि आपके ऐप में जावास्क्रिप्ट मॉड्यूल को संकलित करने के लिए मौजूदा सेटअप नहीं है, तो** इसे [VITE](https://vitejs.dev/) के साथ सेट करें। VITE समुदाय [बैकएंड फ्रेमवर्क के साथ कई एकीकरण](https://github.com/vitejs/awesome-vite#integrations-with-backends) को बनाए रखता है, जिसमें Rail, Django और Laravel शामिल हैं।यदि आपका बैकएंड फ्रेमवर्क सूचीबद्ध नहीं है, तो [इस गाइड का पालन करें](https://vitejs.dev/guide/backend-integration.html) मैन्युअल रूप से आपके बैकएंड के साथ VITE बिल्ड को एकीकृत करने के लिए। +* **यदि आपके ऐप में जावास्क्रिप्ट मॉड्यूल को संकलित करने के लिए मौजूदा सेटअप नहीं है, तो** इसे [Vite](https://vite.dev/) के साथ सेट करें। VITE समुदाय [बैकएंड फ्रेमवर्क के साथ कई एकीकरण](https://github.com/vitejs/awesome-vite#integrations-with-backends) को बनाए रखता है, जिसमें Rail, Django और Laravel शामिल हैं।यदि आपका बैकएंड फ्रेमवर्क सूचीबद्ध नहीं है, तो [इस गाइड का पालन करें](https://vitejs.dev/guide/backend-integration.html) मैन्युअल रूप से आपके बैकएंड के साथ VITE बिल्ड को एकीकृत करने के लिए। यह जांचने के लिए कि आपका सेटअप काम करता है, इस कमांड को अपने प्रोजेक्ट फ़ोल्डर में चलाएं: @@ -85,7 +85,7 @@ root.render(

Hello, world

); -पहली बार एक मौजूदा परियोजना में एक मॉड्यूलर जावास्क्रिप्ट वातावरण को एकीकृत करना डराने वाला महसूस कर सकता है, लेकिन यह इसके लायक है!यदि आप अटक जाते हैं, तो हमारे [सामुदायिक संसाधन](/community) या [Vite चैट](https://chat.vitejs.dev/) का प्रयास करें। +पहली बार एक मौजूदा परियोजना में एक मॉड्यूलर जावास्क्रिप्ट वातावरण को एकीकृत करना डराने वाला महसूस कर सकता है, लेकिन यह इसके लायक है!यदि आप अटक जाते हैं, तो हमारे [सामुदायिक संसाधन](/community) या [Vite चैट](https://chat.vite.dev/) का प्रयास करें। diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 072740174..134c50c88 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -1,95 +1,129 @@ --- -title: नया React प्रोजेक्ट शुरू करें +title: एक नया React प्रोजेक्ट शुरू करें --- -अगर आप पूरी तरह से React के साथ एक नया ऐप या वेबसाइट बनाना चाहते हैं, तो हम समुदाय में लोकप्रिय React-समर्थित फ्रेमवर्क में से एक चुनने की सलाह देते हैं। फ्रेमवर्क वे सुविधाएँ प्रदान करते हैं जिनकी ज्यादातर ऐप्स और साइट्स को अंततः आवश्यकता होती है, जैसे कि रूटिंग, डेटा फ़ेचिंग, और HTML जनरेशन। +यदि आप एक नया ऐप या वेबसाइट पूरी तरह से React के साथ बनाना चाहते हैं, तो हम आपको समुदाय में लोकप्रिय React-शक्ति प्राप्त फ्रेमवर्क में से एक चुनने की सलाह देते हैं। - +आप React का उपयोग बिना किसी फ्रेमवर्क के भी कर सकते हैं, हालांकि हमने पाया है कि अधिकांश ऐप्स और साइट्स अंततः सामान्य समस्याओं जैसे कोड-स्प्लिटिंग, राउटिंग, डेटा फ़ेचिंग, और HTML जनरेट करने के लिए समाधान बनाते हैं। ये समस्याएँ सभी UI लाइब्रेरीज़ के लिए सामान्य हैं, केवल React के लिए नहीं। -**स्थानीय विकास के लिए आपको [Node.js](https://nodejs.org/en/) इंस्टॉल करना होगा।** आप उत्पादन (production) में भी Node.js का उपयोग कर सकते हैं, लेकिन यह आवश्यक नहीं है। कई React फ्रेमवर्क एक स्टैटिक HTML/CSS/JS फ़ोल्डर में एक्सपोर्ट का समर्थन करते हैं। +फ्रेमवर्क के साथ शुरुआत करने से, आप React के साथ जल्दी से शुरुआत कर सकते हैं, और बाद में अपना खुद का फ्रेमवर्क बनाने से बच सकते हैं। - + + +#### क्या मैं React का उपयोग बिना किसी फ्रेमवर्क के कर सकता हूँ? {/*can-i-use-react-without-a-framework*/} + +आप निश्चित रूप से React का उपयोग बिना किसी फ्रेमवर्क के कर सकते हैं--यह वही तरीका है जिसका आप [एक पेज के कुछ हिस्से के लिए React का उपयोग करेंगे।](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) **हालांकि, यदि आप एक नया ऐप या साइट पूरी तरह से React के साथ बना रहे हैं, तो हम एक फ्रेमवर्क का उपयोग करने की सलाह देते हैं।** + +यहाँ कारण है। + +चाहे आपको शुरुआत में राउटिंग या डेटा फ़ेचिंग की आवश्यकता न हो, आप संभवतः उनके लिए कुछ लाइब्रेरी जोड़ना चाहेंगे। जैसे-जैसे आपका JavaScript बंडल हर नई विशेषता के साथ बढ़ता है, आपको प्रत्येक रूट के लिए कोड को स्प्लिट करने का तरीका खोजना पड़ सकता है। जैसे-जैसे आपके डेटा फ़ेचिंग की ज़रूरतें जटिल होती हैं, आपको सर्वर-क्लाइंट नेटवर्क वॉटरफॉल का सामना करना पड़ सकता है जो आपके ऐप को बहुत धीमा महसूस कराएगा। जैसे-जैसे आपके दर्शकों में अधिक उपयोगकर्ता आते हैं जिनकी नेटवर्क स्थितियाँ और कम-एंड डिवाइस हैं, आपको अपने घटकों से HTML जनरेट करने की आवश्यकता हो सकती है ताकि कंटेंट जल्दी से दिखाया जा सके--या तो सर्वर पर, या बिल्ड समय के दौरान। इस सेटअप को बदलना ताकि आप अपना कुछ कोड सर्वर पर या बिल्ड के दौरान चला सकें, बहुत जटिल हो सकता है। + +**यह समस्याएँ React-विशिष्ट नहीं हैं। यही कारण है कि Svelte के पास SvelteKit है, Vue के पास Nuxt है, और इसी तरह।** इन समस्याओं को स्वयं हल करने के लिए, आपको अपने बंडलर को अपने राउटर और डेटा फ़ेचिंग लाइब्रेरी के साथ जोड़ने की आवश्यकता होगी। एक प्रारंभिक सेटअप को काम में लाना मुश्किल नहीं है, लेकिन जब आपका ऐप समय के साथ बढ़ता है, तो यह सुनिश्चित करना कि यह जल्दी लोड हो, में कई बारीकियाँ शामिल हैं। आप शायद ऐप को न्यूनतम कोड भेजना चाहेंगे लेकिन यह एक ही क्लाइंट-सरवर राउंडट्रिप में हो, साथ ही पेज के लिए आवश्यक डेटा भी। आप शायद पेज को आपके JavaScript कोड चलने से पहले इंटरएक्टिव बनाना चाहेंगे, ताकि प्रोग्रेसिव एन्हांसमेंट को समर्थन मिल सके। आप अपनी मार्केटिंग पृष्ठों के लिए पूरी तरह से स्थैतिक HTML फ़ाइलों का एक फ़ोल्डर जनरेट करना चाह सकते हैं, जिन्हें कहीं भी होस्ट किया जा सकता है और फिर भी JavaScript अक्षम होने पर काम करता है। इन क्षमताओं को स्वयं बनाना असली काम है। + +**इस पृष्ठ पर React फ्रेमवर्क इन समस्याओं को डिफ़ॉल्ट रूप से हल करते हैं, आपके द्वारा अतिरिक्त कार्य किए बिना।** वे आपको बहुत हल्के से शुरुआत करने और फिर अपनी आवश्यकताओं के अनुसार अपने ऐप को स्केल करने की अनुमति देते हैं। प्रत्येक React फ्रेमवर्क का एक समुदाय होता है, जिससे सवालों के जवाब ढूंढना और टूलिंग को अपग्रेड करना आसान होता है। फ्रेमवर्क भी आपके कोड को संरचना प्रदान करते हैं, जिससे आप और अन्य लोग विभिन्न परियोजनाओं के बीच संदर्भ और कौशल बनाए रख सकते हैं। इसके विपरीत, एक कस्टम सेटअप के साथ यह आसान है कि आप अप्रतिबद्ध निर्भरता संस्करणों पर फंसे रहें, और आप अंततः अपना खुद का फ्रेमवर्क बना लेंगे—हालाँकि वह समुदाय या अपग्रेड पथ के बिना (और यदि यह हमारे द्वारा किए गए फ्रेमवर्क जैसा है, तो अधिक अव्यवस्थित डिज़ाइन के साथ)। + +यदि आपके ऐप में ऐसी असामान्य बाधाएँ हैं जो इन फ्रेमवर्क्स द्वारा अच्छी तरह से सेवा नहीं दी जाती हैं, या आप इन समस्याओं को स्वयं हल करना पसंद करते हैं, तो आप React के साथ अपना खुद का कस्टम सेटअप बना सकते हैं। `react` और `react-dom` को npm से प्राप्त करें, अपना कस्टम बिल्ड प्रोसेस एक बंडलर जैसे [Vite](https://vite.dev/) या [Parcel](https://parceljs.org/) के साथ सेट करें, और राउटिंग, स्थैतिक निर्माण या सर्वर-साइड रेंडरिंग, और अधिक के लिए अन्य उपकरण जोड़ें, जैसा कि आपको आवश्यकता हो। + + + +## प्रोडक्शन-ग्रेड React फ्रेमवर्क्स {/*production-grade-react-frameworks*/} -## प्रोडक्शन-ग्रेड React फ्रेमवर्क {/*production-grade-react-frameworks*/} +ये फ्रेमवर्क्स सभी सुविधाओं का समर्थन करते हैं जिन्हें आपको अपने ऐप को प्रोडक्शन में तैनात करने और स्केल करने के लिए चाहिए और हमारे [फुल-स्टैक आर्किटेक्चर विज़न](#which-features-make-up-the-react-teams-full-stack-architecture-vision) का समर्थन करने की दिशा में काम कर रहे हैं। हम जो फ्रेमवर्क्स सुझाते हैं, वे सभी ओपन सोर्स हैं और समर्थन के लिए सक्रिय समुदाय हैं, और इन्हें आपके अपने सर्वर या होस्टिंग प्रदाता पर तैनात किया जा सकता है। यदि आप एक फ्रेमवर्क लेखक हैं और इस सूची में शामिल होने में रुचि रखते हैं, तो [कृपया हमें बताएं](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). -### Next.js {/*nextjs*/} +### Next.js {/*nextjs-pages-router*/} -**[Next.js](https://nextjs.org/) एक फुल-स्टैक React फ्रेमवर्क है।** यह बहुपयोगी है और आपको किसी भी आकार के React ऐप्स बनाने की सुविधा देता है—एक ज्यादातर स्टैटिक ब्लॉग से लेकर एक जटिल डायनामिक एप्लिकेशन तक। एक नया Next.js प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में चलाएँ: +**[Next.js' Pages Router](https://nextjs.org/) एक फुल-स्टैक React फ्रेमवर्क है।** यह बहु-उद्देश्यीय है और आपको किसी भी आकार के React ऐप्स बनाने की अनुमति देता है--जैसे एक मुख्य रूप से स्थैतिक ब्लॉग से लेकर एक जटिल डायनेमिक एप्लिकेशन तक। एक नया Next.js प्रोजेक्ट बनाने के लिए, अपने टर्मिनल में चलाएँ: npx create-next-app@latest -अगर आप Next.js में नए हैं, तो [Next.js कोर्स](https://nextjs.org/learn) देखें। +यदि आप Next.js के लिए नए हैं, तो [learn Next.js course](https://nextjs.org/learn) देखें। -Next.js को [Vercel](https://vercel.com/) द्वारा मेंटेन किया जाता है। आप [Next.js ऐप को होस्ट कर सकते हैं](https://nextjs.org/docs/app/building-your-application/deploying) किसी भी Node.js या सर्वरलेस होस्टिंग पर, या अपने स्वयं के सर्वर पर। Next.js एक [स्टैटिक एक्सपोर्ट](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) भी सपोर्ट करता है, जो सर्वर की आवश्यकता नहीं रखता। +Next.js को [Vercel](https://vercel.com/) द्वारा बनाए रखा जाता है। आप किसी भी Node.js या सर्वरलेस होस्टिंग पर या अपने सर्वर पर एक Next.js ऐप को [तैनात कर सकते हैं](https://nextjs.org/docs/app/building-your-application/deploying). Next.js [स्थैतिक निर्यात](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) का भी समर्थन करता है, जिसे सर्वर की आवश्यकता नहीं होती है। ### Remix {/*remix*/} -**[Remix](https://remix.run/) एक फुल-स्टैक React फ्रेमवर्क है जिसमें नेस्टेड रूटिंग होती है।** यह आपको अपने ऐप को नेस्टेड हिस्सों में विभाजित करने की सुविधा देता है, जो डेटा को समानांतर में लोड कर सकते हैं और उपयोगकर्ता क्रियाओं के जवाब में रीफ्रेश हो सकते हैं। नया Remix प्रोजेक्ट बनाने के लिए चलाएँ: +**[Remix](https://remix.run/) एक फुल-स्टैक React फ्रेमवर्क है जिसमें नेस्टेड राउटिंग है।** यह आपको अपने ऐप को नेस्टेड हिस्सों में विभाजित करने की अनुमति देता है जो समानांतर में डेटा लोड कर सकते हैं और उपयोगकर्ता क्रियाओं के जवाब में ताजगी कर सकते हैं। एक नया Remix प्रोजेक्ट बनाने के लिए, चलाएँ: npx create-remix -अगर आप Remix में नए हैं, तो [ब्लॉग ट्यूटोरियल](https://remix.run/docs/en/main/tutorials/blog) (छोटा) और [ऐप ट्यूटोरियल](https://remix.run/docs/en/main/tutorials/jokes) (लंबा) देखें। +यदि आप Remix के लिए नए हैं, तो Remix के [ब्लॉग ट्यूटोरियल](https://remix.run/docs/en/main/tutorials/blog) (संक्षिप्त) और [ऐप ट्यूटोरियल](https://remix.run/docs/en/main/tutorials/jokes) (लंबा) देखें। -Remix को [Shopify](https://www.shopify.com/) द्वारा मेंटेन किया जाता है। जब आप एक Remix प्रोजेक्ट बनाते हैं, तो आपको एक [डिप्लॉयमेंट टार्गेट चुनना होगा](https://remix.run/docs/en/main/guides/deployment)। आप एक [एडॉप्टर](https://remix.run/docs/en/main/other-api/adapter) का उपयोग करके इसे किसी भी Node.js या सर्वरलेस होस्टिंग पर होस्ट कर सकते हैं। +Remix को [Shopify](https://www.shopify.com/) द्वारा बनाए रखा जाता है। जब आप एक Remix प्रोजेक्ट बनाते हैं, तो आपको [अपना तैनाती लक्ष्य चुनना होगा](https://remix.run/docs/en/main/guides/deployment). आप Remix ऐप को किसी भी Node.js या सर्वरलेस होस्टिंग पर तैनात कर सकते हैं या एक [एडेप्टर](https://remix.run/docs/en/main/other-api/adapter) का उपयोग करके या लिखकर। ### Gatsby {/*gatsby*/} -**[Gatsby](https://www.gatsbyjs.com/) एक React फ्रेमवर्क है जो तेज़ CMS-बेस्ड वेबसाइट्स बनाने के लिए उपयुक्त है।** इसका समृद्ध प्लगइन इकोसिस्टम और GraphQL डेटा लेयर सामग्री, API और सेवाओं को एक वेबसाइट में जोड़ना आसान बनाता है। नया Gatsby प्रोजेक्ट बनाने के लिए चलाएँ: +**[Gatsby](https://www.gatsbyjs.com/) एक React फ्रेमवर्क है जो तेज CMS-समर्थित वेबसाइटों के लिए है।** इसका समृद्ध प्लगइन इकोसिस्टम और इसका GraphQL डेटा लेयर सामग्री, APIs और सेवाओं को एक वेबसाइट में एकीकृत करना आसान बनाता है। एक नया Gatsby प्रोजेक्ट बनाने के लिए, चलाएँ: npx create-gatsby -अगर आप Gatsby में नए हैं, तो [Gatsby ट्यूटोरियल](https://www.gatsbyjs.com/docs/tutorial/) देखें। +यदि आप Gatsby के लिए नए हैं, तो [Gatsby ट्यूटोरियल](https://www.gatsbyjs.com/docs/tutorial/) देखें। -Gatsby को [Netlify](https://www.netlify.com/) द्वारा मेंटेन किया जाता है। आप [Gatsby साइट को पूरी तरह से स्टैटिक रूप में होस्ट कर सकते हैं](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting)। अगर आप सर्वर-साइड सुविधाओं का उपयोग करना चाहते हैं, तो सुनिश्चित करें कि आपका होस्टिंग प्रदाता उन्हें सपोर्ट करता है। +Gatsby को [Netlify](https://www.netlify.com/) द्वारा बनाए रखा जाता है। आप [किसी भी स्थैतिक होस्टिंग](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting) पर पूरी तरह से स्थैतिक Gatsby साइट तैनात कर सकते हैं। यदि आप सर्वर-केवल सुविधाओं का उपयोग करते हैं, तो सुनिश्चित करें कि आपका होस्टिंग प्रदाता Gatsby के लिए उनका समर्थन करता है। -### Expo (नेटिव ऐप्स के लिए) {/*expo*/} +### Expo (नैटिव ऐप्स के लिए) {/*expo*/} -**[Expo](https://expo.dev/) एक React फ्रेमवर्क है जो आपको Android, iOS और वेब के लिए यूनिवर्सल ऐप्स बनाने की सुविधा देता है।** यह [React Native](https://reactnative.dev/) के लिए एक SDK प्रदान करता है जो नेटिव भागों को उपयोग में आसान बनाता है। नया Expo प्रोजेक्ट बनाने के लिए चलाएँ: +**[Expo](https://expo.dev/) एक React फ्रेमवर्क है जो आपको Android, iOS, और वेब ऐप्स बनाने की अनुमति देता है जिनमें वास्तव में नैटिव UI होते हैं।** यह एक SDK प्रदान करता है [React Native](https://reactnative.dev/) के लिए जो नैटिव हिस्सों का उपयोग करना आसान बनाता है। एक नया Expo प्रोजेक्ट बनाने के लिए, चलाएँ: npx create-expo-app -अगर आप Expo में नए हैं, तो [Expo ट्यूटोरियल](https://docs.expo.dev/tutorial/introduction/) देखें। +यदि आप Expo के लिए नए हैं, तो [Expo ट्यूटोरियल](https://docs.expo.dev/tutorial/introduction/) देखें। -Expo को [Expo (कंपनी)](https://expo.dev/about) द्वारा मेंटेन किया जाता है। Expo के साथ ऐप्स बनाना मुफ़्त है, और आप उन्हें Google और Apple ऐप स्टोर में जमा कर सकते हैं। +Expo को [Expo (कंपनी)](https://expo.dev/about) द्वारा बनाए रखा जाता है। Expo के साथ ऐप्स बनाना मुफ्त है, और आप उन्हें Google और Apple ऐप स्टोर में बिना किसी प्रतिबंध के सबमिट कर सकते हैं। Expo अतिरिक्त रूप से ऑप्ट-इन भुगतान क्लाउड सेवाएँ प्रदान करता है। - +## Bleeding-edge React फ्रेमवर्क्स {/*bleeding-edge-react-frameworks*/} -#### क्या मैं React बिना किसी फ्रेमवर्क के उपयोग कर सकता हूँ? {/*can-i-use-react-without-a-framework*/} +जैसा कि हमने React को सुधारने के तरीकों का पता लगाया है, हमने महसूस किया कि React को फ्रेमवर्क्स (विशेष रूप से राउटिंग, बंडलिंग, और सर्वर प्रौद्योगिकियों) के साथ और अधिक निकटता से एकीकृत करना हमारे लिए React उपयोगकर्ताओं को बेहतर ऐप्स बनाने में मदद करने का सबसे बड़ा अवसर है। Next.js टीम ने [React Server Components](#react-server-components) जैसे फ्रेमवर्क-एग्नोस्टिक bleeding-edge React फीचर्स पर शोध, विकास, एकीकरण और परीक्षण में हमारे साथ सहयोग करने पर सहमति व्यक्त की है। -बिलकुल! आप React को किसी फ्रेमवर्क के बिना भी उपयोग कर सकते हैं। हालांकि, यदि आप पूरी तरह से React का उपयोग करके एक नई साइट या ऐप बना रहे हैं, तो हम एक फ्रेमवर्क का उपयोग करने की सलाह देते हैं। +यह विशेषताएँ प्रत्येक दिन प्रोडक्शन-रेडी होने के करीब हैं, और हम अन्य बंडलर और फ्रेमवर्क डेवलपर्स के साथ इनका एकीकरण करने के बारे में बातचीत कर रहे हैं। हमारी आशा है कि एक या दो साल में, इस पृष्ठ पर सूचीबद्ध सभी फ्रेमवर्क इन विशेषताओं के लिए पूरी तरह से समर्थन करेंगे। (यदि आप एक फ्रेमवर्क लेखक हैं और इन विशेषताओं के साथ प्रयोग करने के लिए हमारे साथ साझेदारी करना चाहते हैं, तो कृपया हमें बताएं!) -React फ्रेमवर्क वे समस्याएँ हल करते हैं जो बड़े होते ऐप्स में आमतौर पर आती हैं, जैसे कि कोड-स्प्लिटिंग, सर्वर-साइड डेटा फ़ेचिंग, और SEO के लिए HTML जनरेशन। +### Next.js (App Router) {/*nextjs-app-router*/} - +**[Next.js का App Router](https://nextjs.org/docs) Next.js APIs का एक डिज़ाइन है जो React टीम के फुल-स्टैक आर्किटेक्चर विज़न को पूरा करता है।** यह आपको सर्वर या बिल्ड के दौरान चलने वाले एसिंक्रोनस कंपोनेंट्स में डेटा फ़ेच करने की अनुमति देता है। -## उभरते हुए React फ्रेमवर्क {/*bleeding-edge-react-frameworks*/} +Next.js को [Vercel](https://vercel.com/) द्वारा मेंटेन किया जाता है। आप किसी भी Node.js या सर्वरलेस होस्टिंग पर, या अपने खुद के सर्वर पर [Next.js ऐप को डिप्लॉय](https://nextjs.org/docs/app/building-your-application/deploying) कर सकते हैं। Next.js [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) को भी सपोर्ट करता है, जिसे सर्वर की आवश्यकता नहीं होती। -React टीम ने यह महसूस किया कि फ्रेमवर्क्स के साथ React को अधिक गहराई से एकीकृत करना, विशेष रूप से रूटिंग, बंडलिंग और सर्वर टेक्नोलॉजीज़ के संदर्भ में, React उपयोगकर्ताओं के लिए बेहतरीन ऐप्स बनाना आसान बना सकता है। + -### Next.js (App Router) {/*nextjs-app-router*/} +#### कौन से फीचर्स React टीम की फुल-स्टैक आर्किटेक्चर विज़न का हिस्सा हैं? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} -**[Next.js का App Router](https://nextjs.org/docs) Next.js API का एक नया डिज़ाइन है, जो React टीम के फुल-स्टैक आर्किटेक्चर दृष्टिकोण को पूरा करने के लिए बनाया गया है।** यह आपको असिंक्रोनस कंपोनेंट्स का उपयोग करके डेटा फ़ेच करने की अनुमति देता है, जो सर्वर पर या बिल्ड के दौरान चलते हैं। +Next.js का ऐप राउटर bundler आधिकारिक [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) को पूरी तरह से लागू करता है। इससे आप एक ही React ट्री में बिल्ड-टाइम, सर्वर-केवल, और इंटरएक्टिव कंपोनेंट्स को मिक्स कर सकते हैं। -Next.js को [Vercel](https://vercel.com/) द्वारा मेंटेन किया जाता है। +उदाहरण के लिए, आप एक सर्वर-केवल React कंपोनेंट को एक `async` फंक्शन के रूप में लिख सकते हैं जो डेटाबेस या फाइल से डेटा पढ़ता है। फिर आप उस डेटा को अपने इंटरएक्टिव कंपोनेंट्स तक पास कर सकते हैं: + +```js +// 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); -#### React टीम का फुल-स्टैक आर्किटेक्चर दृष्टिकोण क्या है? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/} + // 3. Pass the data down to the components that will run in the browser. + return ; +} +``` -Next.js का App Router आधिकारिक [React Server Components स्पेसिफिकेशन](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) को पूरी तरह से लागू करता है। +Next.js का ऐप राउटर [Suspense के साथ डेटा फेचिंग](https://nextjs.org/blog/2022/03/29/react-v18#suspense-in-data-frameworks) भी इंटीग्रेट करता है। इससे आप अपने यूजर इंटरफेस के विभिन्न हिस्सों के लिए लोडिंग स्टेट (जैसे कि स्केलेटन प्लेसहोल्डर) को सीधे अपने React ट्री में निर्दिष्ट कर सकते हैं: + +```js +}> + + +``` -यह डेटा फ़ेचिंग और Suspense को एकीकृत करता है, जिससे UI के विभिन्न हिस्सों को लोडिंग स्टेट (जैसे कि स्केलेटन प्लेसहोल्डर) के साथ दिखाना आसान हो जाता है। +सर्वर कम्पोनेंट्स और Suspense React की विशेषताएँ हैं, न कि Next.js की। हालांकि, इन्हें फ्रेमवर्क स्तर पर अपनाने के लिए सहमति और जटिल कार्यान्वयन की आवश्यकता होती है। वर्तमान में, Next.js का ऐप राउटर सबसे पूर्ण कार्यान्वयन है। React टीम इन विशेषताओं को अगले पीढ़ी के फ्रेमवर्क में लागू करना आसान बनाने के लिए बंडलर डेवलपर्स के साथ काम कर रही है। - + \ No newline at end of file