Uno dei vantaggi dell'utilizzo di React è che puoi creare componenti dell'interfaccia utente, riutilizzarli in tutta l'applicazione e, in definitiva, evitare il churn del codice. Tuttavia, è difficile creare componenti dell'interfaccia utente completamente indipendenti solo con React. Dovrai creare viste che mostrino questi componenti per vederli.
È qui che entra in gioco Storybook. Ti consente di creare e testare i componenti dell'interfaccia utente in un ambiente di runtime indipendente e in questo tutorial imparerai come usarlo in React. Entro la fine di questo post, avrai creato un componente pulsante e documentato alcuni dei suoi possibili stati in React.
Cos'è il libro di fiabe?
Libro di storia è uno strumento di sviluppo che ti consente di eseguire e testare i componenti dell'interfaccia utente senza un ambiente React completo. Questo fa sviluppo guidato dai componenti più facile perché puoi sviluppare i componenti in isolamento.
Con Storybook, una volta creato un componente, puoi creare più storie che definiscono i vari stati del componente. Per un componente pulsante, questi stati possono includere lo stato primario, lo stato secondario, lo stato disabilitato e così via.
Poiché Storybook ti consente di includere il codice durante la creazione delle storie, può anche fungere da strumento di documentazione.
Per utilizzare Storybook, devi avere Node installato sulla tua macchina e avere una conoscenza di base di React.
Creazione di un'applicazione di reazione
Per iniziare a utilizzare Storybook, per prima cosa creerai un progetto React e quindi creare componenti e le loro storie.
Eseguire il comando seguente per creare un'applicazione React:
npx creare-react-app btn-storybook
Questo genererà una cartella chiamata btn-storybook con tutte le dipendenze necessarie a un'applicazione React.
Successivamente, con pochi passaggi in più, puoi installare ed eseguire Storybook.
Installazione di Storybook
Passa alla cartella btn-storybook e installa storybook:
CD btn-storybook
npx libro di fiabe init
Dato che hai usato create-react-app, questo è l'unico comando che devi eseguire per configurare Storybook. Storybook installerà tutte le dipendenze necessarie ed eseguirà tutta la configurazione necessaria. Creerà anche alcune storie standard per iniziare.
Al termine dell'esecuzione del comando precedente, avviare lo storybook utilizzando il codice seguente.
npm esegui il libro di fiabe
Questo aprirà la dashboard del libro di fiabe nel tuo browser. Dovrebbe assomigliare a qualcosa di simile a questo:
Creazione del componente pulsante
Nella cartella ./src, crea una cartella chiamata Components e in essa crea un'altra cartella chiamata Button. La cartella Button dovrebbe trovarsi in questo percorso: ./src/Components/Button.
Ora, in questa cartella, crea Button e aggiungi il seguente codice:
importare PropTypes da "tipi di prop"
pulsante funzione({ label, backgroundColor = "#6B4EFF", colore = "bianca", raggio di confine="48px", confine="nessuno"}) {
cost stile = {
colore di sfondo,
imbottitura: "0,5 rem 1 rem",
colore,
raggio di confine,
confine
}
Restituzione (
<stile pulsante={stile}>
{etichetta}
</button>
)
}
Button.propTypes = {
etichetta: PropTypes.corda,
colore di sfondo: PropTypes.corda,
colore: PropTypes.corda,
confine:PropTypes.string,
raggio di confine: PropTypes.corda,
}
esportarepredefinito Pulsante;
Questo componente ne accetta alcuni Reagisci oggetti di scena che includono l'etichetta del pulsante e i suoi stili. Stai anche usando propTypes per controllare i tipi di oggetti di scena passati e generare un avviso se usi il tipo sbagliato. Il componente restituisce un elemento pulsante.
Creazione delle storie di pulsanti
Quando hai installato Storybook nel progetto React, ha generato una cartella contenente alcuni esempi di storie, denominata storie. Passa a quella cartella ed elimina tutto ciò che contiene. Creerai le storie da zero.
Creerai due storie che rappresentano il pulsante principale e il pulsante secondario. Ognuno di questi pulsanti ha uno stile diverso che lo separa dal resto. Sarai in grado di vedere ciascuno di essi nella dashboard di Storybook una volta create le storie.
Nella cartella storie, crea un nuovo file chiamato button.stories.js. È importante includere .storie prima di .js poiché è ciò che dice a Storybook che è un file di storie.
Importa il componente Pulsante.
importare Pulsante da "../Componenti/Pulsante/Pulsante"
Quindi esporta il titolo del componente e il componente stesso. Si noti che il titolo è facoltativo.
esportarepredefinito {
titolo: "Componenti/pulsante",
componente: pulsante,
}
La prima storia che creerai è per il pulsante Principale. Quindi, crea una nuova funzione chiamata Primaria ed esportala.
export const Primario = () =><Pulsante backgroundColor="#6B4EFF" etichetta="Primario"/>
Ora, se vai alla dashboard di Storybook, sarai in grado di vedere il pulsante renderizzato.
Per modificare il componente renderizzato in tempo reale e cambiarne lo stato nella dashboard di Storybook utilizzerai args. Gli argomenti ti consentono di passare argomenti a Storybook che, una volta modificati, provoca il re-rendering del componente.
Per definire gli argomenti della storia del pulsante, creare un modello di funzione.
const Modello = argomenti =><Pulsante {...args}/>
Questo modello accetta argomenti e li passa come oggetti di scena al componente Button.
Ora puoi riscrivere la storia principale usando il modello come mostrato di seguito.
esportarecost Primario = Modello.bind({})
Primario.args = {
colore di sfondo: "#6B4EFF",
etichetta: "Primario",
}
Se controlli la dashboard di Storybook, dovresti vedere i controlli in basso. Questi controlli consentono di modificare la modalità di visualizzazione del pulsante. È possibile modificare il colore di sfondo, il colore del testo, l'etichetta, il bordo e il raggio del bordo.
Devi solo cambiare i valori di args per creare le altre storie. Ad esempio, per creare un pulsante secondario, utilizzare il codice seguente.
esportarecost Secondario = Template.bind({})
Secondary.args = {
colore di sfondo: "#E7E7FF",
colore: "#6B4EFF",
etichetta: "Secondario",
}
Nella dashboard Storybook, passa a storie diverse facendo clic su di esse nella barra laterale. Vedrai come ciascuno esegue il rendering. Puoi continuare ad aggiungere più stati alle storie dei pulsanti come desideri. Prova ad aggiungere uno schema o una storia schematica.
Test dei componenti dell'interfaccia utente
Questo tutorial ti ha fornito una breve introduzione all'utilizzo di Storybook con i componenti dell'interfaccia utente di React. Hai imparato come aggiungere Storybook a un progetto React e come creare una storia di base per un componente Button con args.
Potresti aver notato che durante questo processo stavi testando il rendering del componente del pulsante in diversi stati. Potresti scrivere più codice ma, una volta scritte le storie dei componenti, ridurrai al minimo gli errori che potrebbero verificarsi quando riutilizzi i componenti nell'applicazione. Inoltre, sarà più facile rintracciare l'errore se si verifica. Questa è la bellezza dello sviluppo guidato dai componenti.