Skalieren Sie Ihre React -App mit Storybook und Chromatic

Dieser Artikel zeigt, wie sich die Entwicklung von Storybook- und chromatischen Streamline -React -Komponentenbibliothek entwickelt und verbesserte Dokumentation, visuelle Regressionstests und verbesserte Teamzusammenarbeit bietet.

Schlüsselvorteile:

• Storybook: Ermöglicht die Erstellung der Komponentenbibliothek, die Förderung der Teamarbeit und die Entkopplung der Komponentenentwicklung aus größerer Projektarchitektur. Es enthält Funktionen wie Barrierefreiheitsprüfungen, Einheiten-/Interaktions-/Snapshot -Tests, Dokumentationsgenerierung, einfache Veröffentlichung/Hosting und chromatische Integration für visuelle Regressionstests (VRT).
• chromatisch: Ein Storybook -Begleiter identifiziert proaktiv visuelle Regressionen und Interaktionsfehler und verhindert, dass sie die Produktion erreichen. Es vereinfacht auch die Zusammenarbeit des Teams.
• Web Publishing: Teilen Sie Ihr Storybook mit nicht-technischen Stakeholdern über Plattformen wie Github-Seiten, Netlify, AWS S3 oder Chromatic.

Warum wählen Sie Storybook?

Storybook ist ein wertvolles Kapital für Ingenieure, Produktmanager und Stakeholder. Es erleichtert die Entwicklung der Komponentenbibliothek, die Förderung der Zusammenarbeit und die Verhinderung von architektonischen Engpässen. Die eigenständige Natur ermöglicht eine umfassende Dokumentation und Variationsmanagement von Komponenten. Zu den wichtigsten Funktionen gehören:

Web Accessity Audits
Einheit, Interaktion und Snapshot -Test
Benutzerfreundliche Komponentendokumentation
vereinfachtes Veröffentlichung und Hosting
• vereinfacht
chromatische Integration für VRT

Dieser Handbuch deckt das Storybook-Setup und die Konfiguration innerhalb eines Projekts für Erstellen von React App, Add-On-Installation, Erstellung der Story, automatisierte Dokumentationsgenerierung und Web-Bereitstellung ab.

Storybook Setup und Konfiguration:

Installation:

Die effizienteste Methode ist die Verwendung eines einzelnen Befehls im Stammverzeichnis Ihres Projekts:

npx storybook@latest init

Storybook erkennt Ihre Projektabhängigkeiten intelligent und optimiert den Installationsprozess. Informationen zu Kompatibilitätsinformationen finden Sie auf der Seite "Storybook Frameworks". Die manuelle Installation ist aufgrund potenzieller Abhängigkeitskonflikte entmutigt.

Konfiguration:

Storybook-Konfiguration, die hauptsächlich über

behandelt wird, ermöglicht die Anpassung der Dokumentationspräsentation, die UI-Erweiterung über Add-Ons und sogar die Webpackkonfiguration. Typscript wird nativ unterstützt, aber die CSS -Architektur erfordert separates Setup. Weitere Informationen finden Sie in der Dokumentation zum Styling und der CSS -Dokumentation. main.js

Erstellen wir ein Beispiel erstellen React App:

npx create-react-app my-scalable-component-library

nach Überprüfung der App (mit

) das Storybook installieren: npm run start

npx storybook@latest init

Bestätigen Sie die Installationsanforderungen. Storybook wird in Ihrem Browser gestartet. Der Ordner .storybook (mit Konfigurationsdateien) und einem stories -Fordner (innerhalb src) wird Ihrem Projekt hinzugefügt. package.json enthält neue Skripte:

npx create-react-app my-scalable-component-library

Verwenden Sie npm run storybook für die Entwicklung und npm run build-storybook für die Veröffentlichung. Der Ordner storybook-static enthält das veröffentlichte Storybook. Erwägen Sie, diesen Ordner zu Ihrem .gitignore zu addieren.

Die main.js Datei (Beispiel unten gezeigt) steuert verschiedene Aspekte:

npx storybook@latest init

Der Taste stories gibt Story -Standorte an. Der framework -Staste variiert je nach Projekttyp. Die docs -Taste ermöglicht eine automatische Dokumentation. Weitere Optionen finden Sie in der Seite "Storybook Configure -Seite".

Storybook Add-Ons:

Add-Ons erweitern die Storybook-Funktionalität. Sie werden als UI-basierte (modifizierende Erscheinungsbild) und voreingestellter (Integrationstechnologien) eingestuft. Auf der Seite Integrations ist die verfügbaren Add-Ons aufgeführt. Die Standard-Add-Ons von Storybook enthalten:

• @storybook/addon-links: Story Verknüpfung für Prototyping.
• @storybook/addon-essentials: Eine Sammlung wesentlicher Add-Ons.
• @storybook/preset-create-react-app: Verbessert die CRA -Integration.
• @storybook/addon-onboarding: Bietet eine geführte Tour.
• @storybook/addon-interactions: Erleichtert Interaktionstests.

, um das Zugangsdatenadd zu addieren:

"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"

Geben Sie es dann in das main.js -Array ein. addons

Schreiben und Dokumentieren von Komponentengeschichten:

Eine Geschichte repräsentiert typischerweise eine Komponente und ihre Variationen. Es handelt sich um dynamische Dateien (React, Markdown oder beides), empfangene Parameter (Requisiten), um Variationen zu erzeugen.

untersuchen wir eine Beispiel

Geschichte: Button

/** @type { import('@storybook/react-webpack5').StorybookConfig } */
const config = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  statistics: ["../public"],
};
export default config;

Der Standard -Export definiert die Hauptkomponente und Einstellungen. Parameter liefern Metadaten. Tags ermöglichen die automatische generierte Dokumentation.

Argumentverhalten definieren. Exporte benannt nach dem Standard darstellen Variationen, jeweils argTypes mit den Komponenten -Requisiten ausrichten. args

Dekorateure wickeln Geschichten mit zusätzlichem Kontext ein. Sie sind im Parameter

definiert. Unterkomponenten können integriert werden, aber in Betracht ziehen, Komplexität zu rendern. decorators

Veröffentlichen Sie Ihr Storybook:

Ein Produktionsbau (

) generiert statische Dateien in einem Build -Ordner. Zu den Hosting -Optionen gehören GitHub -Seiten, Netlify und AWS S3. GitHub -Aktionen können die Bereitstellung auf Github -Seiten automatisieren. npm run build-storybook

Chromatin für VRT integrieren:

Chromat verbessert das Storybook mit visuellen Regressionstests. Erstellen Sie ein chromatisches Konto, erhalten Sie ein Projekttoken und installieren Sie das chromatische Paket:

npx storybook@latest init

ein chromatic Skript zu package.json:

hinzufügen

npx create-react-app my-scalable-component-library

Stellen Sie die Umgebungsvariable CHROMATIC_PROJECT_TOKEN in einer .env -Datei ein. Ausführen npm run chromatic Veröffentlicht Ihr Storybook in Chromatic. Verwenden Sie für die CI/CD -Integration (empfohlen) GitHub -Aktionen (siehe chromatische Dokumentation).

Schlussfolgerung:

Storybook und Chromatin verbessern die Codequalität erheblich und ermöglichen die Entwicklung, das Testen und die Zusammenarbeit der Komponentenbibliothek. Sie gewährleisten gut dokumentierte, skalierbare und wartbare Anwendungen.

Das obige ist der detaillierte Inhalt vonSkalieren Sie Ihre React -App mit Storybook und Chromatic. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!