React शुरू करने का नया तरीका: Create React App से framework तक

Create React App के Deprecated होने के बाद, React अब आधिकारिक रूप से framework के साथ शुरू करने की सिफारिश करता है.

---

React शुरू करने का नया तरीका: Create React App से framework तक

अगर आप React के साथ कोई नया app या website बना रहे हैं, तो framework से शुरुआत करना बेहतर है.

अगर आपके app में ऐसी constraints हैं जिन्हें मौजूदा framework अच्छी तरह support नहीं करते, या आप अपना खुद का framework बनाना पसंद करते हैं, या आप सिर्फ React app की बुनियादी बातें सीखना चाहते हैं, तो आप React app को शुरू से भी बना सकते हैं.

Full-stack framework

ये recommended framework production में app को deploy और scale करने के लिए ज़रूरी सभी features support करते हैं. ये React की नई capabilities को integrate करते हैं और React की architecture का लाभ उठाते हैं.

Full-stack framework के लिए server ज़रूरी नहीं है

इस पेज के सभी framework client-side rendering (CSR), single-page app (SPA), और static site generation (SSG) को support करते हैं. इन apps को बिना server के CDN या static hosting service पर deploy किया जा सकता है. साथ ही, ये framework आपको जरूरत के अनुसार route-by-route आधार पर server-side rendering जोड़ने की भी सुविधा देते हैं.

इसका मतलब है कि आप client-only app से शुरुआत कर सकते हैं, और बाद में अगर requirements बदलें तो app को दोबारा लिखे बिना कुछ routes पर server features का इस्तेमाल कर सकते हैं. Rendering strategy को configure करने के तरीके के लिए framework के documentation को देखें.

Next.js (App Router)

Next.js का App Router एक React framework है, जो React की architecture का पूरा लाभ उठाकर full-stack React app बनाना संभव बनाता है.

npx create-next-app@latest  

Next.js को Vercel maintain करता है. आप Next.js app बनाकर उसे Node.js और serverless hosting, या अपने खुद के server पर deploy कर सकते हैं. Next.js server की आवश्यकता न होने वाला static export भी support करता है. Vercel अतिरिक्त opt-in paid cloud services भी प्रदान करता है.

React Router (v7)

React Router, React की सबसे लोकप्रिय routing library है, और Vite के साथ इस्तेमाल करने पर यह full-stack React framework बना सकती है. यह standard Web API पर ज़ोर देती है और अलग-अलग JavaScript runtime और platform के लिए deployment templates तैयार रूप में देती है.

नया React Router framework बनाने के लिए यह command इस्तेमाल करें.

npx create-react-router@latest  

React Router को Shopify maintain करता है.

Expo (native app के लिए)

Expo एक React framework है, जिससे native UI का उपयोग करके Android, iOS, और web के लिए universal app बनाए जा सकते हैं. यह React Native SDK देता है, जो native parts का इस्तेमाल आसान बनाता है. नया Expo project बनाने के लिए यह command इस्तेमाल करें.

npx create-expo-app@latest  

अगर आप Expo पहली बार इस्तेमाल कर रहे हैं, तो Expo tutorial देखें.

Expo को Expo (the company) maintain करती है. Expo से app बनाना free है और आप उसे बिना किसी restriction के Google या Apple store में submit कर सकते हैं. Expo अतिरिक्त opt-in paid cloud services भी देता है.

दूसरे framework

कुछ और उभरते हुए framework भी हैं, जो full-stack React vision की दिशा में आगे बढ़ रहे हैं.

• TanStack Start (Beta): TanStack Start, TanStack Router पर आधारित एक full-stack React framework है. यह Nitro या Vite की तरह full document SSR, streaming, server functions, bundling और कई उपयोगी tools प्रदान करता है.
• RedwoodJS: Redwood एक full-stack React framework है, जिसमें preloaded packages और configuration होते हैं ताकि full-stack web application आसानी से बनाए जा सकें.

कौन-से features React टीम के full-stack architecture vision को बनाते हैं?

Next.js के App Router bundler, आधिकारिक React Server Components specification को पूरी तरह implement करते हैं. इससे आप build time, server-only, और interactive components को एक ही React tree में mix कर सकते हैं.

उदाहरण के लिए, आप server-only React component को async function के रूप में लिख सकते हैं, जो database या file को पढ़ता हो. फिर आप उस data को interactive component में pass कर सकते हैं.

// यह component *सिर्फ* server पर (या build के दौरान) चलता है.  
async function Talks({ confId }) {  
  // 1. अगर यह server पर है, तो आप data layer से बात कर सकते हैं. API endpoint की ज़रूरत नहीं है.  
  const talks = await db.Talks.findAll({ confId });  
  
  // 2. Rendering logic जुड़ने पर भी JavaScript bundle का आकार बहुत बड़ा नहीं होता.   
  const videos = talks.map(talk => talk.video);  
  
  // 3. Data को उस component तक पास करें जो browser में चलेगा.  
  return <SearchableVideoList videos={videos} />;  
}  

Next.js का App Router, Suspense और data fetching को integrate करता है. यह आपको React tree में अलग-अलग user interface के लिए loading state, जैसे skeleton placeholder, सीधे specify करने देता है.

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

Server Components और Suspense, Next.js features नहीं बल्कि React features हैं. लेकिन framework level पर इन्हें अपनाने के लिए भागीदारी और काफी जटिल implementation work की ज़रूरत होती है. फिलहाल Next.js App Router इसका सबसे complete implementation है. React team bundler developers के साथ काम कर रही है ताकि अगली पीढ़ी के framework में इन features को implement करना आसान हो सके.

शुरू से शुरुआत करना

अगर आपके app में ऐसी constraints हैं जिन्हें मौजूदा framework अच्छी तरह support नहीं करते, या आप अपना खुद का framework बनाना पसंद करते हैं, या React app की बुनियादी बातें सीखना चाहते हैं, तो React project को शुरू से शुरू करने के लिए दूसरे options भी हैं.

शुरू से शुरुआत करने पर आपको ज़्यादा flexibility मिलती है, लेकिन routing, data fetching, और दूसरे common usage patterns के लिए कौन-से tools इस्तेमाल करने हैं, यह आपको खुद चुनना होगा. यह किसी existing framework का उपयोग करने के बजाय अपना framework खुद बनाने जैसा है. जिन framework की हम सिफारिश करते हैं, उनमें इन समस्याओं के लिए built-in solutions मौजूद हैं.

अगर आप अपना solution बनाना चाहते हैं, तो शुरू से React app बनाने की guide देखें, जो आपको Vite, Parcel, या RSbuild जैसे build tools के साथ शुरुआत करने देती है.

[slowandsnow]

React, component-based UI library से ज़्यादा कुछ नहीं है। सिर्फ HTML में components दिखाना आसान है, लेकिन एक website या app बनाने के लिए बहुत सारी features की ज़रूरत होती है। इसलिए framework की सिफारिश की जाती है। यह सिर्फ React की बात नहीं है; आज के कई modern web experiences web framework के जरिए बनाए जाते हैं। साथ ही, React का इस्तेमाल ज़रूरी नहीं कि सिर्फ React-based framework के साथ ही हो; इसे अलग-अलग भाषाओं में बने web frameworks (जैसे Go, Rust, Java आदि) के साथ भी इस्तेमाल किया जा सकता है, इसलिए अंतिम चुनाव हमेशा उपयोगकर्ता का होता है।

[aer0700]

मुझे लगता है कि जब यह पता न हो कि प्रोग्रामर React को किन सीमाओं और शर्तों के तहत इस्तेमाल करेंगे, तो आधिकारिक दस्तावेज़ों को यथासंभव vanilla के करीब वाले वातावरण को आधार बनाकर लिखा जाना चाहिए।

[aer0700]

React को ज़रूरी नहीं कि सिर्फ़ React-आधारित framework के साथ ही इस्तेमाल किया जाए; इसे विभिन्न भाषाओं में बने web frameworks (जैसे go, rust, java आदि) के साथ भी इस्तेमाल किया जा सकता है, इसलिए
-> दरअसल, इसी वजह से मुझे लगता है कि कम से कम React की आधिकारिक docs के get started हिस्से में, जहाँ तक संभव हो, दूसरी dependencies के बिना सिर्फ़ React इस्तेमाल करने की गाइड देना सही होगा।

[space0403]

हम्म... मैं भी हाल ही में React पढ़ रहा था,
CRA बंद होने के बाद मेरी पढ़ाई की सामग्री CRA-आधारित थी, तो अब क्या करूँ सोचते हुए Next, React Router वगैरह देखे, लेकिन इनमें हर एक में अपनी-अपनी अतिरिक्त तकनीकें जुड़ी हुई हैं, इसलिए React सीखने के नज़रिए से ये मुझे बहुत उपयुक्त नहीं लगते.. निजी तौर पर मुझे लगता है कि Vite शायद फिर भी बेहतर विकल्प है।

[aer0700]

React में आधिकारिक तौर पर framework के साथ शुरू करने की सिफारिश की जाती है -> हालांकि यह बात काफी देर से आई लगती है, लेकिन react की आधिकारिक docs से ही किसी खास framework या build tool के साथ शुरू करने की सलाह देकर आगे बढ़ना सही है या नहीं, इस पर भी सोचने का मन होता है.
मौजूदा codebase में उस framework या build tool का इस्तेमाल करना संभव न हो, ऐसा भी हो सकता है, और dependencies बढ़ाना अपने-आप में बोझिल भी लग सकता है.
वह दौर मन को शायद ज़्यादा सुकून देता था जब सिर्फ एक script tag को html में डालकर उस library की सुविधाएँ सीधे इस्तेमाल की जा सकती थीं. क्या यह बहुत पुरानी बात हो गई है...

[akarin]

मुझे भी लगता है कि क्या वाकई ऐसा करना ज़रूरी है।