Ένα από τα πλεονεκτήματα της χρήσης του React είναι ότι μπορείτε να δημιουργήσετε στοιχεία διεπαφής χρήστη, να τα επαναχρησιμοποιήσετε σε όλη την εφαρμογή σας και τελικά να αποφύγετε την εκτροπή κώδικα. Ωστόσο, είναι δύσκολο να δημιουργήσετε εντελώς ανεξάρτητα στοιχεία διεπαφής χρήστη μόνο με το React. Θα χρειαστεί να δημιουργήσετε προβολές που εμφανίζουν αυτά τα στοιχεία για να τα δείτε.
Εδώ μπαίνει το Storybook. Σας επιτρέπει να δημιουργήσετε και να δοκιμάσετε στοιχεία διεπαφής χρήστη σε ένα ανεξάρτητο περιβάλλον χρόνου εκτέλεσης και σε αυτό το σεμινάριο θα μάθετε πώς να το χρησιμοποιείτε στο React. Μέχρι το τέλος αυτής της ανάρτησης, θα έχετε δημιουργήσει ένα στοιχείο κουμπιού και θα έχετε τεκμηριώσει ορισμένες από τις πιθανές καταστάσεις του στο React.
Τι είναι το Storybook;
Βιβλίο ιστοριών είναι ένα εργαλείο ανάπτυξης που σας επιτρέπει να εκτελείτε και να δοκιμάσετε τα στοιχεία διεπαφής χρήστη σας χωρίς ένα πλήρες περιβάλλον React. Αυτό κάνει ανάπτυξη με γνώμονα τα συστατικά ευκολότερο γιατί μπορείτε να αναπτύξετε τα εξαρτήματα μεμονωμένα.
Με το Storybook, μόλις δημιουργήσετε ένα στοιχείο, μπορείτε να δημιουργήσετε πολλές ιστορίες που καθορίζουν τις διάφορες καταστάσεις του στοιχείου. Για ένα στοιχείο κουμπιού, αυτές οι καταστάσεις μπορούν να περιλαμβάνουν την κύρια κατάσταση, τη δευτερεύουσα κατάσταση, την κατάσταση απενεργοποίησης και ούτω καθεξής.
Εφόσον το Storybook σάς επιτρέπει να συμπεριλάβετε κώδικα κατά τη δημιουργία των ιστοριών, μπορεί επίσης να χρησιμεύσει ως εργαλείο τεκμηρίωσης.
Για να χρησιμοποιήσετε το Storybook, θα πρέπει να έχετε εγκατεστημένο το Node στον υπολογιστή σας και να έχετε μια βασική κατανόηση του React.
Δημιουργία εφαρμογής React
Για να ξεκινήσετε να χρησιμοποιείτε το Storybook, θα δημιουργήσετε πρώτα ένα έργο React και στη συνέχεια δημιουργήστε στοιχεία και τις ιστορίες τους.
Εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε μια εφαρμογή React:
npx δημιουργώ-react-app btn-storybook
Αυτό θα δημιουργήσει έναν φάκελο που ονομάζεται btn-storybook με όλες τις εξαρτήσεις που χρειάζεται μια εφαρμογή React.
Στη συνέχεια, με λίγα ακόμη βήματα, μπορείτε να εγκαταστήσετε και να εκτελέσετε το Storybook.
Εγκατάσταση του Storybook
Μεταβείτε στο φάκελο btn-storybook και εγκαταστήστε το storybook:
CD btn-storybook
npx storybook init
Εφόσον χρησιμοποιήσατε το create-react-app, αυτή είναι η μόνη εντολή που πρέπει να εκτελέσετε για να ρυθμίσετε το Storybook. Το Storybook θα εγκαταστήσει όλες τις απαραίτητες εξαρτήσεις και θα εκτελέσει όλες τις απαραίτητες ρυθμίσεις. Θα δημιουργήσει επίσης μερικές ιστορίες για να ξεκινήσετε.
Μόλις ολοκληρωθεί η εκτέλεση της παραπάνω εντολής, ξεκινήστε το storybook χρησιμοποιώντας τον παρακάτω κώδικα.
npm τρέξιμο βιβλίο ιστοριών
Αυτό θα ανοίξει τον πίνακα ελέγχου του βιβλίου ιστοριών στο πρόγραμμα περιήγησής σας. Θα πρέπει να μοιάζει κάπως έτσι:
Δημιουργία του στοιχείου κουμπιού
Στον φάκελο ./src, δημιουργήστε έναν φάκελο που ονομάζεται Components και σε αυτόν δημιουργήστε έναν άλλο φάκελο που ονομάζεται Button. Ο φάκελος Button πρέπει να βρίσκεται σε αυτή τη διαδρομή: ./src/Components/Button.
Τώρα, σε αυτόν τον φάκελο, δημιουργήστε το κουμπί και προσθέστε τον ακόλουθο κώδικα:
εισαγωγή PropTypes από "τύποι αντικειμένων"
Κουμπί λειτουργίας ({ label, backgroundColor = "#6B4EFF", χρώμα = "άσπρο", borderRadius="48 εικονοστοιχεία", σύνορο="κανένας"}) {
συνθ στυλ = {
χρώμα του φόντου,
υλικό παραγεμίσματος: "0,5 εκ. 1 εκ",
χρώμα,
συνοριακή ακτίνα,
σύνορο
}
ΕΠΙΣΤΡΟΦΗ (
<στυλ κουμπιού={στυλ}>
{επιγραφή}
</button>
)
}
Button.propTypes = {
επιγραφή: PropTypes.σειρά,
χρώμα του φόντου: PropTypes.σειρά,
χρώμα: PropTypes.σειρά,
σύνορο:PropTypes.string,
συνοριακή ακτίνα: PropTypes.σειρά,
}
εξαγωγήΠροκαθορισμένο Κουμπί;
Αυτό το στοιχείο δέχεται μερικά Αντιδράστε στηρίγματα που περιλαμβάνουν την ετικέτα του κουμπιού και τα στυλ της. Χρησιμοποιείτε επίσης propTypes για να ελέγξετε τους τύπους των στηρίξεων που διαβιβάζονται και να προειδοποιήσετε εάν χρησιμοποιείτε λάθος τύπο. Το στοιχείο επιστρέφει ένα στοιχείο κουμπιού.
Δημιουργία ιστοριών κουμπιών
Όταν εγκαταστήσατε το Storybook στο έργο React, δημιούργησε έναν φάκελο που περιέχει ορισμένα παραδείγματα ιστορίας, με το όνομα ιστορίες. Πλοηγηθείτε σε αυτόν τον φάκελο και διαγράψτε τα πάντα σε αυτόν. Θα δημιουργήσετε τις ιστορίες από την αρχή.
Θα δημιουργήσετε δύο ιστορίες που αντιπροσωπεύουν το κύριο κουμπί και το δευτερεύον κουμπί. Κάθε ένα από αυτά τα κουμπιά έχει διαφορετικό στυλ που το διαχωρίζει από τα υπόλοιπα. Θα μπορείτε να δείτε καθεμία από αυτές στον πίνακα ελέγχου του Storybook μόλις δημιουργήσετε τις ιστορίες.
Στον φάκελο ιστοριών, δημιουργήστε ένα νέο αρχείο με το όνομα button.stories.js. Είναι σημαντικό να συμπεριληφθεί .ιστορίες πριν από το .js, καθώς αυτό λέει το Storybook που είναι ένα αρχείο ιστοριών.
Εισαγάγετε το στοιχείο Κουμπί.
εισαγωγή Κουμπί από "../Components/Button/Button"
Στη συνέχεια, εξαγάγετε τον τίτλο του στοιχείου και το ίδιο το στοιχείο. Σημειώστε ότι ο τίτλος είναι προαιρετικός.
εξαγωγήΠροκαθορισμένο {
τίτλος: "Εξαρτήματα/Κουμπί",
συστατικό: Κουμπί,
}
Η πρώτη ιστορία που θα δημιουργήσετε είναι για το κουμπί Primary. Έτσι, δημιουργήστε μια νέα συνάρτηση που ονομάζεται Πρωτεύουσα και εξάγετε την.
εξαγωγή const Πρωτεύον = () =><Κουμπί φόντοΧρώμα="#6B4EFF" ετικέτα="Πρωταρχικός"/>
Τώρα, αν μεταβείτε στον πίνακα ελέγχου του Storybook, θα μπορείτε να δείτε το κουμπί απόδοσης.
Για να επεξεργαστείτε το στοιχείο που αποδίδεται ζωντανά και να αλλάξετε την κατάστασή του στον πίνακα εργαλείων του Storybook, θα χρησιμοποιήσετε args. Το Args σάς επιτρέπει να μεταβιβάσετε ορίσματα στο Storybook, τα οποία όταν αλλάξουν προκαλούν την εκ νέου απόδοση του στοιχείου.
Για να ορίσετε τα args της ιστορίας κουμπιών, δημιουργήστε ένα πρότυπο συνάρτησης.
const Πρότυπο = args =><Κουμπί {...args}/>
Αυτό το πρότυπο δέχεται args και τα μεταβιβάζει ως στηρίγματα στο στοιχείο Button.
Τώρα μπορείτε να ξαναγράψετε την Κύρια ιστορία χρησιμοποιώντας το πρότυπο όπως φαίνεται παρακάτω.
εξαγωγήσυνθ Primary = Template.bind({})
Primary.args = {
χρώμα του φόντου: "#6B4EFF",
επιγραφή: "Πρωταρχικός",
}
Εάν ελέγξετε τον πίνακα εργαλείων του Storybook, θα δείτε τα στοιχεία ελέγχου στο κάτω μέρος. Αυτά τα χειριστήρια σάς επιτρέπουν να αλλάξετε τον τρόπο εμφάνισης του κουμπιού. Μπορείτε να αλλάξετε το χρώμα φόντου, το χρώμα κειμένου, την ετικέτα, το περίγραμμα και την ακτίνα περιγράμματος.
Χρειάζεται μόνο να αλλάξετε τις τιμές args για να δημιουργήσετε τις άλλες ιστορίες. Για παράδειγμα, για να δημιουργήσετε ένα δευτερεύον κουμπί, χρησιμοποιήστε τον ακόλουθο κώδικα.
εξαγωγήσυνθ Δευτερεύον = Template.bind({})
Secondary.args = {
χρώμα του φόντου: "#E7E7FF",
χρώμα: "#6B4EFF",
επιγραφή: "Δευτερεύων",
}
Στον πίνακα ελέγχου του Storybook, μεταβείτε σε διαφορετικές ιστορίες κάνοντας κλικ σε αυτές στην πλαϊνή γραμμή. Θα δείτε πώς αποδίδεται το καθένα. Μπορείτε να συνεχίσετε να προσθέτετε περισσότερες καταστάσεις στις ιστορίες κουμπιών όπως θέλετε. Δοκιμάστε να προσθέσετε ένα περίγραμμα ή μια ιστορία περιλήψεων.
Δοκιμή στοιχείων διεπαφής χρήστη
Αυτό το σεμινάριο σάς έδωσε μια σύντομη εισαγωγή στη χρήση του Storybook με στοιχεία διεπαφής χρήστη React. Μάθατε πώς να προσθέτετε το Storybook σε ένα έργο React και πώς να δημιουργείτε μια βασική ιστορία για ένα στοιχείο Button με args.
Ίσως έχετε παρατηρήσει ότι κατά τη διάρκεια αυτής της διαδικασίας, δοκιμάζατε τον τρόπο απόδοσης του στοιχείου κουμπιού σε διαφορετικές καταστάσεις. Μπορεί να γράφετε περισσότερο κώδικα, αλλά, αφού γράψετε τις ιστορίες στοιχείων, θα ελαχιστοποιήσετε τυχόν σφάλματα που ενδέχεται να προκύψουν κατά την επαναχρησιμοποίηση στοιχείων στην εφαρμογή σας. Επιπλέον, θα είναι ευκολότερο να εντοπίσετε το σφάλμα εάν παρουσιαστεί. Αυτή είναι η ομορφιά της ανάπτυξης με γνώμονα τα στοιχεία.