Moderne Umgebung für React Native-Anwendungen

In diesem Artikel werden wir uns mit dem Einrichten einer React Native- Umgebung mit expo-cli , Typescript und Jest befassen .

Mit Typescript können wir Entwicklungsfehler vermeiden und eine effizientere mobile Anwendung schreiben.

Moderne Entwicklungen ermöglichen die Integration von Typescript in die Entwicklungsumgebung. Wir können auch VS-Code verwenden, der Typescript perfekt unterstützt.

Durch die Integration in React Native haben wir außerdem die Möglichkeit, den Auto-Completion-Service, die Code-Navigation und das Refactoring zu nutzen.

Expo ist eine Suite von Tools, die die Erstellung nativer React-Anwendungen vereinfachen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit Expo schnell native React-Anwendungen erstellen können.

Erstellen Sie ein Projekt

Installieren Sie zunächst alle Abhängigkeiten, die zum Erstellen der Anwendungsvorlage erforderlich sind, aus Garn.

Garn global add expo-cli

Als Nächstes initialisieren wir die React Native-Anwendung und wählen die leere Typescript-Vorlage aus.

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

Jetzt können wir das Projekt starten und mit der Entwicklung der Anwendung beginnen.

cd exampleApp
Garnstart

Tslint-Konfiguration

Wir werden tslint so konfigurieren, dass VSCode oder ein anderer Editor korrekt verwendet wird und Fehler in der Entwicklungsphase angezeigt werden. Auf diese Weise stellen wir einen einheitlichen Codestil sicher und verhindern dessen Komplikation.

Zuerst installieren wir das tslint-Paket im globalen Verzeichnis:
Garn global hinzufügen tslint

Erstellen Sie als Nächstes die tslint-Konfiguration:
tslint --init

Dieser Befehl erstellt die Datei tslint.json mit der folgenden Konfiguration:

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

Als nächstes überprüfen Sie einfach die Typoskriptdateien mit unserer Konfiguration:
tslint 'src / ** / *. ts'

Danach verwendet VS Code automatisch die Konfigurationsdatei, um den Code im Editor zu validieren. Tippfehler werden bei der Entwicklung der Anwendung im Editor angezeigt.

Fügen Sie der Einfachheit halber auch Befehle für Garn hinzu. Sie können zur lokalen Entwicklung oder zur Überprüfung in der Phase der kontinuierlichen Integration verwendet werden.
"Skripte": {
"Lint": "tslint '* .ts *'"
}}

Tslint unterstützt auch die Möglichkeit, Validierungsregeln durch die Installation von Plugins zu erweitern. An dieser Stelle werden wir eslint-Unterstützung für die Regeln hinzufügen.
Garn hinzufügen tslint-eslint-Regeln --dev

Um der tslint-Konfiguration ein Plugin hinzuzufügen, fügen Sie einfach den Plugin-Namen zum erweiterten Feld hinzu:

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

Scherz- und Typoskripttests

Jest ist ein Framework zum Testen von Javascript-Code. Es erleichtert das Testen, Unterstützen und Entwickeln einer React Native-Anwendung.

Zuerst müssen Sie das Framework installieren und Typoskript-Unterstützung hinzufügen, da die Codebasis mit Unterstützung für statische Typisierung geschrieben wurde.

Garn hinzufügen --dev Scherz ts-jest @ types / jest

Es lohnt sich auch, zusätzliche Pakete zu installieren:

• ts-jest - verarbeitet und kompiliert Typoskript-Testcode in Javascript
• @ types / jest - Fügt Typen aus der Jest-Umgebung hinzu
• React -Native-Testing-Bibliothek - Ermöglicht das Rendern von React-Komponenten ohne Bindung an das DOM

Der letzte Schritt besteht darin, eine Konfigurationsdatei für die Tests zu erstellen:

Garn ts-jest config: init

Dieser Befehl generiert eine Konfigurationsdatei aus der Vorlage. Wir werden es für die React Native-Umgebung ein wenig ändern. Die Datei sieht folgendermaßen aus:

 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)$" } }; 

Fügen Sie abschließend den Befehl zum Ausführen der Tests in package.json hinzu:

Test: Garnprüfung

Wir schreiben Tests für Jest

Versuchen wir, ein Beispiel für Tests für Jest zu schreiben. Erstellen Sie dazu die Datei 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`); }); }); 

Führen Sie den zuvor erstellten Garnbefehl aus, um die Tests auszuführen:

 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. 

Alle Tests waren erfolgreich. Derzeit können wir jedoch keine Tests für Komponenten schreiben. Versuchen wir, unsere Umgebung zum Testen von React Native-Komponenten zu erweitern.
Wir brauchen noch ein Paket - React-Test-Renderer. Es bietet eine spezielle Rendering-Engine für React, die in ihrer Ausgabe eine Javascript-Struktur aufweist. Daher müssen wir DOM oder native Module in einer Testumgebung nicht konfigurieren.

Garn hinzufügen -D React-Test-Renderer

Aktualisieren Sie als Nächstes unsere Datei App.test.tsx mit einem einfachen Test für die Komponente 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!" ); }); }); 

Wir können native Komponenten in einer Testumgebung testen. In diesem Beispiel haben wir eine Reihe von untergeordneten Elementen aus dem Text-Tag erhalten. Dies ist eine native Komponente aus dem React Native-Paket.

Fazit

Mit diesem Technologie-Stack konnten wir schnell eine Umgebung für die Entwicklung nativer Anwendungen erstellen. Geschäftslogik mit statischen Typen macht die Anwendung stabiler. Die starke Typisierung von Typescript hilft auch dabei, Codierungsfehler zu vermeiden.
Die Testentwicklung in Jest for React Native-Komponenten entspricht genau der für eine reguläre React-Anwendung.

Ich hoffe, dieser Artikel hilft Ihnen dabei, die Anfangsphase der Einrichtung der Umgebung für die Entwicklung von React Native-Anwendungen zu überwinden.