New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,072
Back to Intro to Storybook
Chapters
  • Inizia
  • Componente semplice
  • Componente composito
  • Dati
  • Schermate
  • Deploy
  • Visual Testing
  • Addons
  • Conclusione
  • Contribuisci

Tutorial di Storybook per React

Configura Storybook nel tuo ambiente di sviluppo
Questa traduzione della comunità non è stata ancora aggiornata all'ultima versione di Storybook. Aiutaci ad aggiornarlo applicando le modifiche nella guida italiana per questa traduzione. Pull requests sono benvenute.

Storybook funziona in parallelo con la tua app in modalità di sviluppo. Ti aiuta a costruire componenti dell'interfaccia utente isolati dalla logica aziendale e dal contesto della tua app. Questa edizione del tutorial Intro to Storybook è per React; esistono altre edizioni per React Native, Vue, Angular, Svelte ed Ember.

Storybook e la tua app

Configura Storybook per React

Dovremo seguire alcuni passi per configurare il processo di build nel nostro ambiente. Per iniziare, vogliamo utilizzare degit per configurare il nostro sistema di build. Utilizzando questo pacchetto, puoi scaricare dei "modelli" (applicazioni parzialmente costruite con alcune configurazioni predefinite) per aiutarti a velocizzare il tuo flusso di lavoro di sviluppo.

Esegui i seguenti comandi:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn
💡 Questo modello contiene gli stili necessari, le risorse e le configurazioni essenziali per questa versione del tutorial.

Ora possiamo rapidamente verificare che i vari ambienti della nostra applicazione stiano funzionando correttamente:

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 5173:
yarn dev

Le principali modalità della nostra app frontend sono: sviluppo di componenti (Storybook) e l'applicazione stessa.

Principali modalità

A seconda della parte dell'app su cui stai lavorando, potresti voler eseguire uno o più di questi contemporaneamente. Dato che il nostro focus attuale è la creazione di un singolo componente dell'interfaccia utente, continueremo con l'esecuzione di Storybook.

Applica i cambiamenti

A questo punto è sicuro aggiungere i nostri file a un repository locale. Esegui i seguenti comandi per inizializzare un repository locale, aggiungi e applica le modifiche fatte fino ad ora.

Copy
git init

Seguito da:

Copy
git add .

Poi:

Copy
git commit -m "first commit"

E infine:

Copy
git branch -M main

Iniziamo a costruire il nostro primo componente!

Keep your code in sync with this chapter. View bf3514f on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Componente semplice
Costruisci un componente semplice in isolamento
✍️ Edit on GitHub – PRs welcome!
Join the community
6,507 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI