Verwenden Sie die CLI, um Komponenten in ReactJS zu generieren

1. Verwenden Sie generate-react-cli, um Komponenten für das React-Projekt zu generieren
2. Verwenden Sie Visual Studio-Codeerweiterungen

React-Webanwendungen bestehen oft aus komplexen Komponentenbäumen. Daher kann es von Vorteil sein, eine organisierte Struktur zum Speichern aller Komponenten im Projektordner zu haben.

Es gibt viele Möglichkeiten, eine anfängliche Umgebung zum Erstellen der React-Anwendung zu generieren. Am einfachsten ist die Verwendung der create-react-app, entwickelt vom React-Team bei Facebook.

React-Entwickler müssen häufig grundlegende Boilerplate-Codes kopieren und einfügen, um Komponenten zu generieren. Es sind jedoch viele Lösungen verfügbar, um den erforderlichen Code schnell zu generieren.

Verwenden Sie generate-react-cli, um Komponenten für das React-Projekt zu generieren

Dieses Paket kann Ihnen helfen, beim Erstellen neuer Komponenten viel Zeit für das Kopieren und Einfügen von Boilerplate-Code zu sparen.

Installieren Sie dieses Paket und führen Sie den folgenden grundlegenden Befehl in der Befehlszeilenschnittstelle aus.

npx generate-react-cli component SomeComponent

Es wird ein neuer Ordner mit dem Namen SomeComponent generiert, der je nach Projekttyp benutzerdefinierte JavaScript-, CSS- und andere Dateien enthält.

Die Struktur Ihres Projekts sieht in etwa so aus:

|-- /src
    |-- /components
        |-- /SomeComponent
            |-- SomeComponent.js
            |-- SomeComponent.css
            |-- SomeComponent.test.js

Wenn Sie zum ersten Mal den Befehl generate-react-cli verwenden, um eine Komponente zu generieren, werden Ihnen Fragen gestellt, die Sie beantworten können, um den spezifischen Dateityp für Ihr Projekt zu erhalten. Beispielsweise können Sie angeben, dass Sie TypeScript-Dateien anstelle von generischem JavaScript benötigen.

Sobald Sie alle Fragen beantwortet haben, erstellt GRC eine generate-react-cli.json-Datei, die Ihre Auswahl speichert. Der Befehl überprüft diese Datei, um festzustellen, welche Art von Dateien standardmäßig generiert werden soll.

Sie können zu dieser Datei gehen und die Optionen ändern, um die Funktionalität des Befehls generate-react-cli anzupassen.

Sie können das Standardverhalten auch überschreiben, indem Sie beim Schreiben des Befehls generate-react-cli einmalige Anweisungen hinzufügen.

Angenommen, Sie möchten auch eine Storybook-Datei für eine Komponente generieren. Sie können dies tun, indem Sie den folgenden Befehl ausführen.

npx generate-react-cli component Box --withStory=true

Standardmäßig generiert GRC weiterhin Komponentendateien ohne Storybook. Aber ein einziges Mal wird auch eine Storybook-Datei generiert.

Verwenden Sie Visual Studio-Codeerweiterungen

Eine einfachere Lösung ist die Verwendung von Codeerweiterungen, die für Visual Studio Code verfügbar sind.

Sie müssen Ordner und Dateien für Komponenten manuell erstellen, aber Sie können Verknüpfungen verwenden, um den Boilerplate-Code zu generieren.

Mit dieser Erweiterung können Sie beispielsweise rcc eingeben und auf die Registerkarte klicken, und die Erweiterung generiert den erforderlichen Code für Sie.