कोणीय जेएस बनाम। प्रतिक्रिया जे एस

वेब एप्लिकेशन के लिए एंगुलर और रिएक्ट दो शीर्ष फ्रंटएंड फ्रेमवर्क हैं। हालांकि उनके क्षेत्र थोड़े अलग हैं (एक विकास मंच, दूसरा पुस्तकालय), उन्हें प्रमुख प्रतियोगियों के रूप में देखा जाता है। यह मान लेना सुरक्षित है कि आप किसी एप्लिकेशन को विकसित करने के लिए किसी भी ढांचे का उपयोग कर सकते हैं।

तब प्रमुख प्रश्न बन जाता है: आप एक को दूसरे के ऊपर क्यों चुनेंगे? इस लेख का उद्देश्य एक सरल साइनअप फ़ॉर्म विकसित करके इसका उत्तर देना है। प्रपत्र पूरी तरह से प्रत्येक ढांचे की सत्यापन क्षमताओं पर निर्भर करेगा।

आवश्यक शर्तें

जारी रखने के लिए, आपको सक्षम होना चाहिए प्रतिक्रिया स्थापित करें और की एक सामान्य समझ है रिएक्ट एप्लिकेशन कैसे काम करता है. आपको यह भी पता होना चाहिए कि कैसे स्थापित करें और कोणीय का उपयोग करें.

प्रत्येक एप्लिकेशन की फ़ाइल संरचना

प्रतिक्रिया प्रपत्र में निम्न फ़ाइल संरचना है:

कोणीय रूप में निम्न फ़ाइल संरचना है:

ऊपर की छवि केवल कोणीय अनुप्रयोग के संपादित अनुभाग को प्रदर्शित करती है।

उपरोक्त फ़ाइल संरचनाओं से आप देख सकते हैं कि दोनों ढांचे घटकों के उपयोग पर बहुत अधिक निर्भर हैं।

प्रत्येक प्रपत्र आवेदन के लिए तर्क बनाना

प्रत्येक एप्लिकेशन का एक ही उद्देश्य होगा: फ़ॉर्म केवल तभी सबमिट होता है जब प्रत्येक इनपुट फ़ील्ड में मान्य डेटा हो। उपयोगकर्ता नाम फ़ील्ड मान्य है यदि इसमें कम से कम एक वर्ण है। दो पासवर्ड फ़ील्ड मान्य हैं यदि उनके मान समान हैं।

कोणीय दो रूप निर्माण विधियाँ प्रदान करता है: टेम्पलेट-चालित और प्रतिक्रियाशील। प्रतिक्रियाशील दृष्टिकोण डेवलपर को कस्टम सत्यापन मानदंड बनाने की अनुमति देता है। टेम्प्लेट-चालित दृष्टिकोण उन गुणों के साथ आता है जो प्रपत्र सत्यापन को सरल बनाते हैं।

प्रतिक्रिया केवल कस्टम सत्यापन के साथ एक प्रपत्र विकसित करने में सक्षम है। हालाँकि, रिएक्ट अधिक लोकप्रिय ढांचा है और इसका एक बड़ा समुदाय है, इसलिए रिएक्ट के लिए कई फॉर्म-हैंडलिंग लाइब्रेरी उपलब्ध हैं। यह देखते हुए कि यहां लक्ष्य बाहरी पुस्तकालयों के उपयोग से बचना है, रिएक्ट एप्लिकेशन कस्टम सत्यापन पर निर्भर करेगा।

प्रत्येक एप्लिकेशन के लिए खाका विकसित करना

दोनों एप्लिकेशन अंतिम HTML आउटपुट बनाने के लिए टेम्प्लेट पर निर्भर करते हैं।

कोणीय HTML टेम्पलेट

form-signup.component.html फ़ाइल में निम्न कोड है:

<डिव क्लास ="रूप-सामग्री">
<फॉर्म क्लास ="प्रपत्र" #माईफॉर्म="एनजीफॉर्म">
<एच 1>हमारे समुदाय में शामिल होने के लिए फ़ॉर्म को पूरा करें!</h1>
<डिव क्लास ="फॉर्म-इनपुट्स">
<के लिए लेबल ="उपयोगकर्ता नाम" वर्ग ="फॉर्म-लेबल">उपयोगकर्ता नाम:</label>
<इनपुट
 आईडी ="उपयोगकर्ता नाम"
 प्रकार ="मूलपाठ"
कक्षा= "फॉर्म-इनपुट"
 प्लेसहोल्डर ="उपयोगकर्ता नाम दर्ज करें"
 नाम ="उपयोगकर्ता नाम"
 एनजीमॉडल
 आवश्यक
 #उपयोगकर्ता नाम="एनजीमॉडल"
 />
<पी *एनजीआईएफ="उपयोगकर्ता नाम.अमान्य && उपयोगकर्ता नाम.छुआ">उपयोगकर्ता का नाम (आवश्यक</पी>
</div>
<डिव क्लास ="फॉर्म-इनपुट्स">
<के लिए लेबल ="पासवर्ड" वर्ग ="फॉर्म-लेबल">पासवर्ड:</label>
<इनपुट
 आईडी ="पासवर्ड"
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड"
कक्षा= "फॉर्म-इनपुट"
 प्लेसहोल्डर ="पास वर्ड दर्ज करें"
 एनजीमॉडल
 आवश्यक
 #पासवर्ड="एनजीमॉडल"
 [(एनजीमॉडल)]="मॉडल.पासवर्ड"
 />
<पी *एनजीआईएफ="पासवर्ड अमान्य && पासवर्ड.छुआ">पासवर्ड आवश्यक</पी>
</div>
<डिव क्लास ="फॉर्म-इनपुट्स">
<के लिए लेबल ="पासवर्ड मान्य" वर्ग ="फॉर्म-लेबल">पासवर्ड:</label>
<इनपुट
 आईडी ="पासवर्ड की पुष्टि कीजिये"
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड की पुष्टि कीजिये"
कक्षा= "फॉर्म-इनपुट"
 प्लेसहोल्डर ="पासवर्ड की पुष्टि कीजिये"
 एनजीमॉडल
 आवश्यक
 #पासवर्ड2="एनजीमॉडल"
 ngValidateEqual="पासवर्ड"
 [(एनजीमॉडल)]="मॉडल.पुष्टिकरण पासवर्ड"
 />
<डिव *एनजीआईएफ="(password2.dirty || password2.touched) && पासवर्ड2.अमान्य">
<पी *एनजीआईएफ="password2.hasError('सम नही') && पासवर्ड.मान्य">
 पासवर्डों करनानहींमिलान
</पी>
</div>
</div>
<बटन
कक्षा= "फॉर्म-इनपुट-बीटीएन"
 प्रकार ="प्रस्तुत"
 [अक्षम] ="myForm.invalid"
 राउटरलिंक ="/success"
>
 साइन अप करें
</button>
</form>
</div>

प्रतिक्रिया HTML टेम्पलेट

साइनअप.जेएस फ़ाइल में निम्न कोड है:

आयात प्रतिक्रिया से "प्रतिक्रिया";
आयात फॉर्म का उपयोग करें से "../उपयोगफॉर्म";
आयात सत्यापित करें से "../मान्य डेटा";
आयात "./साइनअप.सीएसएस"
स्थिरांक साइनअप = ({सबमिट फॉर्म}) => {
स्थिरांक {हैंडल चेंज, वैल्यूज, हैंडल सबमिट, एरर} = यूजफॉर्म (सबमिटफॉर्म, वैलिडेट);
वापसी (
<div वर्गनाम="रूप-सामग्री">
<फॉर्म क्लासनाम ="प्रपत्र" सबमिट करें = {हैंडल सबमिट करें}>
<एच 1>हमारे समुदाय में शामिल होने के लिए फ़ॉर्म को पूरा करें!</h1>
<div वर्गनाम="फॉर्म-इनपुट्स">
<लेबल htmlके लिए="उपयोगकर्ता नाम" वर्गनाम="फॉर्म-लेबल">उपयोगकर्ता नाम:</label>
<इनपुट
 आईडी ="उपयोगकर्ता नाम"
 प्रकार ="मूलपाठ"
 नाम ="उपयोगकर्ता नाम"
 वर्गनाम="फॉर्म-इनपुट"
 प्लेसहोल्डर ="उपयोगकर्ता नाम दर्ज करें"
 मूल्य = {values.username}
 ऑन चेंज = {हैंडल चेंज}
 />
{त्रुटियां.उपयोगकर्ता नाम &&<पी>{त्रुटियां.उपयोगकर्ता नाम}</पी>}
</div>
<div वर्गनाम="फॉर्म-इनपुट्स">
<लेबल htmlके लिए="पासवर्ड" वर्गनाम="फॉर्म-लेबल"> पासवर्ड: </label>
<इनपुट
 आईडी ="पासवर्ड"
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड"
 वर्गनाम="फॉर्म-इनपुट"
 प्लेसहोल्डर ="पास वर्ड दर्ज करें"
 मूल्य = {मान। पासवर्ड}
 ऑन चेंज = {हैंडल चेंज}
 />
{त्रुटियां.पासवर्ड &&<पी>{त्रुटियां.पासवर्ड}</पी>}
</div>
<div वर्गनाम="फॉर्म-इनपुट्स">
<लेबल htmlके लिए="पासवर्ड मान्य" वर्गनाम="फॉर्म-लेबल"> पासवर्ड: </label>
<इनपुट
 आईडी ="पासवर्ड मान्य"
 प्रकार ="पासवर्ड"
 नाम ="पासवर्ड मान्य"
 वर्गनाम="फॉर्म-इनपुट"
 प्लेसहोल्डर ="पासवर्ड की पुष्टि कीजिये"
 value={values.passwordvalidate}
 ऑन चेंज = {हैंडल चेंज}
 />
{त्रुटियां.पासवर्ड मान्य करें &&<पी>{त्रुटियां.पासवर्ड मान्य करें}</पी>}
</div>
<बटन वर्गनाम="फॉर्म-इनपुट-बीटीएन" प्रकार ="प्रस्तुत">साइन अप करें</button>
</form>
</div>
 )
}
निर्यात करनाचूक साइन अप करें;

आप देखेंगे कि कुछ मामूली अंतरों को छोड़कर, दोनों एप्लिकेशन मूल HTML कोड का उपयोग करते हैं। उदाहरण के लिए, कोणीय अनुप्रयोग CSS वर्गों की पहचान करने के लिए मानक "वर्ग" विशेषता का उपयोग करता है। रिएक्ट अपने स्वयं के कस्टम "क्लासनाम" संपत्ति का उपयोग करता है। रिएक्ट इसे अंतिम आउटपुट में मानक "वर्ग" विशेषता में बदल देता है। UI किसी भी एप्लिकेशन की सफलता में महत्वपूर्ण भूमिका निभाता है। चूंकि दोनों एप्लिकेशन समान HTML संरचना और वर्ग नामों का उपयोग करते हैं, इसलिए दोनों एप्लिकेशन समान स्टाइलशीट का उपयोग कर सकते हैं।

उपरोक्त टेम्प्लेट में सभी गैर-मानक गुण सत्यापन से संबंधित हैं।

कोणीय अनुप्रयोग के लिए प्रपत्र सत्यापन बनाना

सत्यापन गुणों तक पहुँचने के लिए जो एंगुलर के टेम्पलेट-संचालित दृष्टिकोण का एक हिस्सा हैं, आपको आयात करने की आवश्यकता होगी प्रपत्रमॉड्यूल में ऐप.मॉड्यूल.ts फ़ाइल।

app.module.ts फ़ाइल

आयात {एनजीमॉड्यूल} से '@ कोणीय/कोर';
आयात { फॉर्ममॉड्यूल } से '@ कोणीय/रूप';
आयात {ब्राउज़रमॉड्यूल} से '@ कोणीय/प्लेटफ़ॉर्म-ब्राउज़र';
आयात {ValidateEqualModule} से 'एनजी-मान्य-बराबर'
आयात { ऐप रूटिंग मॉड्यूल } से './app-routing.module';
आयात { ऐपकंपोनेंट } से './app.component';
आयात { फॉर्मसाइनअप कॉम्पोनेंट } से './form-signup/form-signup.component';
आयात { फॉर्मसक्सेस कॉम्पोनेंट } से './form-success/form-success.component';
@NgModule({
 घोषणाएं: [
 ऐपकंपोनेंट,
 फॉर्मसाइनअपघटक,
 फॉर्मसक्सेसकंपोनेंट
 ],
 आयात: [
 ब्राउज़र मॉड्यूल,
 प्रपत्रमॉड्यूल,
 ValidateEqualModule,
 ऐप रूटिंग मॉड्यूल
 ],
प्रदाताओं: [],
बूटस्ट्रैप: [ ऐपकंपोनेंट ]
})
निर्यात करनाकक्षाऐप मॉड्यूल{ }

आयात करके प्रपत्रमॉड्यूल उपरोक्त फ़ाइल में, अब आपके पास विभिन्न सत्यापन गुणों की एक श्रृंखला तक पहुंच है। आपको जोड़ने की आवश्यकता होगी एनजीमॉडल कोणीय HTML टेम्पलेट के इनपुट फ़ील्ड के लिए गुण। यदि आप ऊपर दिए गए कोणीय टेम्पलेट को देखते हैं, तो आप देखेंगे कि प्रत्येक इनपुट तत्व में यह गुण है।

प्रपत्रमॉड्यूल और एनजीमॉडल डेवलपर को सत्यापन गुणों तक पहुंच प्रदान करें जैसे कि वैध और अमान्य. कोणीय HTML टेम्पलेट का अनुच्छेद खंड का उपयोग करता है #उपयोगकर्ता नाम = "एनजीमॉडल" संपत्ति। यह एक चेतावनी उत्पन्न करता है यदि इनपुट फ़ील्ड में डेटा अमान्य है और उपयोगकर्ता ने इसे बदल दिया है।

में ऐप.मॉड्यूल.ts फ़ाइल, आप यह भी देखेंगे ValidateEqualModule, जो दो पासवर्ड की तुलना करता है। ऐसा करने के लिए, आपको में एक मॉडल ऑब्जेक्ट बनाना होगा form-signup.component.ts फ़ाइल।

प्रपत्र-signup.component.ts फ़ाइल

आयात {घटक, ऑनइनिट} से '@ कोणीय/कोर';
@अवयव({
 चयनकर्ता: 'ऐप-फॉर्म-साइनअप',
 टेम्पलेटयूआरएल: './form-signup.component.html',
 शैली यूआरएल: ['./form-signup.component.css']
})
निर्यात करना कक्षाफॉर्मसाइनअपघटकऔजारऑनइनिट{
निर्माता() { }
 एनजीऑनइनिट (): खालीपन {}
 मॉडल = {
 पासवर्ड: व्यर्थ,
 पासवर्ड की पुष्टि कीजिये: व्यर्थ
 };
}

कोणीय HTML टेम्पलेट में दूसरा पासवर्ड का उपयोग करता है आदर्श पहले पासवर्ड के लिए इसके मान की तुलना करने के लिए उपरोक्त फ़ाइल में ऑब्जेक्ट करें।

अक्षम सबमिट बटन पर संपत्ति यह सुनिश्चित करती है कि यह तब तक निष्क्रिय रहे जब तक कि प्रत्येक इनपुट फ़ील्ड में मान्य डेटा न हो। फॉर्म जमा करने से एंगुलर के राउटर की सहायता से उपयोगकर्ता को एक सफलता पृष्ठ पर लाया जाता है।

app.routing.module.ts फाइल

आयात {एनजीमॉड्यूल} से '@ कोणीय/कोर';
आयात { राउटर मॉड्यूल, रूट } से '@ कोणीय/राउटर';
आयात { फॉर्मसाइनअप कॉम्पोनेंट } से './form-signup/form-signup.component';
आयात { फॉर्मसक्सेस कॉम्पोनेंट } से './form-success/form-success.component';
स्थिरांक मार्ग: मार्ग = [{
 पथ: '',
 घटक: फॉर्मसाइनअपकंपोनेंट
},{
 पथ: 'सफलता',
 घटक: फॉर्मसक्सेसकंपोनेंट
}];
@NgModule({
आयात: [RouterModule.forRoot (मार्ग)],
निर्यात: [राउटर मॉड्यूल]
})
निर्यात करनाकक्षाऐप रूटिंग मॉड्यूल{ }

उपरोक्त रूटिंग मॉड्यूल में दो पथ हैं; प्रपत्र के लिए मुख्य पथ और सफलता घटक के लिए सफलता पथ।

app.component.html फ़ाइल

<राउटर-आउटलेट></router-outlet>

उपरोक्त ऐप घटक फ़ाइल में राउटर आउटलेट उपयोगकर्ता को आसानी से नेविगेट करने की अनुमति देता है फॉर्म-साइनअप और फॉर्म-सफलता URL का उपयोग करने वाले घटक।

प्रतिक्रिया आवेदन के लिए प्रपत्र सत्यापन बनाना

निर्यात करनाचूकसमारोहमान्यडेटा(मूल्यों) {
होने देना त्रुटियां = {}
अगर (!मूल्यों।उपयोगकर्ता नाम।काट-छांट करना()) {
 error.username = "उपयोगकर्ता का नाम (आवश्यक";
 }
अगर (!मूल्यों।पासवर्ड) {
 त्रुटियां। पासवर्ड = "पासवर्ड आवश्यक";
 }
अगर (!मूल्योंपासवर्ड मान्य) {
 error.passwordvalidate = "पासवर्ड आवश्यक";
 } वरनाअगर (values.passwordvalidate!==values.password) {
 error.passwordvalidate = "पासवर्ड करनानहींमिलान";
 }
वापसी त्रुटियां;
}

मान्यडेटा.जेएस फ़ाइल में उपरोक्त कोड है। यह सुनिश्चित करने के लिए प्रपत्र में प्रत्येक इनपुट फ़ील्ड की निगरानी करता है कि प्रत्येक फ़ील्ड में मान्य डेटा है।

useForm.js फ़ाइल

आयात {यूजस्टेट, यूज इफेक्ट} से 'प्रतिक्रिया';
स्थिरांक useForm = (कॉलबैक, मान्य) => {
स्थिरांक [मान, सेटवैल्यू] = यूज़स्टेट ({
 उपयोगकर्ता नाम: '',
 पासवर्ड: '',
 पासवर्ड सत्यापित करें: ''
 });
स्थिरांक [त्रुटियां, सेटइरर्स] = यूज़स्टेट ({});
स्थिरांक [isSubmitting, setIsSubmitting] = useState (झूठा)
स्थिरांक हैंडल चेंज = ई => {
स्थिरांक {नाम, मान} = ई. लक्ष्य;
सेटवैल्यू ({
 ..मूल्य,
[नाम]: मूल्य
 });
 }
स्थिरांक हैंडल सबमिट करें = ई => {
इ।चूक को रोकें();
 सेटइरर्स (सत्यापित करें (मूल्यों));
 सेटइससबमिटिंग(सच);
 }
 उपयोग प्रभाव (() => {
 अगर (ऑब्जेक्ट.की (त्रुटियां)। लंबाई 0 && सबमिट कर रहा है) {
 वापस कॉल करें();
 }
 }, [त्रुटियां, कॉलबैक, सबमिट कर रहा है]);
वापसी {हैंडल चेंज, वैल्यू, हैंडल सबमिट, एरर};
}
निर्यात करनाचूक फॉर्म का उपयोग करें;

सीमा - शुल्क फॉर्म का उपयोग करें उपरोक्त हुक यह निर्धारित करता है कि उपयोगकर्ता सफलतापूर्वक फॉर्म जमा करता है या नहीं। यह घटना केवल तभी होती है जब प्रपत्र के भीतर का सभी डेटा मान्य होता है।

फॉर्म.जेएस फ़ाइल

आयात प्रतिक्रिया से "प्रतिक्रिया";
आयात साइन अप करें से "।/साइन अप करें";
आयात सफलता से "।/सफलता"
आयात {यूजस्टेट} से "प्रतिक्रिया";
स्थिरांक फॉर्म = () => {
स्थिरांक [सबमिट किया गया है, सेट आईस सबमिट किया गया है] = यूजस्टेट (झूठा);
समारोहफार्म जमा करें() {
 सेटइससबमिट किया गया (सच);
 }
वापसी (
<डिव>
 {!सबमिट किया गया है? (<साइनअप सबमिटफॉर्म = {सबमिट फॉर्म} />): (<सफलता />)}
</div>
 )
}
निर्यात करनाचूक रूप;

रूप उपरोक्त घटक के बीच के दृश्य को स्विच करता है साइन अप करें घटक और सफलता घटक अगर फॉर्म जमा करता है।

App.js फ़ाइल

आयात रूप से "./घटक/फॉर्म";
समारोहअनुप्रयोग() {
वापसी (
<div वर्गनाम="अनुप्रयोग">
<रूप/>
</div>
 );
}
निर्यात करनाचूक अनुप्रयोग;

कोणीय अनुप्रयोग UI

यूआई उपयोगकर्ता नाम के लिए एक इनपुट और दो पासवर्ड इनपुट के साथ एक फॉर्म प्रदर्शित करता है।

जब प्रपत्र में अमान्य डेटा होता है, तो पृष्ठ त्रुटि संदेश प्रदर्शित करते हैं:

जब प्रपत्र में मान्य डेटा होता है, तो उपयोगकर्ता इसे सफलतापूर्वक सबमिट कर सकता है:

प्रतिक्रिया आवेदन यूआई

जब प्रपत्र में अमान्य डेटा हो:

जब प्रपत्र में मान्य डेटा होता है:

प्रतिक्रिया और कोणीय के बीच समानताएं और अंतर

एंगुलर और रिएक्ट फ्रेमवर्क उल्लेखनीय रूप से समान हैं और समान परिणाम देने में सक्षम हैं। हालाँकि, इन परिणामों को प्राप्त करने के लिए आप जिन उपकरणों का उपयोग कर सकते हैं, वे भिन्न होंगे। कोणीय एक विकास मंच है जो राउटर और फॉर्म लाइब्रेरी जैसे उपकरणों तक पहुंच प्रदान करता है। रिएक्ट को समान परिणाम प्राप्त करने के लिए डेवलपर से थोड़ी अधिक रचनात्मकता की आवश्यकता होती है।

प्रतिक्रिया बनाम। कोणीय: प्रतिक्रिया इतनी अधिक लोकप्रिय क्यों है?

आगे पढ़िए

लेखक के बारे में