البيئة الحديثة للتطبيقات الأصلية

في هذه المقالة ، سننظر في إعداد بيئة React Native باستخدام expo- cli و Typescript و Jest .

سوف يساعدنا Typescript في تجنب أخطاء التطوير وكتابة تطبيق محمول أكثر كفاءة.

التطورات الحديثة تسمح بدمج Typescript في بيئة التطوير. يمكننا أيضًا استخدام VS Code ، والذي يدعم Typescript تمامًا.

أيضًا ، سوف يتيح لنا التكامل مع React Native الفرصة لاستخدام خدمة الإكمال التلقائي والتنقل عبر الكود وإعادة المعالجة.

Expo عبارة عن مجموعة من الأدوات التي تعمل على تبسيط إنشاء تطبيقات React الأصلية. في هذا البرنامج التعليمي ، سأوضح لك كيف يمكنك بناء تطبيقات React الأصلية بسرعة باستخدام Expo.

إنشاء مشروع

أولاً ، قم بتثبيت جميع التبعيات اللازمة لإنشاء قالب التطبيق من الغزل.

غزل العالمي إضافة المعرض

بعد ذلك ، نقوم بتهيئة تطبيق React Native وتحديد قالب Typescript الفارغ.

~/ 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 

الآن يمكننا بدء المشروع والبدء في تطوير التطبيق.

القرص المضغوط exampleApp
بداية الغزل

تكوين Tslint

سنقوم بتكوين tslint لاستخدام VSCode أو أي محرر آخر بشكل صحيح ومشاهدة الأخطاء في مرحلة التطوير. بهذه الطريقة سوف نضمن نمط رمز موحد ومنع مضاعفاته.

أولاً ، نقوم بتثبيت حزمة tslint في الدليل العام:
إضافة الغزل العالمية tslint

بعد ذلك ، قم بإنشاء تكوين tslint:
tslint - في

سيقوم هذا الأمر بإنشاء ملف tslint.json بالتكوين التالي:

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

بعد ذلك ، فقط تحقق من ملفات typescript باستخدام التكوين الخاص بنا:
tslint 'src / ** / *. ts'

بعد ذلك ، سيستخدم VS Code تلقائيًا ملف التكوين للتحقق من صحة الرمز في المحرر. سيتم عرض أخطاء الكتابة في المحرر عند تطوير التطبيق.

أيضا ، للراحة ، إضافة أوامر للغزل. يمكن استخدامها للتنمية المحلية أو للتحقق في مرحلة التكامل المستمر.
"البرامج النصية": {
"Lint": "tslint '* .ts *'"
}

يدعم Tslint أيضًا القدرة على تمديد قواعد التحقق من الصحة عن طريق تثبيت المكونات الإضافية. في هذه المرحلة ، سنضيف دعم eslint للقواعد.
إضافة الغزل tslint-eslint-rules --dev

لإضافة مكون إضافي إلى تكوين tslint ، ما عليك سوى إضافة اسم المكون الإضافي إلى حقل الامتدادات:

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

اختبارات Jest و Typescript

Jest هو إطار لاختبار كود Javascript. فإنه يسهل اختبار ودعم وتطوير تطبيق React Native.

تحتاج أولاً إلى تثبيت إطار العمل وإضافة دعم للطباعة على الآلة الكاتبة ، لأن قاعدة الشفرة تتم كتابتها بدعم من الكتابة الثابتة.

إضافة الغزل --dev jest ts-jest @ types / jest

يجدر أيضًا تثبيت حزم إضافية:

• ts-jest - معالجة وتجميع شفرة اختبار typescript في javascript
• @ types / jest - أضف أنواعًا من بيئة Jest
• رد فعل اختبار مكتبة الأصلي - يسمح تقديم مكونات React دون الربط إلى DOM

والخطوة الأخيرة هي إنشاء ملف تكوين للاختبارات:

خيوط ts-jest config: الحرف الأول

سيقوم هذا الأمر بإنشاء ملف تكوين من القالب. سوف نقوم بتغييره قليلاً من أجل بيئة React Native. سيبدو الملف كالتالي:

 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:

اختبار: اختبار الغزل

نكتب اختبارات لل Jest

دعنا نحاول كتابة مثال لاختبارات Jest. للقيام بذلك ، قم بإنشاء الملف 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. 

كل الاختبارات كانت ناجحة. لكن في الوقت الحالي ، لا يمكننا كتابة اختبارات للمكونات. دعونا نحاول توسيع بيئتنا لاختبار المكونات React Native.
سوف نحتاج إلى حزمة أخرى - رد فعل اختبار رد الفعل. إنه يوفر محرك عرض خاص لـ React والذي يعطي بنية Javascript في ناتجها. وبالتالي ، لا نحتاج إلى تكوين DOM أو الوحدات النمطية الأصلية في بيئة اختبار.

الغزل إضافة -D رد فعل اختبار العارض

بعد ذلك ، قم بتحديث ملف App.test.tsx الخاص بنا من خلال اختبار بسيط لمكون App.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!" ); }); }); 

يمكننا اختبار المكونات الأصلية في بيئة اختبار. في هذا المثال ، حصلنا على مجموعة من الأطفال من علامة النص. هذا مكون أصلي من حزمة React Native.

استنتاج

مكدسة التقنية هذه سمحت لنا بتهيئة بيئة لتطوير التطبيقات المحلية بسرعة. منطق الأعمال باستخدام أنواع ثابتة يجعل التطبيق أكثر استقرارا. الكتابة القوية لل Typescript تساعد أيضًا في تجنب أخطاء الترميز.
تطوير الاختبار داخل Jest for React Native المكونات هو نفسه تمامًا كتطبيق منتظم React.

آمل أن يساعدك هذا المقال في التغلب على المرحلة الأولى من إعداد البيئة لتطوير تطبيقات React Native.