Einer der Vorteile der Verwendung von React ist, dass Sie UI-Komponenten erstellen, sie in Ihrer gesamten Anwendung wiederverwenden und letztendlich Code-Churn vermeiden können. Dennoch ist es schwierig, mit React allein völlig unabhängige UI-Komponenten zu erstellen. Sie müssen Ansichten erstellen, die diese Komponenten anzeigen, um sie anzuzeigen.
Hier kommt Storybook ins Spiel. Es ermöglicht Ihnen, UI-Komponenten in einer unabhängigen Laufzeitumgebung zu erstellen und zu testen, und in diesem Tutorial erfahren Sie, wie Sie es in React verwenden. Am Ende dieses Beitrags haben Sie eine Schaltflächenkomponente erstellt und einige ihrer möglichen Zustände in React dokumentiert.
Was ist Märchenbuch?
Märchenbuch ist ein Entwicklungstool, mit dem Sie Ihre UI-Komponenten ohne eine vollständige React-Umgebung ausführen und testen können. Das macht Komponentengetriebene Entwicklung einfacher, da Sie die Komponenten isoliert entwickeln können.
Mit Storybook können Sie nach dem Erstellen einer Komponente mehrere Storys erstellen, die die verschiedenen Zustände der Komponente definieren. Bei einer Schaltflächenkomponente können diese Zustände den primären Zustand, den sekundären Zustand, den deaktivierten Zustand usw. umfassen.
Da Storybook es Ihnen ermöglicht, beim Erstellen der Geschichten Code einzufügen, kann es auch als Dokumentationstool dienen.
Um Storybook verwenden zu können, müssen Sie Node auf Ihrem Computer installiert haben und über ein grundlegendes Verständnis von React verfügen.
Erstellen einer React-Anwendung
Um Storybook zu verwenden, Sie werden zuerst ein React-Projekt erstellen und erstellen Sie dann Komponenten und ihre Geschichten.
Führen Sie den folgenden Befehl aus, um eine React-Anwendung zu erstellen:
npx schaffen-react-app btn-storybook
Dadurch wird ein Ordner namens btn-storybook mit allen Abhängigkeiten generiert, die eine React-Anwendung benötigt.
Als nächstes können Sie mit nur wenigen weiteren Schritten Storybook installieren und ausführen.
Geschichtenbuch installieren
Navigieren Sie zum Ordner btn-storybook und installieren Sie storybook:
CD btn-Geschichtenbuch
npx Storybook-Init
Da Sie create-react-app verwendet haben, ist dies der einzige Befehl, den Sie ausführen müssen, um Storybook einzurichten. Storybook installiert alle erforderlichen Abhängigkeiten und führt die erforderliche Konfiguration durch. Es wird auch einige Boilerplate-Geschichten erstellen, um Ihnen den Einstieg zu erleichtern.
Sobald der obige Befehl ausgeführt wurde, starten Sie Storybook mit dem folgenden Code.
npm Storybook ausführen
Dadurch wird das Storybook-Dashboard in Ihrem Browser geöffnet. Es sollte etwa so aussehen:
Erstellen der Schaltflächenkomponente
Erstellen Sie im Ordner ./src einen Ordner namens Components und darin einen weiteren Ordner namens Button. Der Button-Ordner sollte sich in diesem Pfad befinden: ./src/Components/Button.
Erstellen Sie nun in diesem Ordner Button und fügen Sie den folgenden Code hinzu:
importieren PropTypes aus "Prop-Typen"
function Button({ label, backgroundColor = "#6B4EFF", Farbe = "Weiß", RandRadius="48px", Rand="keiner"}) {
konst Stil = {
Hintergrundfarbe,
Polsterung: "0,5 Rem 1 Rem",
Farbe,
GrenzeRadius,
Grenze
}
Rückkehr (
<Schaltflächenstil = {Stil}>
{Etikett}
</button>
)
}
Button.propTypes = {
Etikett: PropTypes.Zeichenfolge,
Hintergrundfarbe: PropTypes.Zeichenfolge,
Farbe: PropTypes.Zeichenfolge,
Grenze:PropTypes.string,
RandRadius: PropTypes.Zeichenfolge,
}
ExportUrsprünglich Taste;
Diese Komponente akzeptiert einige Requisiten reagieren Dazu gehören die Schaltflächenbeschriftung und ihre Stile. Sie verwenden propTypes auch, um die Typen der übergebenen Requisiten zu überprüfen und eine Warnung auszulösen, wenn Sie den falschen Typ verwenden. Die Komponente gibt ein Schaltflächenelement zurück.
Erstellen der Schaltflächengeschichten
Als Sie Storybook im React-Projekt installiert haben, wurde ein Ordner mit einigen Story-Beispielen mit dem Namen Geschichten. Navigieren Sie zu diesem Ordner und löschen Sie alles darin. Sie werden die Geschichten von Grund auf neu erstellen.
Sie erstellen zwei Storys, die die primäre Schaltfläche und die sekundäre Schaltfläche darstellen. Jede dieser Schaltflächen hat einen anderen Stil, der sie von den anderen unterscheidet. Sie können jede von ihnen im Storybook-Dashboard sehen, sobald Sie die Geschichten erstellt haben.
Erstellen Sie im Stories-Ordner eine neue Datei namens button.stories.js. Es ist wichtig einzubeziehen .Geschichten vor .js, da dies Storybook mitteilt, dass es sich um eine Stories-Datei handelt.
Importieren Sie die Button-Komponente.
importieren Taste aus "../Komponenten/Schaltfläche/Schaltfläche"
Als nächstes exportieren Sie den Titel der Komponente und die Komponente selbst. Beachten Sie, dass der Titel optional ist.
ExportUrsprünglich {
Titel: "Komponenten/Schaltfläche",
Komponente: Knopf,
}
Die erste Geschichte, die Sie erstellen, ist für die primäre Schaltfläche. Erstellen Sie also eine neue Funktion namens Primary und exportieren Sie sie.
export const Primary = () =><Hintergrundfarbe der Schaltfläche ="#6B4EFF" Bezeichnung="Primär"/>
Wenn Sie jetzt zum Storybook-Dashboard gehen, können Sie die gerenderte Schaltfläche sehen.
Um die gerenderte Komponente live zu bearbeiten und ihren Status im Storybook-Dashboard zu ändern, verwenden Sie args. Mit Args können Sie Argumente an Storybook übergeben, die bei Änderung dazu führen, dass die Komponente neu gerendert wird.
Um die Argumente der Schaltflächengeschichte zu definieren, erstellen Sie eine Funktionsvorlage.
const Template = args =><Schaltfläche {...Argumente}/>
Diese Vorlage akzeptiert Argumente und übergibt sie als Requisiten an die Button-Komponente.
Sie können jetzt die primäre Geschichte mithilfe der unten gezeigten Vorlage umschreiben.
Exportkonst Primär = Template.bind({})
Primary.args = {
Hintergrundfarbe: "#6B4EFF",
Etikett: "Primär",
}
Wenn Sie das Storybook-Dashboard überprüfen, sollten Sie unten Steuerelemente sehen. Mit diesen Steuerelementen können Sie ändern, wie die Schaltfläche angezeigt wird. Sie können Hintergrundfarbe, Textfarbe, Beschriftung, Rahmen und Rahmenradius ändern.
Sie müssen nur die args-Werte ändern, um die anderen Storys zu erstellen. Um beispielsweise eine sekundäre Schaltfläche zu erstellen, verwenden Sie den folgenden Code.
Exportkonst Sekundär = Template.bind({})
Secondary.args = {
Hintergrundfarbe: "#E7E7FF",
Farbe: "#6B4EFF",
Etikett: "Sekundär",
}
Navigieren Sie im Storybook-Dashboard zu verschiedenen Storys, indem Sie in der Seitenleiste darauf klicken. Sie werden sehen, wie jeder rendert. Sie können den Schaltflächengeschichten nach Belieben weitere Zustände hinzufügen. Versuchen Sie, eine Gliederung oder eine Gliederungsgeschichte hinzuzufügen.
Testen von UI-Komponenten
Dieses Tutorial gab Ihnen eine kurze Einführung in die Verwendung von Storybook mit React-UI-Komponenten. Sie haben gelernt, wie man Storybook zu einem React-Projekt hinzufügt und wie man eine einfache Story für eine Button-Komponente mit Argumenten erstellt.
Sie haben vielleicht bemerkt, dass Sie während dieses Prozesses getestet haben, wie die Schaltflächenkomponente in verschiedenen Zuständen gerendert wurde. Möglicherweise schreiben Sie mehr Code, aber sobald Sie die Komponentengeschichten geschrieben haben, minimieren Sie alle Fehler, die bei der Wiederverwendung von Komponenten in Ihrer Anwendung auftreten können. Darüber hinaus wird es einfacher sein, den Fehler aufzuspüren, wenn er auftritt. Das ist das Schöne an der komponentengetriebenen Entwicklung.
