ई लेख सर्वेजेएस के प्रायोजित बा एगो मानसिक मॉडल बा जवन अधिकतर रिएक्ट डेवलपर साझा करेलें बिना कबो जोर से चर्चा कइले. कि रूप हमेशा घटक होखे के चाहीं. एकर मतलब बा कि एगो ढेर जइसे कि:
स्थानीय राज्य खातिर रिएक्ट हुक फॉर्म (न्यूनतम रि-रेंडर, एर्गोनॉमिक फील्ड रजिस्ट्रेशन, जरूरी बातचीत)। सत्यापन खातिर ज़ोड (इनपुट सहीता, सीमा सत्यापन, प्रकार-सुरक्षित पार्सिंग)। बैकएंड खातिर रिएक्ट क्वेरी: सबमिशन, दोबारा कोशिश, कैशिंग, सर्वर सिंक, इत्यादि।
आ अधिकतर फॉर्म खातिर — राउर लॉगिन स्क्रीन, राउर सेटिंग पन्ना, राउर सीआरयूडी मोडल — ई वाकई बढ़िया काम करेला. हर टुकड़ा आपन काम करेला, ऊ साफ-सुथरा रचना करेला, आ रउरा अपना एप्लीकेशन के ओह हिस्सा पर जा सकेनी जवन असल में रउरा उत्पाद के अलगा करेला. बाकिर हर एक बेर कवनो फॉर्म में दृश्यता नियम जइसन चीज जमा होखे लागेला जवन पहिले के जवाब पर निर्भर करेला, भा व्युत्पन्न मान जवन तीन गो फील्ड में झरना के माध्यम से बहत रहेला. शायद पूरा पन्ना भी जवना के छोड़ दिहल जाव भा रनिंग टोटल के आधार पर देखावल जाव. रउआँ पहिला कंडीशनल के एगो useWatch आ एगो इनलाइन शाखा के साथ संभालेनी, जवन ठीक बा। फेर एगो अउरी। तब रउरा सुपररिफाइन के ओर बढ़ रहल बानी कि ऊ क्रॉस-फील्ड नियम के एन्कोड कर सके जवना के राउर ज़ोड स्कीमा सामान्य तरीका से ना व्यक्त कर सके. तब, स्टेप नेविगेशन में बिजनेस लॉजिक लीक होखे लागेला। कवनो समय रउरा जवन बनवले बानी ओकरा के देखब आ एहसास होला कि अब फार्म असल में यूआई नइखे. ई एगो निर्णय प्रक्रिया के अधिका ह, आ घटक पेड़ ठीक ओहिजा बा जहाँ संजोग से रउरा एकरा के संग्रहीत कइले रहीं. इहे ह जहाँ हमरा लागत बा कि रिएक्ट में फॉर्म खातिर मानसिक मॉडल टूट जाला, आ एहमें वाकई केहू के गलती नइखे. आरएचएफ + ज़ोड स्टैक जवना खातिर एकरा के डिजाइन कईल गईल रहे, ओकरा में बहुत बढ़िया बा। मुद्दा ई बा कि हमनी का एकर इस्तेमाल ओह बिंदु से आगे बढ़त रहेनी जा जहाँ एकर अमूर्तता समस्या से मेल खाला काहे कि विकल्प खातिर रूपन का बारे में पूरा तरह से सोचे के एगो अलग तरीका के जरूरत होला. ई लेख ओह विकल्प के बारे में बा। एकरा के देखावे खातिर हमनी के ठीक एकही मल्टी-स्टेप फॉर्म के दू बेर बनाइब जा:
रिएक्ट हुक फॉर्म + ज़ोड के रिएक्ट क्वेरी में सबमिशन खातिर तार कइल गइल बा, सर्वेक्षणजेएस के साथ, जवन कवनो फॉर्म के डेटा के रूप में मानेला — एगो साधारण जेएसओएन स्कीमा — ना कि घटक पेड़।
उहे आवश्यकता, उहे सशर्त तर्क, अंत में उहे एपीआई कॉल। एकरा बाद हमनी के ठीक से नक्शा बनाइब जा कि का हिलल आ का रह गइल, आ एगो व्यावहारिक तरीका तय करब जा कि रउरा कवन मॉडल के इस्तेमाल करे के चाहीं, आ कब. हमनी के जवन फार्म बनावत बानी जा:
एह फार्म में 4-चरण के प्रवाह के इस्तेमाल होई: चरण 1: विवरण के बारे में बतावल गइल बा
पहिला नाम (आवश्यक बा), . ईमेल (आवश्यक, वैध प्रारूप) के बा।
चरण 2: आदेश दिहल जाला
इकाई के दाम, 100 बा। मात्रा, 1999 के बा। कर दर, 1999 के बा। व्युत्पन्न भइल बा: उपकुल, 1999 के बा। कर, 1999 के बा। कुल मिला के बा।
चरण 3: खाता अउर प्रतिक्रिया
का रउरा लगे खाता बा? (हाँ/ना) के बा। अगर हाँ → यूजरनेम + पासवर्ड, दुनो के जरूरत बा। अगर ना → ईमेल चरण 1 में पहिले से एकट्ठा हो गइल बा।
संतुष्टि रेटिंग (1-5) के बा। अगर ≥ 4 → पूछीं “रउरा का पसंद आइल?” अगर ≤ 2 → पूछीं कि “हमनी के का सुधार कर सकेनी जा?”
चरण 4: समीक्षा करीं
तबे लउकेला जब कुल >= 100 होखे अंतिम प्रस्तुति के बा।
ई कवनो चरम बात नइखे. बाकिर वास्तुकला के अंतर के उजागर करे खातिर ई काफी बा. भाग 1: घटक-संचालित (रिएक्ट हुक फॉर्म + ज़ोड) के बा। इंस्टॉलेशन के बा npm रिएक्ट-हुक-फॉर्म ज़ोड @hookform/resolvers @tanstack/react-query इंस्टॉल करीं
ज़ोड योजना के बा शुरुआत ज़ोड स्कीमा से कइल जाव, काहे कि आमतौर पर ओहिजा रूप के आकार स्थापित हो जाला. पहिला दू गो स्टेप खातिर — पर्सनल डिटेल्स आ ऑर्डर इनपुट — सबकुछ सीधा बा: जरूरी स्ट्रिंग, न्यूनतम वाला नंबर, आ एगो एनम। दिलचस्प हिस्सा तब शुरू होला जब रउरा सशर्त नियम के व्यक्त करे के कोशिश करीं.
"zod" से { z } आयात करीं;
निर्यात const formSchema = z.object ({ पहिला नाम: z.string ().min (1, "आवश्यक"), ईमेल: z.string ().email ("अमान्य ईमेल"), कीमत: z.number ().min (0), मात्रा: z.number (). min (1), taxRate: z.number (), hasAccount: z.enum (["हाँ", "ना"]), उपयोगकर्ता नाम: z.string ().वैकल्पिक (), पासवर्ड: z.string ().वैकल्पिक (), संतुष्टि: z.number ().min (1). अधिकतम (5), सकारात्मकप्रतिक्रिया: z.string ().वैकल्पिक (), सुधारप्रतिक्रिया: z.string ().वैकल्पिक (),}).superRefine ((डेटा, ctx) => { अगर (डेटा.hasAccount === "हाँ") { अगर (! डेटा.उपयोगकर्ता नाम) { ctx.addIssue ({ कोड: "कस्टम", पथ: ["उपयोगकर्ता नाम"], संदेश: "आवश्यक" }); } if (! डेटा.पासवर्ड || डेटा.पासवर्ड.लंबाई < 6) { ctx.addIssue ({ कोड: "कस्टम", पथ: ["पासवर्ड"], संदेश: "Min 6 वर्ण" });
if (data.satisfaction >= 4 && !data.positiveFeedback) { ctx.addIssue({ कोड: "कस्टम", पथ: ["positiveFeedback"], संदेश: "कृपया उहे साझा करीं जवन रउआँ के पसंद आइल" }); } 1999 में भइल रहे।
अगर (डेटा.संतुष्टि <= 2 && !डेटा.सुधारप्रतिक्रिया) { ctx.addIssue ({ कोड: "कस्टम", पथ:["improvementFeedback"], message: "कृपया बताईं कि का सुधारल जा सकेला" }); }}) के बा;
निर्यात प्रकार फॉर्मडेटा = z.infer <फॉर्मस्कीमा के प्रकार>;
ध्यान दीं कि यूजरनेम आ पासवर्ड के वैकल्पिक() के रूप में टाइप कइल जाला भले ई सशर्त रूप से जरूरी होखे काहें से कि ज़ोड के टाइप-लेवल स्कीमा में ऑब्जेक्ट के आकार के वर्णन होला, ना कि फील्ड सभ के महत्व कब होखे के नियम के। सशर्त आवश्यकता के सुपररिफाइन के भीतर रहे के पड़े ला, जवन आकृति के मान्यता के बाद चले ला आ पूरा ऑब्जेक्ट तक पहुँच होला। ऊ अलगाव कवनो खामी ना ह; ई बस उहे बा जवना खातिर टूल के डिजाइन कइल गइल बा: superRefine ऊ जगह हवे जहाँ क्रॉस-फील्ड लॉजिक जाला जब एकरा के खुद स्कीमा संरचना में व्यक्त ना कइल जा सके। इहाँ जवन बात इहो उल्लेखनीय बा ऊ ई कि एह योजना में का नइखे बतावल गइल. एकरा में पन्ना के कवनो अवधारणा नइखे, कवनो अवधारणा नइखे कि कवन क्षेत्र कवना बिंदु पर लउकेला आ नेविगेशन के कवनो अवधारणा नइखे. ऊ सब कहीं अउर जियत रही। फार्म घटक के बा
आयात { useForm, useWatch } से "react-hook-form";import { zodResolver } से "@hookform/resolvers/zod";import { useMutation } से "@tanstack/react-query";import { useState, useMemo } से "react";आयात { formSchema, टाइप FormData } से "./schema";
const STEPS = ["विवरण", "क्रम", "खाता", "समीक्षा"];
प्रकार ऑर्डरपेलोड = फॉर्मडेटा & { उपकुल: संख्या; कर: संख्या के बा; कुल: संख्या } के बा;
निर्यात फ़ंक्शन RHFMultiStepForm () { const [चरण, सेटस्टेप] = राज्य के इस्तेमाल करीं (0);
const उत्परिवर्तन = उत्परिवर्तन के उपयोग ({ mutationFn: एसिंक (पेलोड: ऑर्डरपेलोड) => { const res = इंतजार करीं ले आवे ("/ api / आदेश", { विधि: "पोस्ट", के बा। हेडर: { "सामग्री-प्रकार": "एप्लीकेशन/जेएसओएन" }, शरीर: JSON.stringify (पेलोड), के बा। }); if (!res.ok) throw new Error ("सबमिट करे में विफल"); रिटर्न res.json () के बा; }, 1999 के बा। });
const { रजिस्टर, नियंत्रण, हैंडलसबमिट, formState: { त्रुटि }, } = useForm
return (
);}पेन सर्वेक्षणजेएस-03-आरएचएफ [कांटा] छठ विलुप्त होखे से देखल जाव। इहाँ काफी कुछ हो रहल बा, आ धीमा कइल लायक बा कि बात कहाँ खतम भइल.
व्युत्पन्न मान — उपकुल, कर, कुल — के गणना useWatch आ useMemo के माध्यम से घटक में कइल जाला काहें से कि ई लाइव फील्ड मान पर निर्भर करे लें आ इनहन खातिर कौनों अउरी प्राकृतिक जगह नइखे। यूजरनेम, पासवर्ड, positiveFeedback, आ improvementFeedback खातिर दृश्यता नियम JSX में इनलाइन कंडीशनल के रूप में रहेला। स्टेप-स्किपिंग लॉजिक — समीक्षा पन्ना खाली तब लउके ला जब कुल >= 100 होखे — showSubmit चर आ स्टेप 3 पर रेंडर कंडीशन में एम्बेड कइल जाला। नेविगेशन खुदे खाली एगो useState काउंटर ह जवना के हमनी का मैन्युअल रूप से बढ़ा रहल बानी जा. रिएक्ट क्वेरी रिट्री, कैशिंग, आ अमान्यता के संभाले ला। फार्म बस मान्य डेटा के संगे mutation.mutate के कॉल करेला।
एहमें से कवनो बात गलत नइखे, अपने आप में. ई अबहिन ले मुहावरा रिएक्ट बाटे, आ ई घटक काफी परफार्मेंस वाला बाटे जेकर बदौलत आरएचएफ रि-रेंडर के कइसे अलग करे ला। बाकिर अगर रउरा ई बात केहू के सौंप दीं जे ई ना लिखले होखे आ ओकरा से बताईं कि समीक्षा पन्ना कवना शर्त पर लउकेला त ओकरा showSubmit, स्टेप 3 रेंडर कंडीशन, आ nav बटन लॉजिक — तीन गो अलग अलग जगह — के माध्यम से ट्रेस करे के पड़ी जेहसे कि एगो नियम के पुनर्निर्माण हो सके जवन एक लाइन में कहल जा सकत रहे. फार्म काम करेला, हँ, बाकिर व्यवहार असल में एगो सिस्टम का रूप में निरीक्षण योग्य नइखे. एकरा के मानसिक रूप से निष्पादित करे के पड़ेला। एकरा से भी बड़ बात इ बा कि एकरा के बदले खातिर इंजीनियरिंग के शामिल होखे के जरूरत बा। इहाँ तक कि एगो छोट ट्वीक, जइसे कि जब रिव्यू स्टेप देखावल जाला तब एडजस्ट कइल, के मतलब होला घटक के संपादित कइल, वैलिडेशन अपडेट कइल, पुल रिक्वेस्ट खोलल, रिव्यू के इंतजार कइल आ फिर से डिप्लोय कइल। भाग 2: योजना से संचालित (सर्वेक्षणजेएस) के बा। अब स्कीमा के इस्तेमाल से उहे प्रवाह बनावल जाव. इंस्टॉलेशन के बा npm सर्वेक्षण-कोर सर्वेक्षण-प्रतिक्रिया-ui @tanstack/react-query इंस्टॉल करीं
survey-coreMIT-लाइसेंस वाला प्लेटफार्म-स्वतंत्र रनटाइम इंजन जवन SurveyJS के फॉर्म रेंडरिंग के पावर देला — जवना हिस्सा के हमनी के इहाँ परवाह बा। ई एगो JSON स्कीमा लेला, एकरे से एगो आंतरिक मॉडल बनावे ला आ ऊ सभ चीज संभाले ला जे अन्यथा आपके रिएक्ट घटक में रहत: दृश्यता अभिव्यक्ति सभ के मूल्यांकन, व्युत्पन्न मान सभ के कंप्यूटिंग, पन्ना के स्थिति के प्रबंधन, मान्यता के ट्रैक कइल, आ ई तय कइल कि "पूरा" के मतलब का होला ई देखत कि वास्तव में कवन पन्ना देखावल गइल रहलें।
survey-react-uiयूआई / रेंडरिंग लेयर जवन ओह मॉडल के रिएक्ट से जोड़ेले। ई अनिवार्य रूप से एगो
एक साथ, ई रउआँ के पूरा तरीका से कामकाजी, बहु-पन्ना वाला फॉर्म रनटाइम देला, बिना नियंत्रण प्रवाह के एक लाइन लिखले। स्कीमा फॉर्मेट खुदे, जइसन कि पहिले कहल गइल बा, खाली एगो जेएसओएन हवे — कवनो डीएसएल भा कवनो मालिकाना चीज ना. रउआँ एकरा के इनलाइन कर सकत बानी, फाइल से आयात कर सकत बानी, एपीआई से ले सकत बानी, या डेटाबेस कॉलम में स्टोर कर सकत बानी आ रनटाइम पर हाइड्रेट कर सकत बानी। उहे रूप, डेटा के रूप में इहाँ इहे रूप बा, अबकी बेर JSON ऑब्जेक्ट के रूप में व्यक्त कइल गइल बा। स्कीमा सभ कुछ परिभाषित करे ले: संरचना, मान्यता, दृश्यता नियम, व्युत्पन्न गणना, पन्ना नेविगेशन — आ एकरा के एगो मॉडल के सौंप देले जे रनटाइम पर एकर मूल्यांकन करे ला। इहाँ ऊ पूरा तरह से कइसन लउकत बा:
export const surveySchema = { title: "ऑर्डर फ्लो", showProgressBar: "ऊपर", पन्ना: [ { नाम: "विवरण", तत्व: [ { प्रकार: "पाठ", नाम: "पहिला नाम", isRequired: true }, { प्रकार: "पाठ", नाम: "ईमेल", inputType: "ईमेल", isRequired: true, validators: [{ type: "email", text: "अवैध ईमेल" }] } ] }, { नाम: "क्रम", तत्व: [ { प्रकार: "पाठ", नाम: "कीमत", inputType: "संख्या", डिफ़ॉल्टवैल्यू: 0 }, { प्रकार: "पाठ", नाम: "मात्रा", inputType: "संख्या", डिफ़ॉल्टवैल्यू: 1 }, { प्रकार: "ड्रॉपडाउन",नाम: "taxRate", defaultValue: 0.1, विकल्प: [ { मान: 0.05, पाठ: "5%" }, { मान: 0.1, पाठ: "10%" }, { मान: 0.15, पाठ: "15%" } ] }, { प्रकार: "अभिव्यक्ति", नाम: "उपकुल", अभिव्यक्ति: "{कीमत} {मात्रा}" }, { प्रकार: "अभिव्यक्ति", नाम: "कर", अभिव्यक्ति: "{उपकुल} {करदर}" }, { प्रकार: "अभिव्यक्ति", नाम: "कुल", अभिव्यक्ति: "{उपकुल} + {कर}" } ] }, { नाम: "खाता", तत्व: [ { प्रकार: "रेडियोसमूह", नाम: "खाता बा", विकल्प: ["हाँ", "ना"] }, { प्रकार: "पाठ", नाम: "उपयोगकर्ता नाम", visibleIf: "{hasAccount} = 'हाँ'", isRequired: true }, { प्रकार: "पाठ", नाम: "पासवर्ड", inputType: "पासवर्ड", visibleIf: "{hasAccount} = 'हाँ'", isRequired: true, validators: [{ type: "text", minLength: 6, text: "6 वर्ण में ना" }] }, { प्रकार: "रेटिंग", नाम: "संतुष्टि", rateMin: 1, rateMax: 5 }, { प्रकार: "टिप्पणी", नाम: "positiveFeedback", visibleIf: "{संतुष्टि} >= 4" }, { प्रकार: "टिप्पणी", नाम: "सुधारप्रतिक्रिया", visibleIf: "{संतुष्टि} <= 2" } ] }, { नाम: "समीक्षा", visibleIf: "{कुल} >= 100", तत्व: [] } ]};
एक पल खातिर एकर तुलना आरएचएफ संस्करण से करीं।
सुपररिफाइंड ब्लॉक जवना के सशर्त रूप से यूजरनेम आ पासवर्ड के जरूरत रहे, ऊ खतम हो गइल बा. visibleIf: "{hasAccount} = 'हाँ'" isRequired के साथ मिल के: true दुनों चिंता के एक साथ संभाले ला, खुद फील्ड पर, जहाँ रउआँ इनहन के खोजे के उमेद करीं। useWatch + useMemo चेन जे सबटोटल, टैक्स, आ टोटल के गणना कइलस, के जगह तीन गो एक्सप्रेशन फील्ड सभ के इस्तेमाल कइल जाला जे एक दुसरे के नाँव से संदर्भित करे लें। समीक्षा पन्ना कंडीशन, जवन आरएचएफ संस्करण में खाली showSubmit के माध्यम से ट्रेसिंग क के पुनर्निर्माण करे लायक रहे, स्टेप 3 रेंडर शाखा। आ अंत में, nav बटन लॉजिक पेज ऑब्जेक्ट पर एगो सिंगल visibleIf प्रॉपर्टी हवे।
इहे तर्क बा। बस इहे बा कि स्कीमा ओकरा के रहे के जगह देला जहाँ ऊ अलगाव में लउके, ना कि घटक में फइलल. साथ ही, ध्यान दीं कि स्कीमा में उपकुल, कर, आ कुल खातिर टाइप: 'अभिव्यक्ति' के इस्तेमाल कइल गइल बा। एक्सप्रेशन खाली पढ़े खातिर होला आ एकर इस्तेमाल मुख्य रूप से गणना कइल मान सभ के देखावे खातिर होला। सर्वेक्षणजेएस स्थिर सामग्री खातिर टाइप: 'html' के भी सपोर्ट करेला, लेकिन गणना कइल मान खातिर, अभिव्यक्ति सही विकल्प बा। अब रिएक्ट साइड खातिर। रेंडरिंग आ सबमिशन के काम कइल जाला बहुत साधारण बा। तार onComplete के अपना एपीआई में ओही तरीका से — useMutation या सादा ले आवे के माध्यम से:
आयात { useState, useEffect, useRef } "react" से;आयात { useMutation } से "@tanstack/react-query";आयात { मॉडल } से "सर्वेक्षण-कोर"; आयात { सर्वेक्षण } से "सर्वेक्षण-प्रतिक्रिया-ui";आयात "सर्वेक्षण-कोर/सर्वेक्षण-कोर.css";
निर्यात फ़ंक्शन सर्वेक्षणफॉर्म () { const [मॉडल] = useState (() => नया मॉडल (सर्वेक्षण योजना));
const उत्परिवर्तन = उत्परिवर्तन के उपयोग ({ उत्परिवर्तनFn: एसिंक (डेटा) => { const res = इंतजार करीं ले आवे ("/ api / आदेश", { विधि: "पोस्ट", के बा। हेडर: { "सामग्री-प्रकार": "एप्लीकेशन/जेएसओएन" }, शरीर: जेएसओएन.स्ट्रिंगफाई (डेटा), 1। }); if (!res.ok) throw new Error ("सबमिट करे में विफल"); रिटर्न res.json () के बा; }, 1999 के बा। });
const mutationRef = useRef (उत्परिवर्तन) के रूप में इस्तेमाल कइल जाला; उत्परिवर्तनसंदर्भ.वर्तमान = उत्परिवर्तन; useEffect (() => { const हैंडलर = (प्रेषक) => उत्परिवर्तनRef.current.mutate (प्रेषक.डेटा); मॉडल.onComplete.ad (हैंडलर); वापसी () => मॉडल.onComplete.remove (हैंडलर); }, [मॉडल]); // रेफ हर रेंडर में हैंडलर के फिर से पंजीकृत करे से बचेला (उत्परिवर्तन ऑब्जेक्ट पहचान बदल जाला)
वापसी ( 1999 के बा)। <> के बा <सर्वेक्षण मॉडल={मॉडल} /> {उत्परिवर्तन.isError &&
देखल जाव पेन सर्वेक्षणजेएस-03-सर्वेजेजेएस [कांटा] छठ विलुप्त होखे से।
onComplete तब फायर होला जब प्रयोगकर्ता अंतिम लउके वाला पन्ना के अंत में पहुँच जाला। त अगर कुल कबो 100 ना पार होखे आ समीक्षा पन्ना छोड़ दिहल जाव तबो ऊ सही फायर करेला काहे कि सर्वेजेएस “अंतिम पन्ना” के मतलब का होला, ई तय करे से पहिले दृश्यता के मूल्यांकन करेला. एकरे बाद, sender.data में गणना कइल मान (सबटोटल, टैक्स, कुल) सभ के साथ सभ जवाब सभ के फर्स्ट-क्लास फील्ड के रूप में होला, एह से एपीआई पेलोड ओही तरह के होला जे आरएचएफ संस्करण ऑनसबमिट में मैन्युअल रूप से इकट्ठा कइले रहे। के...mutationRef पैटर्न उहे बा जवना के रउआ कहीं भी पहुँचब जहाँ रउआ हर रेंडर पर बदले वाला मान पर स्थिर इवेंट हैंडलर के जरूरत होखे — एकरा बारे में SurveyJS-विशिष्ट कुछ ना।
रिएक्ट घटक में अब कवनो बिजनेस लॉजिक बिल्कुल नइखे रहि गइल. ना कवनो useWatch, ना कवनो सशर्त जेएसएक्स, ना कवनो स्टेप काउंटर, ना कवनो useMemo चेन, ना कवनो सुपररिफाइंड. रिएक्ट उहे कर रहल बा जवना में ऊ असल में माहिर बा: कवनो घटक के रेंडर कइल आ ओकरा के एपीआई कॉल पर तार कइल. रिएक्ट से का निकलल?
चिंता के भाव बा आरएचएफ स्टैक के बा सर्वेक्षणजेएस के बा दृश्यता के क्षमता बा जेएसएक्स शाखा के बा लउकत बाअगर व्युत्पन्न मान के बारे में बतावल गइल बा useWatch / useMemo के बा अभिव्यक्ति के बा क्रॉस-फील्ड के नियम बा सुपररिफाइंड कइल जाला योजना के शर्तन के बा नेविगेशन के बारे में बतावल गइल बा स्टेप स्टेट के बा पन्ना लउकत बाअगर नियम के स्थान के बा फाइल के पार वितरित कइल जाला योजना में केंद्रीकृत कइल गइल बा
रिएक्ट में जवन रहेला ऊ बा लेआउट, स्टाइलिंग, सबमिशन वायरिंग, आ ऐप इंटीग्रेशन, माने कि रिएक्ट असल में ओह चीजन खातिर डिजाइन कइल गइल बा. बाकी सब कुछ स्कीमा में चल गइल आ काहें से कि स्कीमा खाली JSON ऑब्जेक्ट हवे, एकरा के डेटाबेस में स्टोर कइल जा सके ला, आपके एप्लीकेशन कोड से स्वतंत्र रूप से संस्करण कइल जा सके ला, या बिना डिप्लोय के जरूरत के इंटरनल टूलिंग के माध्यम से संपादित कइल जा सके ला। जवना उत्पाद प्रबंधक के समीक्षा पन्ना के ट्रिगर करे वाला थ्रेसहोल्ड बदले के जरूरत होखे, ऊ बिना घटक के छूले अइसन कर सके ला। ई ओह टीमन खातिर एगो सार्थक परिचालन अंतर बा जहाँ फॉर्म के व्यवहार अक्सर विकसित होला आ हमेशा इंजीनियरन के संचालित ना होला. हर तरीका के कब इस्तेमाल करे के चाहीं? इहाँ एगो बढ़िया नियम बा जवन हमरा खातिर काम करेला: कल्पना करीं कि फार्म पूरा तरह से हटा दीं. रउरा का गँवावत रहतीं?
अगर स्क्रीन बा त रउरा घटक से संचालित फॉर्म चाहीं. अगर ई बिजनेस लॉजिक ह, जइसे कि थ्रेसहोल्ड, शाखा नियम, आ सशर्त आवश्यकता जवन असली फैसला के एन्कोड करेला त रउरा स्कीमा इंजन चाहीं.
ठीक ओही तरह अगर रउरा राह में आवे वाला बदलाव अधिकतर लेबल, फील्ड, आ लेआउट के बारे में बा त आरएचएफ रउरा के ठीक से सेवा करी. अगर ई ओह हालात, परिणाम, आ नियमन के बारे में बा जवना के रउरा ऑप्स भा लीगल टीम के मंगल का दुपहरिया में बिना टिकट दाखिल कइले समायोजित करे के जरूरत पड़ सकेला त सर्वेजेएस का साथे स्कीमा मॉडल अधिका ईमानदार फिट बा. ई दुनु तरीका असल में एक दोसरा से प्रतिस्पर्धा में नइखे. ई अलग-अलग वर्ग के समस्या सभ के संबोधित करे लीं, आ बचे लायक गलती ई बा कि अमूर्तता के तर्क के वजन से बेमेल कइल — कौनों नियम सिस्टम के घटक नियर मानल काहें से कि ऊ परिचित औजार हवे, या नीति इंजन के ओर पहुँचल काहें से कि कौनों फॉर्म तीन स्टेप ले बढ़ के एगो सशर्त क्षेत्र हासिल कइलस। हमनी के इहाँ जवन रूप बनवले बानी जा ऊ जानबूझ के सीमा के लगे बइठल बा, एतना जटिल कि अंतर के उजागर कर सके बाकिर अतना चरम ना कि तुलना में धांधली महसूस होखे. अधिकतर असली रूप जे आपके कोडबेस में बेढंगा हो गइल बाड़ें, शायद ओही सीमा के लगे बइठल बाड़ें आ आमतौर पर सवाल ई होला कि का केहू ई नाँव दिहले बा कि ऊ वास्तव में का हवें। जब: रिएक्ट हुक फॉर्म + ज़ोड के इस्तेमाल करीं:
फार्म सीआरयूडी-उन्मुख होला; तर्क उथला आ यूआई से संचालित होला; इंजीनियर लोग के सभ व्यवहार के मालिकाना हक बा; बैकएंड सच्चाई के स्रोत बनल बा।
सर्वेक्षणजेएस के इस्तेमाल तब करीं जब:
फार्म में बिजनेस के फैसला के एन्कोड कइल जाला; नियम यूआई से स्वतंत्र रूप से बिकसित होखे लें; तर्क के लउके वाला, ऑडिटेबल भा संस्करण वाला होखे के चाहीं; गैर-इंजीनियर लोग व्यवहार के प्रभावित करे ला; एकही फार्म कई गो फ्रंटएंड पर चले के पड़ी.
