Set up react-styleguidist with CRA
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 ….
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 the First Component:
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.
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.
If you find this useful, share it
