प्रतिक्रियाशील मूल अनुप्रयोगों के लिए आधुनिक पर्यावरण

इस लेख में, हम एक्सपो- क्ली , टाइपस्क्रिप्ट , और जेस्ट का उपयोग करके एक प्रतिक्रियाशील मूल वातावरण स्थापित करने की प्रक्रिया पर विचार करेंगे।
टाइपस्क्रिप्ट हमें विकास त्रुटियों से बचने और अधिक कुशल मोबाइल एप्लिकेशन लिखने में मदद करेगा।

आधुनिक उपकरण विकास पर्यावरण में टाइपस्क्रिप्ट को एकीकृत करने की अनुमति देते हैं। हम वीसी कोड का भी उपयोग कर सकते हैं जो टाइपस्क्रिप्ट का समर्थन करता है।

रिएक्ट नेटिव के साथ एकीकरण हमें ऑटो-पूर्ण सेवा, कोड नेविगेशन और रीफैक्टरिंग का उपयोग करने का अवसर देगा।

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

एक परियोजना का निर्माण

सबसे पहले, हम यार्न से एप्लिकेशन टेम्पलेट बनाने के लिए आवश्यक सभी निर्भरताएं स्थापित करते हैं।

यार्न ग्लोबल ऐड एक्सपो-क्ली

इसके बाद, हम रिएक्टिव नेटिव एप्लिकेशन को इनिशियलाइज़ करते हैं और खाली टाइपस्क्रिप्ट टेम्पलेट का चयन करते हैं।

~ / एक्सपो init exampleApp
? एक टेम्प्लेट चुनें: एक्सपो-टेम्प्लेट-खाली-टाइपस्क्रिप्ट
कृपया कुछ प्रारंभिक कॉन्फ़िगरेशन मान दर्ज करें।
? यार्न v1.15.2 मिला। निर्भरता स्थापित करने के लिए यार्न का उपयोग करें? हां

अब हम प्रोजेक्ट लॉन्च कर सकते हैं और एप्लिकेशन विकसित करना शुरू कर सकते हैं।

cd exampleApp
यार्न की शुरुआत

क्षार विन्यास

आइए, VSCode या किसी अन्य संपादक का सही ढंग से उपयोग करने के लिए tslint को कॉन्फ़िगर करें और विकास के चरण में त्रुटियां देखें। यह एक समान कोड शैली सुनिश्चित करेगा और जटिलताओं को रोकेगा।

पहले हम वैश्विक निर्देशिका में tslint पैकेज स्थापित करते हैं:
यार्न ग्लोबल ऐड tslint

अगला हम tslint कॉन्फ़िगरेशन बनाते हैं:
tslint - इनिट

यह कमांड tslint.json फाइल को निम्न विन्यास के साथ बनाएगी:

{ "extends": ["tslint:recommended"], "jsRules": {}, "rules": {}, "rulesDirectory": [] } 

अगला, हम अपने कॉन्फ़िगरेशन का उपयोग करके टाइपस्क्रिप्ट फ़ाइलों की जांच करते हैं:
tslint 'src / ** / *। ts'

उसके बाद, वी.एस. कोड संपादक में कोड को मान्य करने के लिए स्वचालित रूप से कॉन्फ़िगरेशन फ़ाइल का उपयोग करेगा। ऐप विकास की प्रक्रिया में टाइप त्रुटियों को संपादक में प्रदर्शित किया जाएगा।

इसके अलावा, सुविधा के लिए, हम यार्न के लिए कमांड जोड़ते हैं। इन आदेशों का उपयोग स्थानीय विकास के लिए या निरंतर एकीकरण के चरण में सत्यापन के लिए किया जा सकता है।

 "scripts": { "lint": "tslint '*.ts*'" } 

Tslint भी प्लगइन्स स्थापित करके सत्यापन नियमों का विस्तार करना संभव बनाता है। इस बिंदु पर, हम गूढ़ नियमों के समर्थन को जोड़ देंगे।

यार्न जोड़ने tslint-eslint- नियम --देव

Tslint कॉन्फ़िगरेशन में एक प्लगइन जोड़ने के लिए, हम प्लगइन नाम को "विस्तारित" फ़ील्ड में जोड़ते हैं:

 "extends": [ "tslint:recommended", "tslint-eslint-rules" ] 

टाइपस्क्रिप्ट पर जेस्ट और परीक्षण

जेस्ट जावास्क्रिप्ट कोड के परीक्षण के लिए एक रूपरेखा है। यह प्रतिक्रियाशील मूल अनुप्रयोगों के परीक्षण, समर्थन और विकास की सुविधा प्रदान करता है।

पहले आपको फ्रेमवर्क को स्थापित करने और टाइपस्क्रिप्ट समर्थन को जोड़ने की आवश्यकता है, क्योंकि स्थिर टाइपिंग के लिए कोडबेस को समर्थन के साथ लिखा गया था।

यार्न जोड़ --देव जेस्ट टीएस-जेस्ट @ प्रकार / जेस्ट

यह अतिरिक्त पैकेज स्थापित करने के लायक भी है:

• ts-jest - जावास्क्रिप्ट में टाइपस्क्रिप्ट टेस्ट कोड के संकलन और प्रसंस्करण के लिए
• @ प्रकार / जेस्ट - जेस्ट पर्यावरण से प्रकार जोड़ने के लिए
• प्रतिक्रिया-मूल-परीक्षण-पुस्तकालय - डोम के बिना प्रतिक्रिया घटकों के प्रतिपादन के लिए

और अंतिम चरण परीक्षणों के लिए एक विन्यास फाइल बनाना है:

यार्न ts-jest config: init

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

 module.exports = { jest: { preset: "react-native", transform: { "^.+\\.js$": "./node_modules/react-native/jest/preprocessor.js", "\\.(ts|tsx)$": "ts-jest" }, globals: { "ts-jest": { tsConfig: "tsconfig.json" } }, moduleFileExtensions: ["ts", "tsx", "js"], testRegex: "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$" } }; 

और अंत में, हमें पैकेज में परीक्षणों को चलाने के लिए कमांड जोड़ना चाहिए।

टेस्ट: यार्न टेस्ट

जेस्ट के लिए टेस्ट लिखना

आइए जेस्ट के लिए एक नमूना परीक्षण लिखने की कोशिश करें। ऐसा करने के लिए, हम एक App.test.tsx फ़ाइल बनाएंगे:

 export const helloFn = (name?: String = "World") => `Hello, ${$name}`; describe("hello function", () => { it("should return `hello world`", () => { expect(helloFn()).toEqual(`Hello, World`); }); it("should return `hello name`", () => { expect(helloFn("Zuck")).toEqual(`Hello, Zuck`); }); }); 

परीक्षण चलाने के लिए, हम पहले से निर्मित यार्न कमांड निष्पादित करते हैं:

 yarn test PASS ./App.test.tsx hello function ✓ should return `hello world` (4ms) ✓ should return `hello name` (1ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 1.316s Ran all test suites. Done in 2.74s. 

यदि आप उपरोक्त सभी को सही ढंग से करते हैं, तो परीक्षण सफलतापूर्वक पारित होने चाहिए। लेकिन आप अभी भी घटकों के लिए परीक्षण लिखने में सक्षम नहीं होंगे। चलो प्रतिक्रियाशील मूल घटकों के परीक्षण के लिए पर्यावरण का विस्तार करें।

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

यार्न ऐड-डी प्रतिक्रिया-परीक्षण-रेंडरर

इसके बाद हम App.tsx घटक के लिए एक सरल परीक्षण के साथ अपनी App.test.tsx फ़ाइल को अपडेट करते हैं।

 import React from "react"; import renderer from "react-test-renderer"; import App from "./App"; describe("App", () => { it("should display welcome message", () => { const tree = renderer.create(<App />); expect(tree.toJSON()).toMatchSnapshot(); expect(tree.root.findByType("Text").children).toContain( "Open up App.tsx to start working on your app!" ); }); }); 

हम परीक्षण वातावरण में मूल घटकों का परीक्षण कर सकते हैं। इस उदाहरण में, हमने टेक्स्ट टैग के लिए बाल तत्वों की एक सरणी प्राप्त की है। यह रिएक्टिव नेटिव पैकेज का एक मूल घटक है।

निष्कर्ष

इस प्रौद्योगिकी स्टैक ने हमें मूल अनुप्रयोगों को विकसित करने के लिए जल्दी से एक वातावरण बनाने की अनुमति दी है। स्थैतिक प्रकारों पर आधारित व्यावसायिक तर्क एप्लिकेशन को अधिक स्थिर बनाता है। टाइपस्क्रिप्ट की मजबूत टाइपिंग भी कोडिंग त्रुटियों से बचने में मदद करती है।

जेस्ट के भीतर रिएक्टिव नेटिव घटकों के लिए परीक्षण विकास बिल्कुल नियमित रिएक्ट अनुप्रयोगों के लिए समान है।

मुझे उम्मीद है कि यह लेख आपको प्रतिक्रियाशील मूल अनुप्रयोगों को विकसित करने के लिए एक वातावरण स्थापित करने के प्रारंभिक चरण को दूर करने में मदद करेगा।