React Storybook: Entwickeln Sie mühelos schöne Benutzeroberflächen

Zu Beginn eines Front-End-Projekts wird normalerweise zuerst eine schöne Schnittstelle entworfen. Sie planen und zeichnen alle UI -Komponenten und ihre verschiedenen Zustände und Effekte. Die Dinge ändern sich jedoch während der Entwicklung. Neue Anforderungen und unvorhergesehene Anwendungsfälle entstehen nacheinander. Die anfänglich schöne Bibliothek der Komponenten deckt nicht alle diese Anforderungen ab, sondern müssen weiterhin neue Designs hinzufügen.

Wenn Sie zu diesem Zeitpunkt Design -Experten in Ihrer Nähe haben, ist es großartig, aber sie haben oft zu anderen Projekten gewechselt, sodass Entwickler allein mit diesen Änderungen umgehen lassen. Infolgedessen beginnt die Konsistenz zu sinken. Es ist schwierig, vorhandene Komponenten in der Komponentenbibliothek, ihres Status und ihres Aussehens zu verfolgen.

Um diese Designverwirrung zu vermeiden, ist es normalerweise am besten, separate Dokumente für alle Komponenten zu erstellen. Obwohl für diesen Zweck eine Vielzahl von Tools zur Verfügung stehen, konzentriert sich dieser Artikel auf ein React Storybook, ein Tool, das speziell für React -Anwendungen entwickelt wurde. Sie können problemlos eine Sammlung von Komponenten und deren Funktionen durchsuchen. Die React native Komponentenbibliothek ist ein Beispiel für eine solche Anwendung.

Schlüsselpunkte

• Vereinfachen Sie die UI -Entwicklung: React Storybook vereinfacht den Entwicklungs- und Managementprozess von UI -Komponenten und ermöglicht Entwicklern, Komponenten unabhängig zu erstellen und ihr Verhalten in Echtzeit zu visualisieren.
• Verbesserte Zusammenarbeit: dient als eine Kollaborationsplattform, die die Lücke zwischen Designer, Entwicklern und anderen Stakeholdern überbrückt, indem sie einen einzelnen Standort für die Anzeige und Interaktion mit allen UI -Komponenten bereitstellen.
• Anpassbar und skalierbar: bietet eine breite Palette von Anpassungsoptionen mit Add-Ons und Konfigurationseinstellungen, sodass Entwickler Tools an ihre spezifischen Projektanforderungen anpassen können.
• unterstützt automatisierte Tests: Integriert in Scherz- und andere Test -Frameworks, um direkte automatisierte Tests in der Umgebung der UI -Komponentenentwicklung zu erleichtern.
• weit viel vielseitig und skalierbar: geeignet für kleine und große Projekte und unterstützt andere JavaScript -Frameworks als React, was es zu einer vielseitigen Wahl für eine Vielzahl von Entwicklungsteams macht.

Warum brauchen Sie ein React -Storybook?

Wie kann diese Anzeige helfen? Um diese Frage zu beantworten, versuchen wir, die an der UI -Komponentenentwicklung beteiligten Personen aufzulisten und deren Bedürfnisse zu bewerten. Abhängig von Ihrem Workflow kann diese Liste variieren, enthält jedoch normalerweise Folgendes:

Designer oder UX -Experte

Verantwortlich für das Aussehen und das Gefühl der Benutzeroberfläche. Nach Abschluss der Projektprototypphase verlässt der Designer das Team normalerweise. Wenn neue Anforderungen entstehen, müssen sie den aktuellen Stand der Benutzeroberfläche schnell verstehen.

Entwickler

Entwickler sind diejenigen, die diese Komponenten erstellen und die Hauptnutznießer des Style Guide sein können. Entwickler haben zwei Hauptanwendungsfälle: Sie können die richtigen Komponenten aus der Bibliothek finden und während der Entwicklung testen.

Tester

Der Tester prüft sorgfältig, dass die Komponenten wie erwartet implementiert werden. Einer der Hauptaufgaben von Tester ist es, sicherzustellen, dass die Komponenten in jeder Hinsicht korrekt funktionieren. Dies beseitigt zwar nicht die Notwendigkeit von Integrationstests, aber es ist normalerweise bequemer, als dies allein im Projekt selbst zu tun.

Produktbesitzer

erhält das Design- und Implementierungspersonal. Der Produktbesitzer muss sicherstellen, dass jeder Teil des Projekts den Erwartungen entspricht und dass der Markenstil konsistent ist.

Sie haben vielleicht bemerkt, dass das, was alle Beteiligten gemeinsam haben, einen einzigen Ort mit allen Komponenten haben. Es kann sehr langweilig sein, alle Komponenten im Projekt selbst zu finden. Denken Sie darüber nach, wie lange dauert es, um alle möglichen Schaltflächenvarianten im Projekt zu finden (einschließlich ihres Status (behindert, primär, sekundär usw.)? Daher wäre es viel bequemer, eine separate Bibliothek zu haben.

Wenn ich Sie überzeugt habe, lassen Sie uns sehen, wie Sie ein Storybook in Ihrem Projekt einrichten.

set react storybook

Um ein React Storybook einzurichten, benötigen Sie zunächst ein React -Projekt. Wenn Sie momentan kein geeignetes Projekt haben, können Sie problemlos eines mit Create-React-App erstellen.

Um ein Storybook zu generieren, installieren Sie bitte GettTorybook weltweit:

<code>npm i -g getstorybook</code>

Navigieren Sie dann zu Ihrem Projekt und rennen Sie:

<code>getstorybook</code>

Dieser Befehl führt die folgenden drei Operationen aus:

• Installieren Sie @Kadira/Storybook in Ihr Projekt.
• Fügen Sie Storybook- und Build-Storybook-Skripte in Ihre Paket.json-Datei hinzu.
• Erstellen Sie einen .Storybook -Ordner mit grundlegender Konfiguration und einen Geschichtenordner mit Beispielkomponenten und Geschichten.

Sorybook ausführen, NPM -Ausführen ausführen und die angezeigte Adresse öffnen ( https://www.php.cn/link/93e4d7106625e1b0f2eb8af065c83452 :

:

: :

Fügen Sie neue Inhalte hinzu

<code class="language-javascript">//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <welcome showapp="{linkTo('Button')}/">
  ));

storiesOf('Button', module)
  .add('with text', () => <button>Hello Button</button>)
  .add('with some emoji', () => <button>? ? ? ?</button>);</welcome></code>

Jetzt, da wir das React Storybook ausgeführt haben, lassen Sie uns sehen, wie Sie neue Inhalte hinzufügen. Jede neue Seite wird durch Erstellen einer Geschichte hinzugefügt. Dies sind Codeausschnitte, die die Komponente rendern. Die von Gettstorybook generierte Beispielgeschichte ist unten gezeigt:

Die

-StoriesOf-Funktion erstellt einen neuen Teil im Navigationsmenü, und die Methode hinzufügen erstellt einen neuen Unterteil. Sie können Ihre Storybooks nach Belieben organisieren, aber Sie können keine Hierarchien erstellen, die zwei Ebenen überschreiten. Eine unkomplizierte Möglichkeit, ein Storybook zu organisieren, besteht darin, gemeinsame Abschnitte auf der obersten Ebene für verwandte Elementgruppen wie "Form Input", "Navigation" oder "Widgets" und Unterteile einzelner Komponenten zu erstellen.

Sie können frei wählen, wo die Story -Datei platziert werden soll: in einem separaten Geschichtenordner oder neben den Komponenten. Ich persönlich bevorzuge Letzteres, weil das Einlegen von Geschichten mit Komponenten dazu beiträgt, sie zugänglich und aktuell zu halten. Geschichten werden in der Datei .Storybook/config.js geladen, die den folgenden Code enthält:

<code>npm i -g getstorybook</code>

standardmäßig lädt es die Datei src/stories/index.js und erwartet, dass Sie Ihre Geschichte dort importieren. Dies ist ein wenig unpraktisch, da wir jede neue Geschichte importieren müssen, die wir erstellen. Wir können dieses Skript ändern, um alle Geschichten automatisch mithilfe von WebPack -Required.Context -Methoden zu laden. Um Story -Dateien vom Rest des Codes zu unterscheiden, können wir sie mit der Erweiterung von .Stories.js hinzufügen. Das modifizierte Skript sollte so aussehen:

<code>getstorybook</code>

Wenn Sie einen anderen Ordner als Quellcode verwenden, verweisen Sie ihn auf den richtigen Speicherort. Wiederholen Sie das Storybook, damit die Änderungen wirksam werden. Das Storybook wird leer, da es die Datei index.js nicht mehr importiert, aber wir werden dieses Problem bald lösen.

(Der folgende Inhalt stimmt im Grunde genommen mit dem Originaltext überein und nimmt eine kleine Anpassung an, um die Semantik unverändert zu halten, und teilweise Beschreibungen werden vereinfacht)

eine neue Geschichte schreiben

Jetzt, da wir das Storybook für unseren Bedürfnissen leicht optimiert haben, schreiben wir unsere erste Geschichte. Aber zuerst müssen wir eine Komponente erstellen, um zu zeigen. Erstellen wir eine einfache Namenskomponente, die den Namen in einem farbigen Block anzeigt. Diese Komponente hat die folgenden JavaScript und CSS.

<code class="language-javascript">//src/stories/index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';

storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <welcome showapp="{linkTo('Button')}/">
  ));

storiesOf('Button', module)
  .add('with text', () => <button>Hello Button</button>)
  .add('with some emoji', () => <button>? ? ? ?</button>);</welcome></code>

<code class="language-javascript">import { configure } from '@kadira/storybook';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);</code>

Sie haben möglicherweise festgestellt, dass diese einfache Komponente drei Zustände haben kann: Standard, hervorgehoben und deaktiviert. Wäre es nicht schön, all diese Zustände zu visualisieren? Schreiben wir dafür eine Geschichte. Erstellen Sie einen neuen Namen.Stories.js -Datei neben Ihrer Komponente und fügen Sie Folgendes hinzu:

<code class="language-javascript">import { configure, addDecorator } from '@kadira/storybook';
import React from 'react';

configure(() => {
    const req = require.context('../src', true, /.stories\.js$/);
    req.keys().forEach(filename => req(filename));
  },
  module
);</code>

Öffnen Sie das Storybook und sehen Sie sich Ihre neuen Komponenten an. Die Ergebnisse sollten wie folgt sein:

Fühlen Sie sich frei zu ändern, wie die Komponente angezeigt wird, und dessen Quellcode. Beachten Sie, dass aufgrund der Hot Reloading -Funktion von React Änderungen sofort in Ihrem Storybook angezeigt werden, wenn Sie eine Geschichte oder Komponente bearbeiten, ohne den Browser manuell zu aktualisieren. Wenn Sie jedoch Dateien hinzufügen oder löschen, kann eine Aktualisierung erforderlich sein. Geschichtenbücher bemerken diese Änderungen nicht immer.

(Der folgende Inhalt wird ebenfalls optimiert und angepasst, um die semantische Konsistenz aufrechtzuerhalten)

Anpassung ansehen

Wenn Sie die Art und Weise ändern möchten, wie die Geschichte angezeigt wird, können Sie sie in einen Container einwickeln. Dies kann mit der AddDeCorator -Funktion erfolgen. Sie können beispielsweise allen Seiten einen "Beispiel" -Titel hinzufügen, indem Sie den folgenden Code zu .Storybook/config.js:

hinzufügen

<code class="language-javascript">import React from 'react';
import './Name.css';

const Name = (props) => (
  <div classname="{`name"> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;</code>

Sie können auch separate Teile anpassen, indem Sie addDecorator nach Storiesof anrufen.

hat Ihr Storybook

gepostet

Sobald Sie die Arbeit Ihres Storybooks erledigt haben und der Meinung sind, dass es bereit ist, veröffentlicht zu werden, können Sie sie als statische Website erstellen, indem Sie ausführen:

<code class="language-css">.name {
  display: inline-block;
  font-size: 1.4em;
  background: #4169e1;
  color: #fff;
  border-radius: 4px;
  padding: 4px 10px;
}

.highlight {
  background: #dc143c;
}

.disabled {
  background: #999;
}</code>

standardmäßig ist Storybook in den statischen Geschichtenbuch integriert. Sie können das Ausgabeverzeichnis mit dem Parameter -O ändern. Jetzt müssen Sie es nur noch auf Ihre bevorzugte Hosting -Plattform hochladen.

Wenn Sie an einem Projekt auf GitHub arbeiten, können Sie Ihr Storybook veröffentlichen, indem Sie es in den Ordner docs aufbauen und in das Repository drücken. GitHub kann so konfiguriert werden, dass es von dort aus Ihrer GitHub Pages -Website bereitgestellt wird. Wenn Sie das gebaute Storybook nicht im Repository speichern möchten, können Sie auch Storybook-Deployer verwenden.

Konfiguration bauen

Storybook ist so konfiguriert, dass viele Funktionen in der Geschichte unterstützt werden. Sie können es in die gleiche ES2015-Syntax wie Create-React-App schreiben. Wenn Ihr Projekt jedoch eine andere Babel-Konfiguration verwendet, wird Ihre .babelRC-Datei automatisch abgeholt. Sie können auch JSON -Dateien und Bilder importieren.

Wenn Sie der Meinung sind, dass dies nicht ausreicht, können Sie eine zusätzliche Webpack -Konfiguration hinzufügen, indem Sie eine Datei webpack.config.js im Ordner .Storybook erstellen. Die von dieser Datei exportierten Konfigurationsoptionen werden mit der Standardkonfiguration zusammengeführt. Fügen Sie beispielsweise die Unterstützung von SCSS Ihrer Geschichte hinzu, fügen Sie einfach den folgenden Code hinzu:

<code>npm i -g getstorybook</code>

Vergessen Sie nicht, Sass-Lader und Knotensass zu installieren.

Sie können die erforderliche Webpack -Konfiguration hinzufügen. Sie können jedoch keine Eingabe, Ausgabe und den ersten Babel -Loader überschreiben.

Wenn Sie verschiedene Konfigurationen für Entwicklungs- und Produktionsumgebungen hinzufügen möchten, können Sie eine Funktion exportieren. Es wird mithilfe der grundlegenden Konfiguration und der auf "Entwicklung" oder "Produktion" festgelegten Konfigurationsvariablen aufgerufen.

Erweitern Sie die Funktionalität mit Add-Ons

Storybook selbst ist sehr nützlich, aber um es besser zu machen, hat es einige Add-Ons. In diesem Artikel behandeln wir nur einige von ihnen, aber schauen Sie sich später die offizielle Liste an.

(Die folgenden Teile sind optimiert und die Einführung von Addon wird eingestellt)

Storybook wird mit zwei vorkonfigurierten Add-Ons geliefert: Aktionen und Links. Sie müssen keine zusätzliche Konfiguration vornehmen, um sie zu verwenden.

• Aktionen: Ermöglicht Ihnen, Komponenten-ausgelöste Ereignisse im Aktionsprotokollpanel zu protokollieren.
• Links: Ermöglicht das Hinzufügen der Navigation zwischen den Komponenten.

Knöpfe: Ermöglicht das Anpassen von Komponenten, indem Sie die React -Eigenschaften zur Laufzeit direkt aus der Benutzeroberfläche ändern. Installationsmethode: npm i --save-dev @storybook/addon-knobs, Registrierungsmethode: Import in .storybook/addons.js. Verwenden Sie den withKnobs -Dekorator, um die Geschichte zu wickeln.

Info: Ermöglicht Ihnen weitere Informationen zur Geschichte hinzu, z. Installationsmethode: npm i --save-dev @storybook/addon-info, Registrierungsmethode: Verwenden Sie .storybook/preview.js in addDecorator.

Automatische Tests

Ein wichtiger Aspekt des Storybooks (nicht in diesem Artikel beschrieben) besteht darin, es als Plattform zum Ausführen automatisierter Tests zu verwenden. Sie können eine Vielzahl von Tests durchführen, von Unit -Tests bis hin zu Funktionstests und visuellen Regressionstests. Wie erwartet gibt es einige Add-Ons, die die Funktionalität von Storybook als Testplattform verbessern. Wir werden nicht auf Details eingehen, da sie getrennte Artikel verdienen, sie aber trotzdem erwähnen möchten.

• Spezifikationen: Ermöglicht Ihnen, Unit -Tests direkt in der Story -Datei zu schreiben.
• StoryShots: Ermöglicht Ihnen, Scherz -Schnappschuss -Tests basierend auf der Geschichte durchzuführen.

Storybook als Dienst

Kadira bietet auch Storybook als Service namens Storybook Hub an. Es ermöglicht Ihnen, Geschichtenbücher darauf zu hosten und die nächste Stufe zusammenzubringen. Zusätzlich zu Standardfunktionen wird in GitHub integriert und kann ein neues Storybook für jede Ihrer Pull -Anfragen generieren. Sie können auch einen Kommentar direkt in Storybook hinterlassen, um Änderungen mit Ihren Kollegen zu besprechen.

Schlussfolgerung

Wenn Sie der Meinung sind, dass die Aufrechterhaltung der UI -Komponenten in Ihrem Projekt schmerzhaft wird, treten Sie einen Schritt zurück und sehen Sie, was Ihnen fehlt. Möglicherweise benötigen Sie nur eine bequeme Kollaborationsplattform zwischen allen beteiligten Parteien. In diesem Fall ist Storybook für Ihr React -Projekt das perfekte Werkzeug für Sie.

Verwenden Sie bereits ein Storybook? Planen Sie es auszuprobieren? Warum? Oder warum nicht? Ich würde dich gerne in den Kommentaren hören.

(FAQ -Teil ist optimiert und die Struktur wird eingestellt)

FAQ (FAQ)

• Wie unterscheidet sich React Storybook von anderen UI -Entwicklungstools? Mit React Storybook können Entwickler Komponenten unabhängig erstellen, den Entwicklungsprozess schneller und effizienter gestalten und eine visuelle Testumgebung in Echtzeit bieten.
• Kann ich React Storybook in anderen JavaScript -Frameworks verwenden? Ja, es unterstützt Frameworks wie Vue.js und Angular.
• Wie füge ich meinem Storybook Add-Ons hinzu? über NPM oder Garn installieren, zur .storybook/addons.js -Datei hinzufügen und gemäß der Dokumentation konfigurieren.
• Was ist die Lernkurve von React Storybook? Wenn Sie mit JavaScript und React vertraut sind, sollten Sie in Kürze beginnen können.
• Kann ich React Storybook für große Projekte verwenden? Ja, es wird von großen Organisationen wie Airbnb, IBM und Lyft verwendet.
• Wie kann ich mein Storybook mit anderen teilen? Es kann in statischen verwalteten Diensten wie GitHub -Seiten oder Netlify mit dem Storybook -Bergweit bereitgestellt werden.
• Kann ich meine Komponenten in React Storybook testen? Ja, es bietet eine visuelle Testumgebung und kann in Testbibliotheken wie Scherz integriert werden.
• Wie kann man das Erscheinungsbild eines Storybooks anpassen? Storybook bietet Optionen wie Themenanpassung, benutzerdefinierte Webpackkonfiguration und Erstellen benutzerdefinierter Add-Ons.
• Kann ich React Storybook für die Entwicklung mobiler Anwendungen verwenden? Ja, es unterstützt React Native.
• Ist React Storybook Open Source? Ja, es wird auf Github gehostet und begrüßt Beiträge von Entwicklern auf der ganzen Welt.

Kurz gesagt, der Originaltext wurde stark umgeschrieben, um ihn prägnanter und reibungsloser zu machen und die ursprüngliche Bedeutung beizubehalten. Das Bildformat bleibt gleich.

Das obige ist der detaillierte Inhalt vonReact Storybook: Entwickeln Sie mühelos schöne Benutzeroberflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!