Set up react-styleguidist with CRA

Photo by Yan Ots on Unsplash

Youtube tutorial

react-styleguidist gives you ability to see your component in development before integrating it with your production build, also easy to share between your team that you’re working with, with interactive playground and hot reloading you’re developing will be easier than you think for any project.

Install

for create-react-app

npx create-react-app styleguidist-tutorial

Out dependencies

yarn add react-styleguidist babel-loader css-loader style-loader node-sass

We might be need something else. wait ….

Photo by Xu Haiwei on Unsplash

We will make our scripts. so in package.json under scripts add these lines:

"styleguidist”:”styleguidist server --config config/styleguidist.config.js”,

"styleguidist-build:”styleguidist build --config/styleguidist.config.js”

Let’s create this file

In your project directory create a folder called config

Inside this folder create 👆 styleguidist.config.js

open this file and paste these lines on it.

components: Where your components should be located.

webpackConfig: Define your config to handle [.js, .jsx, .scss, .css].

require: We define that index.scss is our global styles.

Create components folder inside your src, and create inside it a folder with Button named.

Now Create these files inside Button folder:

index.js //=> Where exports your component from.

button.scss // => Example of dump component.

button.md //=> react-styleguidist will look for this file.

You could include your test file also.

Button/index.js
button.md

Now, run yarn styleguidist

You’ll see it gives an error like this:

Do you remember when I said Wait 👆?

Because we need another package to handle js file.

`yarn add @babel/preset-react`

Create a file called .babelrc in your project directory

Paste these lines in it:

`{“presets”: [“@babel/preset-react”]}`

Now, run again and it should work.

Click on the localhost that shown on the terminal to see it.

That’s it, Thank you for following along.

You could find also an explanation on my channel on youtube above.

Subscribe and like appreciate it.

This article has been shared on Coderreview.io. check it out for more articles.

Code

If you find this useful, share it

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store