Intro to Storybook
  • Leg los
  • Einfache Komponente
  • Komposition
  • Daten
  • Screens
  • Deployment
  • Tests
  • Addons
  • Fazit
  • Unterstützen
Framework:
ReactReact NativeVueAngularSvelteEmber

Storybook für React Tutorial

Richte Storybook in deiner Entwicklungsumgebung ein
Diese Community-Übersetzung wurde noch nicht auf die neueste Storybook-Version aktualisiert. Helfen Sie uns, es zu aktualisieren, indem Sie die Änderungen im deutschen Leitfaden für diese Übersetzung übernehmen. Pull requests sind willkommen.

Storybook läuft parallel zu deiner App im Entwicklungs-Modus. Es hilft dir, UI-Komponenten unabhängig von Business-Logik und vom Kontext deiner App zu entwickeln. Diese Edition von "Lerne Storybook" ist für React; es gibt andere Editionen für Vue und Angular.

Storybook und deine App

React-Storybook einrichten

Es sind einige Schritte nötig, um den Build-Prozess in deiner Umgebung einzurichten. Lass uns zu Beginn Create React App (CRA) nutzen, um dein Build System inkl. Storybook einzurichten und Jest-Tests in der von dir erstellten App zu ermöglichen. Dazu führen wir folgende Befehle aus:

# Create our application:
npx create-react-app taskbox
cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init

Wir können einfach feststellen, ob die verschiedenen Umgebungen deiner App richtig funktionieren:

# Run the test runner (Jest) in a terminal:
yarn test

# Start the component explorer on port 6006:
yarn run storybook

# Run the frontend app proper on port 3000:
yarn start
HINWEIS: Wenn yarn test einen Fehler wirft, musst du evtl. watchman installieren, wie in diesem Issue empfohlen.

Unsere drei Frontend-App-Modalitäten: Automatisierte Tests (Jest), Komponenten-Entwicklung (Storybook) und die App selbst.

3 Modalitäten

Abhängig davon, in welchem Teil der App du gerade arbeitest, möchtest du evtl. eine oder mehrere hiervon gleichzeitig laufen lassen. Da unser Fokus auf der Erstellung einer einzelnen UI-Komponente liegt, lassen wir hier nur Storybook laufen.

CSS wiederverwenden

In Taskbox werden Design-Elemente vom GraphQL- und React-Tutorial example app wiederverwendet, sodass wir in diesem Tutorial kein CSS schreiben müssen. Wir kompilieren einfach das LESS zu einer einzigen CSS Datei und inkludieren es in unserer App. Kopiere dieses kompilierte CSS und füge es in die Datei src/index.css ein, nach der Konvention von CRA.

Taskbox UI

Wenn du das Styling anpassen willst, findest du die LESS-Quelldateien im GitHub-Repo.

Assets hinzufügen

Wir müssen noch die font- und icon-Verzeichnisse im Ordner src/assets/ hinzufügen. Nachdem wir das Styling und die Assets hinzugefügt haben, sieht die App noch ein bisschen seltsam aus. Das ist OK. Noch müssen wir nicht an der App arbeiten. Wir legen jetzt los und bauen unsere erste Komponente!

Keep your code in sync with this chapter. View 6fdf7e3 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Einfache Komponente
Baue eine einfache Komponente in Isolation
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookDocsTutorialsReleasesAddonsBlogGet involvedUse casesSupportTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify