So rüsten Sie Ihre React-Komponenten automatisch ein und sparen Zeit

Foto von Saksham Gangwar auf Unsplash

Bevor wir beginnen: In diesem Artikel wird der Beispielcode von JavaScript / Node.j verwendet. Sie können diese Konzepte jedoch mit den richtigen Tools in eine beliebige Sprache portieren.

Ein aufregendes Intro

Stellen Sie fest, dass Sie in Ihren Projekten immer wieder dieselben Dateien erstellen?

Ich auch.

Meine Finger tun weh!

Ich bin nicht überrascht. Sie nehmen den Robotern Arbeit ab.

Das wiederholte Erstellen derselben Dateien ist langweilig und unnötig.

TLDR? Ich habe dich - Hier ist eine Demo

Magische Automatisierung - wie versprochen.

Zeig mir den Code

Ich respektiere Ihr Gefühl der Dringlichkeit - ich komme auf den Punkt.

Der Code

Wir möchten die Dateierstellung automatisieren. Deshalb sind Sie heute alle aufgetaucht. Zuerst müssen wir die Dateien identifizieren, die wir erstellen möchten.

Ich habe in letzter Zeit viele React-Komponenten erstellt, daher dreht sich in meinem Setup alles darum - aber Sie können dies buchstäblich für alles optimieren.

Ich habe dies in vier Schritte unterteilt. Ich sage es Ihnen jetzt, damit Sie Ihre Erwartungen erfüllen können. Wenn Sie nichts länger als drei Schritte bewältigen können, haben wir Probleme ...

Schritt 1: Vorlagen

Richten Sie sie einmal ein und profitieren Sie.

Wir brauchen Vorlagen. Ich habe Vorlagenliterale verwendet, aber mache es so, wie es für dich sinnvoll ist - sei kreativ.

Dies sind die Dateien, die ich bei jeder Erstellung einer React-Komponente erstelle:

  1. index.jsx
  2. {Component} .test.js
  3. {Component} .sass

Hinweis: {Component} impliziert eine String-Interpolation.

Ich teste mit Jest und verwende die Kesselplatte zum Erstellen einer Reaktion. Ich weiß, dass viele Leute heutzutage CSS-in-JS bevorzugen - aber hey. Lassen Sie mich in den Kommentaren wissen, worauf Sie Lust haben.

Sowieso - hier gehen wir:

Das ist der chaotischste Code, den Sie hier sehen werden - kleines Versprechen.

Wir haben also ein Objekt mit drei Eigenschaften: index, test und sass. Jedes hostet eine Funktion, die einen Namen annimmt und eine Vorlage mit diesem interpolierten Namen zurückgibt. Klingt plausibel.

Schritt 2: Machen wir einige Funktionen!

Wir verwenden das mit Node gepackte fs-Modul. Es ist fabelhaft. Es macht viele Dinge.

Wir werden einige Pfeilfunktionen und ein wenig funktionale Programmierung verwenden. Hab keine Angst - mach einfach mit.

Die Syntax der Doppelpfeil-Funktion wird als Currying bezeichnet. Es ist in Ordnung, wenn es komisch aussieht. Ich war ausgeflippt, als ich es zum ersten Mal sah, aber es erlaubt super coole Sachen. Hier ist eine kurze Demo:

Das liegt also an einer Teilanwendung - es ist auch ein Abschluss.

Sidebar: Hoffentlich ruft mich hier niemand aus technischen Gründen an, aber bitte belästigen Sie mich in den Kommentaren, wenn Sie das Bedürfnis haben.

Machen wir weiter:

Zuerst benötigen wir fs. Wir brauchen es in unserem Leben.

Dann deklarieren wir fileExists als Funktionsausdruck.

Schließlich haben wir noch einen Funktionsausdruck mit dem Namen writeToPath. Es nimmt den Pfad und gibt eine andere Funktion zurück, die eine Dateizeichenfolge und den Inhalt dieser Datei akzeptiert. Anschließend wird die Datei geschrieben oder ein Fehler ausgegeben (Worst-Case-Szenario).

Verstehst du es richtig? Wir erstellen gerade einige Dateien.

Schritt 3: Treffen Sie Chokidar

Lustige Tatsache: Es ist ein Hindi-Wort.

Chowkidar - (Indien) Wächter, Hausmeister, Pförtner; einer, der ein „Chowki“, eine Polizeistation oder ein Wachhaus bewohnt.

Wir sprechen jedoch über das npm-Paket. Es basiert auf unserem neuen Freund fs und du könntest es für so viele entzückende Dinge verwenden.

Es überwacht unsere Akten für uns wie ein Falke.

Na ja, nicht gerade wie ein Falke.

Es ist kein Vogel.

Wie überhaupt.

Hier ist der Code ...

Zuerst brauchen wir es.

Als nächstes definieren wir, was wir sehen wollen. Ich beobachte das Verzeichnis src / components, aber Sie können jeden Satz von Pfaden beobachten. Sie können sogar eine Reihe von Pfaden übergeben. Wenn Sie den ** Teil in src / components / ** nicht erkennen, spricht man von einem Glob-Muster.

Danach definieren wir, auf welche Ereignisse wir hören wollen. Ich empfange nur das Hinzufügen eines Verzeichnisses mit der Erweiterung ".on" ("addDir"), aber Sie können auch nach anderen Ereignissen suchen.

Als nächstes extrahieren wir den Namen der Komponente, indem wir alles vor dem Komponentennamen ersetzen:

src / components / Header / components / Title

wird

Titel

Abschließend prüfen wir, ob der Komponentenname diesen regulären Ausdruck enthält:

/ ^ [^ \ / _] * $ /

Solange es keinen Schrägstrich oder Unterstrich gibt, kann es losgehen. Dadurch wird vermieden, dass versehentlich __tests__ -Ordner oder verschachtelte / -Verzeichnisse verschmutzt werden.

Schritt 4: Zeit, einige Dateien zu machen!

Sie haben den letzten Schritt erreicht. Herzliche Glückwünsche! Es war ziemlich gut.

Diese nächste Funktion trägt den passenden Namen createFiles.

Es ist ein bisschen chaotisch - es könnte überarbeitet werden.

Ich entschuldige mich im Voraus, wenn der folgende Code Sie beleidigt.

Lassen Sie uns graben in:

Also deklarieren wir oben das files-Objekt - es ist eine Liste von Dateinamen-Strings, in die wir den name-Parameter einfügen. Möglicherweise haben Sie bemerkt, dass es dieselben Schlüssel wie das Vorlagenobjekt hat. Das ist wichtig.

Die if-Anweisung ist sehr spezifisch für mein Setup. Ich möchte meine Dateien nicht erstellen, wenn der neue Ordner als Komponenten bezeichnet wird. Ich erstelle nur Komponenten in einem Komponenten-Unterordner.

  • writeFile ist unsere teilweise angewendete Funktion writeToPath. Diese Funktion erstellt eine Datei im angegebenen Pfad, wenn sie mit einem Dateinamen und etwas Inhalt aufgerufen wird.
  • toFileMissingBool verwendet einen Dateinamen und gibt true zurück, wenn diese Datei im angegebenen Pfad nicht vorhanden ist. Ich weiß, dass die Funktionsnamen seltsam sind, aber ich verspreche, dass es in ein paar Zeilen mehr Sinn macht.
  • checkAllMissing ist eine Funktion, die wir reduzieren wollen. Es benötigt zwei Boolesche Werte und gibt true zurück, wenn beide true sind. Das ist Boolesche Algebra. Wir verwenden auch die Reduktionsmethode von Array. Haben Sie keine Angst vor dem Reduzieren. Es ist super cool und in solchen Situationen sehr nützlich.

Lassen Sie uns über die Variable noneExist sprechen. Wenn dies zutrifft, ist keine der zu erstellenden Dateien im neuen Ordner vorhanden. Die Idee ist, dass Sie sich nicht mit einem Ordner anlegen, nur weil er keine Testdatei oder Sass-Datei enthält. Möglicherweise benötigt dieser Ordner keinen.

const noneExist = Object.values ​​(Dateien)
  .map (toFileMissingBool)
  .reduce (checkAllMissing);

Deshalb habe ich die oben genannten seltsam benannten Funktionen erstellt.

Wir ordnen die Werte in Dateien einem Booleschen Wert zu, der angibt, ob diese Datei fehlt oder nicht. Dann nehmen wir dieses Array von Booleschen Werten und reduzieren sie auf einen einzigen Booleschen Wert, der angibt, ob alle Dateien vorhanden sind oder nicht.

Wenn sie also alle wahr sind, ist noneExist auch wahr. Aber wenn auch nur einer falsch ist, wird noneExist falsch sein.

Ich hoffe du hast das alles. Es ist ein bisschen mundvoll.

Letztes Stück Code:

Object.entries (files) .forEach (([type, fileName]) => {
  writeFile (Dateiname, Vorlagen [Typ] (Name));
});

Wir nehmen den Schlüssel (Typ) und den Wert (Dateiname) und schreiben eine Datei in den angegebenen Pfad mit dem Inhalt aus der entsprechenden Vorlage.

Flosse.

“Große Meeresschildkröte, die am Kaputas Beach durch den Ozean schwimmt” von Randall Ruiz auf Unsplash

Das Bild einer Meeresschildkröte zeigt, wie frei Sie sich fühlen müssen, wenn Sie alles automatisiert haben.

Wenn Sie den gesamten Code für die automatische Erstellung von Reaktionskomponenten benötigen, finden Sie ihn hier.

Lassen Sie mich wissen, was Sie dachten - Bleiben Sie in Kontakt.

Sagen Sie mir, wenn Sie Fehler finden.

Folge mir auf Twitter, Medium oder Github.

Wenn du glücklich bist und weißt, dass es in deine Hände klatscht!