Τι είναι το Storybook και πώς μπορώ να το χρησιμοποιήσω για να δημιουργήσω μια βιβλιοθήκη στοιχείων στο React;

Πλαίσια όπως το React, το Vue και το Angular βοηθούν τους προγραμματιστές να δημιουργήσουν αρθρωτά συστήματα χρησιμοποιώντας στοιχεία, αλλά αυτό συνήθως δεν περιλαμβάνει έναν καλό τρόπο να τα βλέπουμε όλα από υψηλότερη άποψη.

Πώς μπορούμε λοιπόν να χρησιμοποιήσουμε το Storybook για να δημιουργήσουμε βιβλιοθήκες και να σχεδιάσουμε συστήματα που αυτο-τεκμηριώνουν καθώς τα κατασκευάζουμε;

  • Τι είναι το Storybook;
  • Τι πρόκειται να οικοδομήσουμε;
  • Βήμα 0: Εκκίνηση μιας εφαρμογής
  • Βήμα 1: Εγκατάσταση του Storybook
  • Βήμα 2: Δημιουργία νέου κουμπιού
  • Βήμα 3: Χρησιμοποιώντας το νέο μας στοιχείο Button
  • Επανάληψη: Δημιουργία νέου στοιχείου κεφαλίδας
  • Περισσότερες δυνατότητες του Storybook

Τι είναι το Storybook;

Το Storybook είναι ένα εργαλείο JavaScript που επιτρέπει στους προγραμματιστές να δημιουργούν οργανωμένα συστήματα διεπαφής χρήστη καθιστώντας τόσο τη διαδικασία κατασκευής όσο και την τεκμηρίωση πιο αποτελεσματική και ευκολότερη στη χρήση.

Μόλις δημιουργήσετε ένα στοιχείο, το Storybook σας επιτρέπει να δημιουργήσετε ένα αρχείο "story" όπου μπορείτε στη συνέχεια να εισαγάγετε το στοιχείο σας και να δημιουργήσετε διάφορα παραδείγματα περιπτώσεων χρήσης σε ένα sandbox iFramed χρησιμοποιώντας αυτό το στοιχείο.

Αυτό παρέχει ένα οργανωμένο και εστιασμένο περιβάλλον για τη δημιουργία νέων στοιχείων και την εργασία σε υπάρχοντα.

Τι πρόκειται να οικοδομήσουμε;

Θα ξεκινήσουμε μια νέα εφαρμογή React JS χρησιμοποιώντας τη Δημιουργία εφαρμογής React.

Μέσα σε αυτήν την εφαρμογή, πρόκειται να εγκαταστήσουμε το Storybook και να δημιουργήσουμε μερικά νέα στοιχεία που θα μας βοηθήσουν να μάθουμε πώς να δημιουργούμε νέα στοιχεία στα οποία μπορούμε να εργαστούμε σε μια ιστορία και στη συνέχεια να το χρησιμοποιήσουμε σε μια εφαρμογή React.

Βήμα 0: Εκκίνηση μιας εφαρμογής

Για να ξεκινήσετε, θα ξεκινήσουμε από το μηδέν με τη Δημιουργία εφαρμογής Αυτό θα μας βοηθήσει να επικεντρωθούμε στο να γίνουμε παραγωγικοί στο Storybook και όχι να το ενσωματώσουμε σε μια τρέχουσα εφαρμογή.

Τούτου λεχθέντος, εάν εργάζεστε ήδη με μια εφαρμογή που δημιουργήθηκε χρησιμοποιώντας την εφαρμογή Δημιουργία αντιδραστηρίου που δεν έχει εξαχθεί, θα πρέπει να μπορείτε να συνεχίσετε με το Μέρος 1 και πέρα ​​από το ίδιο!

Ας ξεκινήσουμε, μεταβαίνοντας στο σημείο που θέλουμε να δημιουργήσουμε τη νέα μας εφαρμογή και εκτελέστε την εντολή Δημιουργία εφαρμογής:

npx create-react-app my-storybook 

Σημείωση: μη διστάσετε να αντικαταστήσετε my-storybookμε το όνομα καταλόγου της επιλογής σας.

Μόλις ολοκληρωθεί η εκτέλεση, μπορείτε να πλοηγηθείτε στον κατάλογο:

cd my-storybook 

Και είμαστε έτοιμοι να φύγουμε!

Βήμα 1: Εγκατάσταση του Storybook

Ευτυχώς, το Storybook καθιστά πολύ εύκολο να ξεκινήσετε με μια τυπική εγκατάσταση του React. Ιδιαίτερα με την εφαρμογή Δημιουργία αντιδράσεως, το Storybook εντοπίζει αυτόματα ότι χρησιμοποιούμε μια εφαρμογή που δημιουργήθηκε χρησιμοποιώντας CRA και εγκαθιστά τις εξαρτήσεις και τα ικριώματα τα πάντα για εμάς.

Αρχικοποίηση βιβλίου ιστορίας

Για να ξεκινήσετε την εγκατάσταση του Storybook, εκτελέστε:

npx -p @storybook/cli sb init 

Εάν δεν χρησιμοποιείτε την εφαρμογή Create React ή δεν λειτούργησε, μπορείτε να δείτε τους διαθέσιμους οδηγούς τους στα έγγραφά τους.

Αφού ολοκληρωθεί, όλες οι εξαρτήσεις του Storybook θα πρέπει να εγκατασταθούν.

Ξεκινώντας το Storybook

Τώρα είμαστε έτοιμοι να κινηθούμε! Τέλος, εκτελέστε:

yarn storybook # or npm run storybook 

Και μόλις τελειώσει η φόρτωση, το Storybook θα ανοίξει μια νέα καρτέλα στο πρόγραμμα περιήγησής σας και θα πρέπει τώρα να δείτε ένα μήνυμα καλωσορίσματος μέσα στον νέο πίνακα ελέγχου του Storybook!

Ακολουθήστε μαζί με τη δέσμευση!

Βήμα 2: Δημιουργία νέου κουμπιού

Εάν περάσατε ένα δευτερόλεπτο για να σπρώξετε γύρω από το ταμπλό, ίσως έχετε παρατηρήσει ότι έρχεται προφορτωμένο με ένα κουμπί που είναι διαθέσιμο ως επίδειξη.

Θα πρέπει επίσης να παρατηρήσετε εάν κάνετε κλικ στο κουμπί, στην πραγματικότητα βλέπετε μια ενέργεια να εκτυπώνεται στο εσωτερικό της καρτέλας Ενέργειες στο κάτω μέρος. Αυτό δείχνει το συμβάν που καταγράφεται από το κλικ του κουμπιού

It's simple, but this is great to get a nice feel about what to expect in storybook. The only issue is, this is meant purely for demonstration purposes, so let's build our own button to replace it.

Creating a new Button component

To get started, let's first create a few directories:

  • Under src, create a new folder called components
  • Under components, create a new folder called Button

Once you create those folders, create a new file called index.js inside of your src/components/Button folder and inside add:

// Inside src/components/Button/index.js export { default } from './Button'; 

This will import the next file we created called Button.js which will allow us to more easily import our files with src/components/Button instead of /src/components/Button/Button.

Next, let's create Button.js right next to our index.js file with the following content:

// Inside src/components/Button/Button.js import React from 'react'; const Button = ({ children, ...rest }) => { return (  { children }  ) } export default Button; 

Here, we're creating a new component called Button that adds a class of button to the element and passes through the children. We're a additionally destructuring the rest of the props into the rest variable and spreading that value into the element.

If you've followed along, your files should now look like this:

Using our new Button component

So now that we have our Button component, let's use it!

Open up the file src/stories/1-Button.stories.js and replace the line that's importing Button with:

And once you hit save, you can open back up your browser tab with your Storybook dashboard, and you can now see a button that looks mostly similar, but it uses the browser's default styles for the element. You'll even notice that if you click it, the event will still be logged under the Actions tab.

Styling our Button component

Finally, we probably don't want to use the browser default styles, so let's make it look nice.

In our src/components/Button directory, add a new file Button.css and add the following content:

/* Inside src/components/Button/Button.css */ .button { color: white; font-weight: bold; background-color: blueviolet; border: none; padding: .8em 1em; border-radius: .2rem; } 

This applies a few styles to our .button class like adding a background color and changing the font color to white.

But if you open Storybook, you'll notice it didn't do anything. To use it, we need to import it into our component.

Inside src/components/Button/Button.js add the following at the top under the React import:

import './Button.css'; 

And once you save that and open up your browser, you should now see our new button with our updated styles!

Follow along with the commit!

Step 3: Using our new Button component

The ultimate goal of our component is to use it right? So let's add it to our app.

Switching over to the React app

First we'll need to either start our React app in a new terminal tab or kill the Storybook process and start the React process there. To start the React app using Create React App, run:

yarn start # or npm run start 

Once that loads, we should have our standard Create React App if you're following along with me:

Importing and using the new button

Next, inside of src/App.js, let's import our new Button at the top of the page:

import Button from './components/Button'; 

With Button imported, we can use it. Here, we can simply add it anywhere we want in the page. I'm going to replace the Learn React link with:

Hello, Storybook!

And if we save and reload the page, we should now see our Button on the page!

Follow along with the commit

Repeat: Creating a new Header component

The great thing about Storybook and React (or any of the supported frameworks) is that this process scales to as many components as you want.

So let's build another component!

Creating our Header component

Similar to our Button, let's start off by creating the set of directories and files that give us our component.

Since we already did this once, I'm going to provide the code without walking through what's going on.

Let's start off by spinning back up our Storybook server with:

yarn storybook # or npm run storybook 

Create a Header directory inside the src/components directory.

Create an index.js file inside of src/components/Header with the following content:

// In src/components/Header/index.js export { default } from './Header'; 

Create a Header.js file inside of src/components/Header with the following content:

// In src/components/Header/Header.js import React from 'react'; import './Header.css'; const Header = ({ children }) => { return ( 

{ children }

) } export default Header;

Create a Header.css file inside of src/components/Header with the following content:

/* In src/components/Header/Header.css */ .header { font-family: sans-serif; font-size: 2.5em; color: blueviolet; border-bottom: solid 5px aqua; padding-bottom: .2em; box-shadow: 0 5px 0 blueviolet; } 

Now if you notice, if you try to open up Storybook, again, nothing will happen. This time we need to create a new story file.

Creating a new Story file

Inside src/stories, add a new file called 2-Header.stories.js:

// Inside src/stories/2-Header.stories.js import React from 'react'; import Header from '../components/Header'; export default { title: 'Header', component: Header, }; export const Text = () => Hello Header; 

Here's a breakdown of our story file:

  • First, we import our component – this is pretty standard any time we want to use it
  • The first thing we export is a default object. With Storybook, it expects the default export to be the configuration of our story, so here we provide it with a title and we pass in the component that we're using for this story
  • The second and last thing we export is the Text constant. With Storybook, any non-default export will be considered a variation that will get nested under the title that you provide in the default export

And if you save this file and open up your Storybook dashboard in the browser, you should now see the new header!

Using the Header component

Using our component is just the same as our Button component, so inside of src/App.js, let's add our Header.

After starting your React server, first import our new Header:

// In src/App.js import Header from './components/Header'; 

Then add it to the top of the page:

// In src/App.js My App 

And if you open the page, we'll see our new Header!

Follow along with the commit!

Adding more components

As you've noticed with our second Repeat step – adding a new component is pretty much the same process for any type of component we want to add. Once we have it in our library, we can develop it in a focused environment and then import it to our app to use.

You can now use this to manage your library of components and better maintain an entire system for your project!

More Storybook features

Storybook doesn't stop with just adding components, it provides the ability to configure Addons that enhance the core capabilities opening up a lot of possibilities.

Here are some of my favorites...

Story Source

When building a component system, the hope is that people can easily use these components. But if you don't have documentation, someone would have to open up the file or try to find another use example.

Instead, Story Source shows the code source of the story file you created allowing someone browsing your Storybook dashboard to get an example right along with the component output!

Storyshots

If you're a fan of automated testing, you might have heard of using Jest or another tool for adding snapshot testing to your app.

StoryShots is a way to easily add Jest snapshot testing to your component system. It creates snapshots based off of the stories you create so you can make sure that your components aren't fundamentally changing (or breaking) during development.

What's your favorite part of Storybook?

Share with me on Twitter!

Continue the conversation!

[email protected] is an awseome tool to manage a library of components for your project’s design system ?

It makes it fun to create and update components in a focused env ?‍?

Περπατώ τι είναι το Storybook και πώς να ξεκινήσω; #webdev # 100DaysOfCode // t.co / 4TLFlmp4Df

- Colby Fayock (@colbyfayock) 9 Ιουνίου 2020

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου