React Component Sharing using Bit
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
- 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.
- Install BVM (Bit Version Manager)
npm i -g @teambit/bvm
3. Install Bit
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
workspace.jsonc file and update the scope as per step 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
It would export all tagged components to the bit server.
- 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)
- If we get any strange error, try using
bit loginand complete the login process.
Creating and sharing React components are very easy with Bit. It helps us to reuse react components in different projects.