Beatriz Novais//Mountainstack*

How to Start Your Own React Library Design System

•3 min read
Cover Image for How to Start Your Own React Library Design System

Creating a React lib → Method 1

What we are going to use

Creating the lib

  • On your library empty folder directory run

    • npm init

  • Name however you would like your package.json file

  • Now you have your package.json file

  • We need to add react and typescript to our project:

  • Now you have your package.json file

  • We need to add react and typescript to our project:

    • npm i --save-dev react react-dom typescript

  • On package.json we need to add react to our peer dependencies:

      "peerDependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2"
    }

  • We now need to create the file structure in our project

      lib
   └── src
      ├── index.tsx
      └── components
          ├── hello_component
                  ├── hello.component.tsx
                  ├── hello.styles.scss
                  └── hello.export.tsx
          ├── component_2

  • Now that we have our files and folders we need to add code to our component

    ```jsx ├── hello.component.tsx ------------------------------------

    import "./hello.styles.scss"

    export const Hello = () => { return(

    Hello World

    ); }

├── hello.styles.scss ------------------------------------

p { color: blue; }

strong { color: red; }

├── hello.export.tsx------------------------------------

export { Hello } from "./hello.component";

├── index.tsx --------------------------------------------

export * from './components/Hello_Component/hello.export'


* In order to see our component and not be building our lib constantly and using another app to display it we can use Storybook, lets install it

    * `npx sb init`

* You can delete everything on the "stories" folder and create "hello.stories.tsx" file with the following code

    ```jsx
    ├── hello.stories.tsx ------------------------------------


    import React from 'react';
    import { storiesOf } from '@storybook/react';

    import { Hello } from '../lib/src/components/hello_component/hello.export';

    const stories = storiesOf('React_lib_m1', module);

    stories.add('App', () => {
        return (<Hello />);
    });

  • Lets start SB with

    • npm run storybook

  • And, ta-da! You have your react-library

Source Code:

💡
Download Source Code

Creating a React lib → Method 2

What we are going to use

Creating the lib

  • There is an npm-package much like create-react-app, that creates automatically a react library for you

  • Run the following on your empty project folder:

    • npx create-react-library

  • Now that you have your project created on your project directory run

    • yarn install

  • cd to the "example" folder, run

    • yarn install

    • yarn start

  • You now have a super quick yarn lib setup to play around 🎉

Source Code:

💡
Download Source Code

References & further research: