React Component Sharing using Bit

Using Bit with React By Yuvraj Patil

In our projects, we use a lot of npm modules. These modules are created by some developers and we use them in our project. It avoids our time and energy to reinvent the wheel.

I liked this idea. I thought of creating some basic components and publishing it in such a way that anyone can use my components in their project just like they use the npm module.

I evaluated many solutions and found that Bit is the best fit for doing such things. Using Bit we can share our React component within a team or we can make it available for public use. Bit can be used for showing other aspects of components like documentation, test cases and dependencies of our React component.

I followed the steps below in order to make it work.

Setting up Bit

1. Create a Bit Account and create a collection over there. Prefer keeping collection type as public. Create a scope which we will need in upcoming steps.
2. Install BVM (Bit Version Manager)

npm i -g @teambit/bvm

3. Install Bit

bvm install

It would install the latest version of Bit.

4. Init Bit Harmony

bit init  --harmony

It would create some bit setup files.

5. Customize setup

Open workspace.jsonc file and update the scope as per step 1.

Creating Component

1. Create React component

Create a reusable react component.

2. Add component

bit add src/components/<component_name>

3. View Component (optional)

bit show <component_name>

4. Tagging Components

bit tag --all

It would tag all the updated or newly added components.

5. Export Components

bit export

It would export all tagged components to the bit server.

Utilizing Component

1. Install dependencies

npm install bootstrap react-bootstrap

2. Set Registry of bit component

npm config set '@<username>:registry' https://node.bit.dev

3. Install style component (if any)

npm install @<username>/<collection_name>.<style_component_name>

4. Install component

npm install @<username>/<collection_name>.<component_name>

5. Import component styles file in index.tsx(.jsx)

import @<username>/<collection_name>.<style_component>/<css_file>';

Notes:

1. If we get any strange error, try using bit login and complete the login process.

Conclusion

Creating and sharing React components are very easy with Bit. It helps us to reuse react components in different projects.