React म्हणजे काय? नॉन-डेव्हलपर्ससाठी सोपे मार्गदर्शक

React ही वापरकर्ता इंटरफेस बनवण्यासाठीची JavaScript लायब्ररी आहे — अ‍ॅपचा तो भाग जो लोक पाहतात आणि क्लिक करतात. तुम्ही पुन्हा वापरता येणाऱ्या तुकड्यांपासून स्क्रीन बनवता, ज्यांना कंपोनंट्स म्हणतात — जसे बटण, उत्पादन कार्ड किंवा संपूर्ण पान — आणि React स्क्रीनला तुमच्या डेटाशी जुळवून ठेवते: डेटा बदलला की React पानाचे जे भाग त्यावर अवलंबून आहेत ते अपडेट करते. ते Facebook (आता Meta) येथे तयार झाले, ओपन सोर्स आहे, आणि वेब अ‍ॅप्स बनवण्याच्या सर्वात जास्त वापरल्या जाणाऱ्या पद्धतींपैकी एक आहे.

AI सोबत बनवताना हे का महत्त्वाचे आहे

तुम्ही AI टूलसोबत वेब अ‍ॅप बनवत असाल, तर ते बहुधा React मध्ये लिहिलेले असण्याची शक्यता चांगली आहे. अनेक AI अ‍ॅप बिल्डर्स डिफॉल्टने React वापरतात, कारण ते लोकप्रिय आहे, चांगले दस्तऐवजीकृत आहे, आणि AI मॉडेल्सनी शिकण्यासाठी React कोडाचा मोठा साठा उपलब्ध आहे.

React लिहिता येणे आवश्यक नाही. पण थोडे माहित असल्यास मदत होते:

• बदल अचूक वर्णन करता येतात. "ProductCard कंपोनंट बदला जेणेकरून किंमत ठळक दिसेल" हे "कुठेतरी किमती उठून दिसू द्या" यापेक्षा स्पष्ट आहे.
• एरर समजतात. "Cannot read properties of undefined" किंवा "Too many re-renders" सारखे संदेश अधिक अर्थपूर्ण वाटतात.
• योग्य निवड करता येते. साधी React अ‍ॅप्स ब्राउझरमध्ये रेंडर होतात, ज्याचा शोधातील दृश्यमानता आणि पहिल्या लोडच्या वेगावर परिणाम होतो. हे माहित असल्यास वेगळ्या सेटअपसाठी कधी विचारायचे ते ठरवता येते.
• नंतर डेव्हलपर्ससोबत काम करता येते. React हे सामान्य कौशल्य आहे, त्यामुळे डेव्हलपर सहसा React कोडबेस पटकन समजू शकतो.

दैनंदिन उदाहरण

LEGO चा विचार करा. मॉडेल एका ब्लॉकमधून कोरण्याऐवजी प्रमाणित विटांमधून बांधता. काही विटा मिळून चाक बनते; चार चाके आणि इतर भाग मिळून कार. सगळ्या कारना लाल चाके हवी असतील, तर चाकाची रचना एकदाच बदलता.

React कंपोनंट्स त्या विटा आहेत. Button कंपोनंट ProductCard मध्ये वापरला जातो, जो ProductGrid मध्ये, जो ShopPage चा भाग आहे. Button एकदाच बदला, आणि अ‍ॅपमधील प्रत्येक बटण बदलते.

उदाहरणाच्या दुसऱ्या बाजूचा विचार करा: सूचना बदलल्या की LEGO मॉडेल स्वतःला पुन्हा बांधते. हीच React ची दुसरी युक्ती आहे — तुम्ही सध्याच्या डेटासाठी स्क्रीन कशी दिसली पाहिजे ते सांगता, आणि पानावर काय बदलायचे ते React ठरवते.

मुख्य संकल्पना

कंपोनंट्स

कंपोनंट म्हणजे इंटरफेसचा एक तुकडा परत देणारे JavaScript फंक्शन. React च्या दस्तऐवजांत कंपोनंटचे वर्णन असे केले जाते: UI चा तो भाग ज्याचे स्वतःचे तर्क आणि स्वरूप आहे. कंपोनंटची नावे मोठ्या अक्षराने सुरू होतात.

JSX

कंपोनंट्स सहसा JSX मध्ये लिहिले जातात, जे JavaScript मध्ये मिसळलेल्या HTML सारखे दिसते:

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

JSX ऐच्छिक आहे, पण React च्या दस्तऐवजांनुसार बहुतेक प्रोजेक्ट्स ते वापरतात. ब्राउझरमध्ये चालण्यापूर्वी ते साध्या JavaScript मध्ये रूपांतरित होते.

Props

Props म्हणजे कंपोनंटमध्ये दिलेले इनपुट, पुन्हा वापरता येणाऱ्या भागाच्या सेटिंग्जसारखे:

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

तोच ProductCard कोणतेही उत्पादन दाखवू शकतो.

State

State म्हणजे कंपोनंट लक्षात ठेवत असलेली माहिती, जी अ‍ॅप चालताना बदलू शकते — मेनू उघडा आहे का, शोध बॉक्समध्ये काय टाइप केले आहे, कार्टमध्ये किती वस्तू आहेत. State बदलला की React कंपोनंट पुन्हा रेंडर करते, जेणेकरून स्क्रीन जुळते.

Hooks

Hooks म्हणजे 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" क्लिक केल्यावर काय होते:

1. बटणाचा onClick onAdd कॉल करतो, जो setCartCount कॉल करतो.
2. React cartCount state 0 वरून 1 करते.
3. React Shop पुन्हा रेंडर करते, आणि CartIcon ला count={1} देते.
4. पानावर आता "Cart (1)" दिसते. "कार्टमधील मजकूर शोधून बदल" असे कोणीही कोड लिहिलेला नाही — स्क्रीन डेटाचे अनुसरण करते.

मर्यादाही लक्षात घ्या. ही संख्या ब्राउझरच्या मेमरीत राहते. पान रिफ्रेश केले तर ती 0 होते. कार्ट जपून ठेवायचा असेल तर तो टिकणाऱ्या ठिकाणी साठवावा लागेल — कुकी, ब्राउझर स्टोरेज, किंवा बॅकएंड मार्फत डेटाबेस. React स्क्रीन सांभाळते; तुमचा डेटा साठवत नाही.

वेब अ‍ॅपमध्ये React कुठे बसते

"Vite + React" अ‍ॅप ब्राउझरमध्ये रेंडर होते (सिंगल-पेज अ‍ॅप). Next.js अ‍ॅप पाने आधी सर्व्हरवर रेंडर करू शकते, ज्यामुळे सर्च इंजिनांना आणि पहिल्या लोडच्या वेगाला मदत होते.

सामान्य संज्ञा

सामान्य चुका आणि गैरसमज

• "React ही प्रोग्रामिंग भाषा आहे." ती JavaScript (किंवा TypeScript) मध्ये लिहिली जाणारी आणि त्यातून वापरली जाणारी लायब्ररी आहे.
• "React माझा डेटा साठवते." State ब्राउझरमध्ये राहतो आणि रिफ्रेशवर नाहीसा होतो. टिकणारा डेटा बॅकएंड आणि डेटाबेस मागतो.
• React कोडात सिक्रेट्स ठेवणे. React अ‍ॅपमधील सर्व काही अभ्यागताच्या ब्राउझरला पाठवले जाते. तिथे API की सार्वजनिक होतात. त्या सर्व्हरवर ठेवा.
• "React अ‍ॅप्स सर्चमध्ये रँक होऊ शकत नाहीत." फक्त-क्लायंट रेंडरिंग सर्चसाठी कमकुवत आहे, पण prerendering किंवा सर्व्हर रेंडरिंगमुळे बहुतेक समस्या सुटते.
• मोठे कंपोनंट्स. एक 1,000 ओळींचा कंपोनंट माणसांसाठी आणि AI साठी सुरक्षितपणे बदलणे कठीण असते. लहान कंपोनंट्स मागा.
• React वेब अ‍ॅप म्हणजे फोन अ‍ॅप असे गृहीत धरणे. ते ब्राउझरमध्ये चालते, फोनवरही, पण ते App Store वरचे अ‍ॅप नाही.

तुमच्या AI बिल्डरकडे काय मागायचे

• "हे पान लहान, नावाच्या कंपोनंट्समध्ये विभागा, आणि प्रत्येक कंपोनंट कोणत्या फाइलमध्ये आहे ते सांगा."
• "ProductCard कंपोनंट पुन्हा वापरता येण्याजोगा करा, ज्यात name, price आणि image props असतील."
• "कार्ट डेटाबेसमध्ये साठवा, म्हणजे रिफ्रेशनंतरही तो राहील."
• "सर्व API की सर्व्हरवर ठेवा; React कोडने आमच्याच API ला कॉल करावे."
• "सर्व्हरवरून येणाऱ्या डेटासाठी लोडिंग आणि एरर स्थिती जोडा."
• "या पानांसाठी सर्च दृश्यमानता महत्त्वाची असेल तर त्यांचे prerendering करा किंवा सर्व्हर-रेंडर केलेला सेटअप वापरा."
• "हा एरर साध्या भाषेत काय सांगतो आणि तो कोणत्या कंपोनंटमधून येतो ते समजावून सांगा."

मोठे चित्र पाहण्यासाठी फ्रंटएंड विरुद्ध बॅकएंड वाचा, आणि AI ने लिहिलेले पुनरावलोकन करण्यासाठी AI-निर्मित कोडचे पुनरावलोकन कसे करावे वाचा.

Mythex मध्ये React

तुम्ही वेगळे काही मागितले नाही तर Mythex नवीन प्रोजेक्ट्स Vite + React + TypeScript + Tailwind वर सुरू करते, आणि तुम्ही चॅट करत असताना लाइव्ह प्रिव्ह्यू चालत राहतो. पहिल्या प्रॉम्प्टमध्ये दुसरा सेटअप नमूद करू शकता — उदाहरणार्थ "Next.js वापरा" किंवा "साधे स्टॅटिक HTML लँडिंग पेज" — आणि Mythex तुम्ही लिहिलेल्यावरून ते निवडते; त्यासाठी सेटिंग्ज स्क्रीन नाही. तंत्रज्ञान कसे निवडले जाते हे डॉक्स पान पर्याय स्पष्ट करते. कोड एडिटर Free वर वाचण्यापुरता असतो; Pro वर तुम्ही React कोड थेट संपादित करू शकता आणि प्रोजेक्ट दुसरीकडे पुढे चालू ठेवण्यासाठी एक्सपोर्ट करू शकता.

प्रश्न