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

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

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

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

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

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

एक प्रोजेक्ट बनाएं

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

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

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

~/ expo init exampleApp ? Choose a template: expo-template-blank-typescript Please enter a few initial configuration values. Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed ? Yarn v1.15.2 found. Use Yarn to install dependencies? Yes 

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

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

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

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

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

अगला, tslint कॉन्फ़िगरेशन बनाएं:
tslint - इनिट

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

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

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

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

इसके अलावा, सुविधा के लिए, यार्न के लिए कमांड जोड़ें। उनका उपयोग स्थानीय विकास के लिए या निरंतर एकीकरण के चरण में सत्यापन के लिए किया जा सकता है।
"लिपियों": {
"लिंट": "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)$" } }; 

और अंत में, package.json में परीक्षण चलाने के लिए कमांड जोड़ें:

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

हम जेस्ट के लिए परीक्षण लिखते हैं

आइए जेस्ट के लिए परीक्षणों का एक उदाहरण लिखने का प्रयास करें। ऐसा करने के लिए, फ़ाइल बनाएं। 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. 

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

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

इसके बाद, 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!" ); }); }); 

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

निष्कर्ष

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

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