Setup react-styleguidist with CRA

Setting up react-styleguidist

react

06-April-2020

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-tutorail

Our 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-build": "styleguidist server --config config/styleguidist.config.js"

Let' 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:

const { version } = require('../package.json');

module.exports = {
  title: 'styleguidist-tutorial',
  version,
  components: '../src/components/[A-Z]**/*.js',
  ingore: ['**/src/test.js'],
  require: ['./src/styles/index.scss'],
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader']
        }
       ]
    }
  }
};

components: Where your components should be located. webpackConfig: Define your config to handle (.jsx, .js, .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.

import React from 'react';
import './button.scss';

const Button = ({ title }) => {
  return <button className='button'>{title}</button>
}

export default Button;

yarn styleguidist

You'll see it gives an error like this:

error-setup-react-styleguidist

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/prest-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 explaination on my channel on youtube. Subscribe and share if you like it.

Code

YouTube:


Published on CodeReview by Mustafa Alroomi on 06-April-2020