Before you go, check out these stories!

0
Hackernoon logoHow to Publish React Components from any App by@eden-ella

How to Publish React Components from any App

Author profile picture

@eden-ellaEden Ella

In this tutorial, I'll demonstrate how to publish React components from any application to Bit's registry. Components will be published as independent packages that later could be installed using NPM, Yarn or Bit.

Bit is a tool, platform, and registry dedicated to publishing independent JS components.

Bit also enables cross-repo collaboration on independent components - but that's for another post.

The steps to publishing using Bit

  1. Initialize a Bit workspace (in our cloned project)
  2. Track our soon-to-be-published components
  3. Import a compiler from Bit's ENVs collection
  4. Build, test and set a version for each package
  5. Create a new component collection on Bit's cloud component hub
  6. Publish the packages

Avoiding the common tasks of a "traditional" package publishing

  1. We will not create a new repo for each package. Instead, Bit will independently source-control packages along-side the project's source-control.
  2. We will not configure dependencies in each of the package's
    package.json
    file. Instead, Bit will analyze each component's dependencies and configure each
    package.json
    , accordingly.
  3. We will not configure a build setup for each component/package. Instead, we will use one of Bit's out-of-the-box compilers.
  4. We will not integrate third-party tools to create documentation or even to host it. Instead, Bit will auto-generate docs for us and display them on Bit's cloud component hub.

1. Initialize a Bit workspace in our cloned project

a. Clone and install this React to-do app ( Source | Bit | The app )

$ git clone https://github.com/giteden/todo-react-ts.git
$ cd todo-react-ts
$ npm install

b. Install Bit globally

$ npm install bit-bin --global

c. Initialize a new Bit workspace (in the project's root directory)

2. Track our soon-to-be-published components

$ bit add src/components/*

This is where Bit goes through the unintelligible code, analyzes it, and manages it as independent components. Read more about it here.

3. Import a React with TypeScript compiler

$ bit import bit.envs/compilers/react-typescript --compiler

As mentioned at the beginning of this tutorial, we can import Bit's React with TypeScript compiler so that we don't have to configure the build setup for each package, ourselves.

Check out Bit's compilers here.

4. Build, test and set a version for each package

$ bit tag --all 1.0.0

Here, Bit will build, test (if there were any test files), and version each component/package.

Bit tags each component with a semantic version number (Major.Minor.Patch). It automatically bumps the patch number on every new โ€œexportโ€ (publish). Itโ€™s up to you to manually set a version number that describes changes more drastic than a patch.ย Read more about it here.

5. Publish packages to Bit's registry

a. Create a new Bit account

b. Create a new component collection in Bit's component hub

c. Login to Bit in your terminal

d. Publish ("export") all tagged components

$ bit export <username>.<collection-name>

๐ŸŽ‰ Great. You now have a shared component collection. Use it in future projects, and share it with your team. ๐ŸŽ‰

Also, you can check out my collection (eden.todo-react) here.

A few words about documentation

Bit auto-generates documentation out of prop-types, JSDocs, and TypeScript. And, of course, you can always add anย .mdย file to your component directory and manually write your docs.

So, for example -

This RemovableListItem component:

import React, {useState} from 'react';
import styles from './RemovableListItem.module.scss';

type RemovableListItemProps = {
    /** The item's text */
    text: string,
    id: string,
    /** A callback function for the "X" click event */
    removeItem: (id: string) => void
}


const RemovableListItem  = ({text, id, removeItem} : RemovableListItemProps) => {
    const [isCompleted, setIsCompleted] = useState(false);
    return(
        <li className={styles.listItem}>
            <span data-iscompleted={isCompleted} className={styles.text}  onClick={() => setIsCompleted(!isCompleted)}>{text}</span>
            <button className={styles.delete} onClick={() => removeItem(id)}>X</button>
        </li>
    )
}

export default RemovableListItem;

Will produce this documentation (in the component's page on Bit's component hub):

Also, notice how I've added a code example in Bit's playground (in the component's page):

And, as mentioned earlier, we can take full control over the documentation with our own markdown files.

For example, the Button component has an .md file under its component directory. Bit tracked this file as part of the Button component, and rendered it in the component's page:

|-- components
   |-- Button
      |-- Button.jsx
      |-- Button.module.scss
      |-- Button.md
      |-- index.ts
### The Button Component

The Button components recieves all attributes of an HTML button component.

This is now displayed under the component playground:

Hopefully, that tutorial was clear ๐Ÿ™

If you have any questions, make sure to leave a comment and Iโ€™ll do my best to answer it.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!