ReactJS und Typescript – Probleme und Hilfestellung bei der Verwendung von Plugins

Wer eine ganze Applikation oder nur ein kleines Tool mit ReactJS schreiben will, kommt früher oder später darauf externe Plugins verwenden zu wollen. Gerade (halb)komplexe Bereiche, die als eigener Component funktionieren bieten sich an. Besonders wenn man diese nur noch installieren und konfigurieren muss… aber gerade hier kommt einem die Verwendung von Typescript noch nicht zu pass, gerade wenn man auch die typensichere Deklaration nach OOP Standards einhalten will (sonst könnte man das mit dem Typescript auch lassen…).

Aus meiner Erfahrung kann ich da sagen, das funktioniert unter bestimmten Voraussetzungen sehr gut. Nämlich wenn man sich vorab einen Plan gemacht hat was wie umgesetzt werden soll. Ich führe hier nun die größten Baustellen auf, die mir bisher begegnet sind und die einem Einsteiger sicherlich Stunden des wilden googelns ersparen.

React Component installation
React Component installation – hat nicht so geklappt, die React Versionen passen so nicht zusammen. Da muss man nochmal ran.

Das Beispiel

Damit ich an einem echten Beispiel rezitieren kann, hier der kurze Scope:

Wir wollen ein kleines Formular, als Filter, mit einer Listenausgabe machen. Städte mit Einwohnerzahlen. Dazu soll der Anfangsbuchstabe auswählbar sein und man über einen Range-Slider die Einwohnerzahl Filtern können.

Verwendung von Packages

Eigentlich verhält es sich wie bei jedem guten Projekt, eine gute Planung ist die halbe Miete. Macht euch einen  Bauplan, welcher Bereich wird ein eigener Component, welche Funktionen werden hier benötigt und möchte ich dafür ein Plugin verwenden.

So habe ich nun geplant, bis auf den Range-Slider alle Components selber zu schreiben. Wer „ReactJS Range solider“ googelt, findet schnell einige Ergebnisse. Diese haben zumeist Dokumentation sowie auch Beispiele zum Ausprobieren.

Wie zum Beispiel: https://github.com/react-component/slider
Die Anleitung, wie mit dem einzelnen Component umgegangen werden muss, findet ihr in der Regel auf der Github-Seite oder in der README.md.

Wenn der passende gefunden ist, steht der Kommandozeilen-Befehl meist auch direkt dabei. Hier muss man nun nur ins eigene Projekt mittels Terminal und den Befehl ausführen.

Versionsprobleme

Die Installation selber erfolgt dann über npm oder yarn (oder einen anderen Package Manager), jenachdem welcher euch lieber ist. Läuft die Installation problemlos durch, super, der Erste Schritt ist gemacht.

Gibt es Fehler, so wird euch der Package Manager direktes Feedback geben was nicht passte. Und hier beginnt es dann tricky zu werden. Wenn ihr mit create-react-app ein Projekt erstellt, wird dies mit einer bestimmten Version von React‘s Basis Library gemacht. Setzt das Plugin eine ältere Version voraus, kann das Plugin nicht verwendet werden.

Natürlich kann man auch die Basis React Version in der package.json herabsetzen. Jedoch könnten andere Bereiche dann nicht mehr funktionieren.

Ich versuche deshalb meine Projekte auch bei kleineren Sachen mit GIT zu stützen. Wo ich weiß das ich eventuell etwas mehr ausprobieren muss, portiere ich diese Tests in einzelne Branches. So kann man dann immer noch schnell verwerfen oder bei passendem Plugin auf den Master-Branch mergen.

Falle Typensicherheit

Wenn man die Standard tslint.json als Development-Standard verwendet, wird einem auf kurz oder lang diese auch mal aufs Dach steigen bei der Einbindung eines extra Plugins. Die tslint.json achtet nicht nur auf die Typensicherheit und Definition eurer Variablen und Klassen. Darüberhinaus werden natürlich auch die eingebunden Klassen geprüft. Aktuell gibt es noch recht viele Plugins, die über keine „tslint.json gerechte Definition“ verfügen. Mit dem Ergebnis das eure Applikation nicht mehr transpiliert und ausgeführt wird.

RequireJS als Workaround

import MyComponent from 'Components/MyComponent';`
So sollte das eigentlich aussehen, im Falle einer fehlenden Typendefinition innerhalb der Component könnt ihr aber auch den Workaround requireJS verwenden:
let MyComponent = require('Components/MyComponent');`
Ohne groß hier auf das wie und warum eingehen zu wollen (wer das hier liest, möchte ja vielleicht schnell zu einer Lösung kommen), über diesen Weg könnt ihr das Modul dann vielleicht dann doch noch nutzen.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.