React क्या है? गैर-डेवलपर्स के लिए सरल भाषा में गाइड

React यूज़र इंटरफ़ेस बनाने की एक JavaScript library है, यानी ऐप का वह हिस्सा जो लोग देखते और क्लिक करते हैं। आप स्क्रीन को components नाम के दोबारा इस्तेमाल होने वाले टुकड़ों से बनाते हैं, जैसे एक बटन, एक प्रोडक्ट कार्ड या पूरा पेज, और React स्क्रीन को आपके डेटा के साथ सिंक में रखता है: जब डेटा बदलता है, तो React पेज के उन हिस्सों को अपडेट करता है जो उस पर निर्भर हैं। इसे Facebook (अब Meta) में बनाया गया था, यह open source है, और वेब ऐप बनाने के सबसे ज़्यादा इस्तेमाल होने वाले तरीकों में से एक है।

AI के साथ बनाते समय यह क्यों मायने रखता है

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

AI से बनाने के लिए आपको React लिखना नहीं आना चाहिए। पर थोड़ा समझना मदद करता है:

बदलावों का सटीक वर्णन। "ProductCard component में कीमत बोल्ड करो" कहना "कहीं पर कीमतों को उभारो" से ज़्यादा साफ़ है।
एरर समझना। "Cannot read properties of undefined" या "Too many re-renders" जैसे संदेश ज़्यादा अर्थपूर्ण लगते हैं।
समझदारी भरे फ़ैसले। सादे React ऐप ब्राउज़र में रेंडर होते हैं, जो सर्च में दिखने और पहली बार लोड होने की गति पर असर डालता है। यह जानने से आप तय कर सकते हैं कि कब अलग सेटअप माँगना है।
बाद में डेवलपर्स के साथ काम करना। React एक आम स्किल है, इसलिए कोई डेवलपर आम तौर पर React कोडबेस आसानी से संभाल लेता है।

रोज़मर्रा की एक मिसाल

LEGO सोचिए। पूरे मॉडल को एक ही ब्लॉक से तराशने के बजाय, आप उसे मानक ईंटों से बनाते हैं। कुछ ईंटें एक पहिया बनाती हैं; चार पहिए और कुछ और हिस्से मिलकर एक कार बनाते हैं। अगर आप चाहते हैं कि हर कार के पहिए लाल हों, तो आप पहिए का डिज़ाइन एक बार बदलते हैं।

React के components वही ईंटें हैं। एक Button component ProductCard के अंदर इस्तेमाल होता है, जो ProductGrid के अंदर है, जो ShopPage का हिस्सा है। Button एक बार बदलें, और ऐप के हर बटन बदल जाते हैं।

मिसाल का दूसरा हिस्सा: कल्पना कीजिए कि LEGO मॉडल आपके निर्देश बदलने पर खुद को दोबारा बना लेता है। React की यही दूसरी खूबी है: आप बताते हैं कि मौजूदा डेटा के लिए स्क्रीन कैसी दिखनी चाहिए, और React पता लगाता है कि पेज पर क्या बदलना है।

मुख्य विचार

Components

Component एक JavaScript function है जो इंटरफ़ेस का एक टुकड़ा लौटाता है। React के दस्तावेज़ों के अनुसार component UI का वह हिस्सा है जिसका अपना लॉजिक और रूप होता है। Component के नाम बड़े अक्षर से शुरू होते हैं।

JSX

Components आम तौर पर JSX में लिखे जाते हैं, जो JavaScript में मिला हुआ HTML जैसा दिखता है:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX वैकल्पिक है, पर React के दस्तावेज़ बताते हैं कि ज़्यादातर प्रोजेक्ट इसका इस्तेमाल करते हैं। ब्राउज़र में चलने से पहले यह सादे JavaScript में बदल दिया जाता है।

Props

Props वे इनपुट हैं जो आप किसी component को देते हैं, जैसे एक दोबारा इस्तेमाल होने वाले हिस्से की सेटिंग्स:

<ProductCard name="Lavender Candle" price={24} />

वही ProductCard कोई भी प्रोडक्ट दिखा सकता है।

State

State वह जानकारी है जो component याद रखता है और जो ऐप चलते समय बदल सकती है: मेन्यू खुला है या नहीं, सर्च बॉक्स में क्या टाइप हुआ है, कार्ट में कितने आइटम हैं। जब state बदलता है, तो React component को दोबारा रेंडर करता है ताकि स्क्रीन मेल खाए।

Hooks

Hooks ऐसे functions हैं जिनके नाम use से शुरू होते हैं, जैसे useState (एक मान याद रखना) और useEffect (रेंडर के बाद कोड चलाना, जैसे डेटा लाना)। AI से बने React कोड में ये हर जगह दिखते हैं।

एक उदाहरण: कार्ट काउंटर

मान लीजिए आपकी ऑनलाइन दुकान पर एक "Add to cart" बटन है और एक कार्ट आइकन जो आइटम की संख्या दिखाता है। React में यह लगभग ऐसे दिखता है:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

जब कोई खरीदार "Add to cart" क्लिक करता है तो क्या होता है:

बटन का onClick onAdd को बुलाता है, जो setCartCount को बुलाता है।
React cartCount state को 0 से 1 कर देता है।
React Shop को दोबारा रेंडर करता है, और CartIcon को count={1} देता है।
अब पेज पर "Cart (1)" दिखता है। किसी ने यह कोड नहीं लिखा कि "कार्ट वाला टेक्स्ट ढूँढो और बदलो" — स्क्रीन डेटा के पीछे चलती है।

सीमाएँ भी ध्यान दें। यह काउंट ब्राउज़र की मेमोरी में रहता है। पेज रीफ़्रेश करें तो यह फिर 0 हो जाता है। कार्ट को बनाए रखने के लिए, आपको उसे किसी टिकाऊ जगह पर सेव करना होगा: cookie, ब्राउज़र स्टोरेज, या अपने backend के ज़रिए डेटाबेस। React स्क्रीन संभालता है; वह आपका डेटा store नहीं करता।

वेब ऐप में React कहाँ फ़िट होता है

हिस्सा	यह क्या करता है	आम विकल्प
UI library	इंटरफ़ेस बनाती है	React
भाषा	कोड किस भाषा में लिखा है	JavaScript या TypeScript
Build tool	सोर्स कोड को ब्राउज़र की फ़ाइलों में बदलता है; dev server चलाता है	Vite
Framework (वैकल्पिक)	routing, server rendering, डेटा लोड करना जोड़ता है	Next.js, React Router
Styling	यह कैसा दिखता है	Tailwind CSS, CSS फ़ाइलें
Backend	बिज़नेस लॉजिक, डेटा, सीक्रेट	Node.js, Python और अन्य
Database	डेटा store करता है	Postgres और अन्य

"Vite + React" ऐप ब्राउज़र में रेंडर होता है (एक single-page app)। Next.js ऐप पहले सर्वर पर पेज रेंडर कर सकता है, जिससे सर्च इंजन और पहली बार लोड होने की गति को मदद मिलती है।

आम शब्दों की व्याख्या

शब्द	इसका मतलब
Component	इंटरफ़ेस का दोबारा इस्तेमाल होने वाला टुकड़ा, जो एक function के रूप में लिखा जाता है।
JSX	JavaScript के अंदर HTML जैसी सिंटैक्स, जिससे components का वर्णन होता है।
Props	किसी component को दिए गए इनपुट।
State	डेटा जो component याद रखता है और जो समय के साथ बदल सकता है।
Hook	`use` से शुरू होने वाला function जो component में state जैसी सुविधाएँ जोड़ता है।
Render / re-render	बदलाव के बाद फिर से React का यह तय करना कि स्क्रीन पर क्या दिखे।
Single-page app (SPA)	ऐप जो एक बार लोड होता है और नए पेज लोड करने के बजाय JavaScript से पेज अपडेट करता है।
Server-side rendering (SSR)	भेजने से पहले सर्वर पर पेज का HTML बनाना।
npm package	एक दोबारा इस्तेमाल होने वाली कोड लाइब्रेरी जिसे आप इंस्टॉल कर सकते हैं, जैसे डेट पिकर या चार्ट लाइब्रेरी।
React Native	नेटिव मोबाइल ऐप बनाने के लिए एक संबंधित प्रोजेक्ट।

आम गलतियाँ और गलतफ़हमियाँ

"React एक प्रोग्रामिंग भाषा है।" यह एक library है, जो JavaScript (या TypeScript) में लिखी और उसके साथ इस्तेमाल की जाती है।
"React मेरा डेटा store करता है।" State ब्राउज़र में रहता है और रीफ़्रेश पर गायब हो जाता है। स्थायी डेटा के लिए backend और डेटाबेस चाहिए।
React कोड में सीक्रेट डालना। React ऐप की हर चीज़ विज़िटर के ब्राउज़र में भेजी जाती है। वहाँ रखी API कुंजियाँ सार्वजनिक हो जाती हैं। उन्हें सर्वर पर रखें।
"React ऐप सर्च में रैंक नहीं कर सकते।" सिर्फ़ क्लाइंट-साइड रेंडरिंग सर्च के लिए कमज़ोर है, पर prerendering या सर्वर रेंडरिंग इसकी ज़्यादातर समस्या ठीक कर देते हैं।
विशाल components। एक 1,000 लाइन का component इंसानों और AI दोनों के लिए सुरक्षित रूप से बदलना मुश्किल है। छोटे components माँगें।
यह मान लेना कि React वेब ऐप फ़ोन ऐप है। यह ब्राउज़र में चलता है, फ़ोन पर भी, पर यह App Store वाला ऐप नहीं है।

अपने AI बिल्डर से क्या माँगें

"इस पेज को छोटे, नाम वाले components में बाँटो, और बताओ कि हर component किस फ़ाइल में है।"
"ProductCard component को दोबारा इस्तेमाल योग्य बनाओ, जिसमें name, price और image props हों।"
"कार्ट को डेटाबेस में सेव करो ताकि रीफ़्रेश के बाद भी वह बना रहे।"
"सभी API कुंजियाँ सर्वर पर रखो; React कोड हमारे अपने API को बुलाए।"
"सर्वर से आने वाले डेटा के लिए लोडिंग और एरर स्थितियाँ जोड़ो।"
"अगर इन पेजों के सर्च में दिखने की अहमियत है, तो उन्हें prerender करो या सर्वर-रेंडर्ड सेटअप इस्तेमाल करो।"
"सादे शब्दों में समझाओ कि यह एरर क्या है और किस component से आ रहा है।"

बड़ी तस्वीर के लिए देखें frontend बनाम backend, और AI के लिखे कोड की समीक्षा के लिए AI से बना कोड कैसे जाँचें।

Mythex में React

जब तक आप कुछ और न माँगें, Mythex नए प्रोजेक्ट Vite + React + TypeScript + Tailwind पर शुरू करता है, और आपकी चैट के दौरान एक लाइव प्रीव्यू चलता है। आप अपने पहले प्रॉम्प्ट में कोई दूसरा सेटअप बता सकते हैं, जैसे "Next.js इस्तेमाल करो" या "सादा स्टैटिक HTML लैंडिंग पेज", और Mythex जो आप लिखते हैं उससे उसे चुन लेता है; इसके लिए कोई सेटिंग स्क्रीन नहीं है। तकनीक कैसे चुनी जाती है वाले डॉक्स पेज में विकल्प समझाए गए हैं। Free पर कोड एडिटर केवल पढ़ने के लिए है; Pro पर आप React कोड सीधे संपादित कर सकते हैं और प्रोजेक्ट को कहीं और जारी रखने के लिए एक्सपोर्ट कर सकते हैं।

सवाल

सरल शब्दों में React क्या है?

React यूज़र इंटरफ़ेस बनाने की एक JavaScript library है। आप स्क्रीन को components नाम के दोबारा इस्तेमाल होने वाले टुकड़ों से बनाते हैं, जैसे एक बटन, एक प्रोडक्ट कार्ड या पूरा पेज, और जब नीचे का डेटा बदलता है तो React स्क्रीन पर जो दिखता है उसे अपडेट कर देता है।

क्या React एक framework है या library?

React खुद को library कहता है: यह इंटरफ़ेस बनाने पर केंद्रित है। इसके ऊपर बने frameworks, जैसे Next.js, routing, server rendering और डेटा लोड करने जैसी चीज़ें जोड़ते हैं।

AI ऐप बिल्डर React का इस्तेमाल क्यों करते हैं?

React वेब इंटरफ़ेस बनाने के सबसे ज़्यादा इस्तेमाल होने वाले तरीकों में से एक है, इसलिए AI मॉडल के सीखने के लिए React कोड और दस्तावेज़ों की भारी मात्रा मौजूद है। इसकी component संरचना छोटे, सटीक बदलाव करने के लिए भी उपयुक्त है।

क्या React SEO के लिए बुरा है?

अपने आप में नहीं। जो React ऐप सब कुछ ब्राउज़र में रेंडर करता है, उसे कुछ crawlers के लिए पढ़ना मुश्किल होता है, लेकिन React को prerender किया जा सकता है या सर्वर पर रेंडर किया जा सकता है, जैसे Next.js के साथ, और इससे ज़्यादातर समस्या हल हो जाती है।

क्या React और React Native एक ही चीज़ हैं?

नहीं। React ब्राउज़र में चलने वाले वेब इंटरफ़ेस बनाता है। React Native उन्हीं विचारों का इस्तेमाल करके नेटिव iOS और Android ऐप बनाता है। दोनों की अवधारणाएँ मिलती हैं, पर ज़्यादातर बिल्डिंग ब्लॉक्स नहीं।