I have been looking into various ways to add components to my new react application. Then I found this new way to manage components called - bit. May not be new for some of you though. But as you all know, I am still a newbie 😅

It looks interesting to me thus wants to write a short post on it. Even though it’s well documented, I am just giving a gist here 😎

What is bit?

If you are JS dev you are familiar with npm and if you are Java dev you must be familiar with maven and gradle. So can you imagine a world without these component libraries? ???? 😱😱😱

My answer is a definite NOOOOOOO 😂 and I know most of you will agree with me on this too 😅

Yes these are components or dependencies that are an integral part of our daily development life. These components makes our life easier. 🤓

Then what is bit here? 🤔

Bit is a platform for collaboration on atomic components.

I have seen a simple definition of bit here from a blog

“If a component library is like a music CD-Album, then bit.dev is like iTunes or Spotify for UI components.” 😎

It’s an open-source tool ❤️ for collaborating on components across projects and repositories. Means, if you have a team and they are building and sharing a lot of components within themselves then you could make use of bit. 😃😃😃

If you want to share your component to the public as we always do through the traditional npm package you can do that as well. Lovely! 💜

How to get started?

bit provides a very comprehensive documentation on how to get started, but if you ask me I will go the easiest way possible like below:

By the way I am on Mac, so I will be showing how to do this on Mac. Don’t worry if you are on Winodws or Linux, bit have all documented well for you too 😍

• Sign up/in to bit bit using your credentials. If you don’t have one create it 🤓

• Install bit via npm or homebrew ❤️

npm install bit-bin --global

or

brew install bit

Sweet!! 😎

• Configure the bit registry

npm config set @bit:registry https://node.bit.dev

• Login to bit using your bit credentials

npm login --registry=https://node.bit.dev --scope=@bit

or

bit login

• That’s it; you have set bit in your system! ❤️

How to browse and install a library in your app?

• Open bit and sign in
• Search for the component you are looking for - I want to add a chart library for react. Thus I enter search text as “chart” and Dependency option as “react”. Because my app is based on react so I am only interested in react components.

By the way bit supports a wide variety of frameworks such as react, angular, vue.js and many more 💪

• Select the component you like to use and for now I have selected “chart v4.2.0” released by “primefaces”

• On the top right you can see how to install this component in your app. I have used npm thus, I just copy and paste the following on to my command line, enter 😃

npm i @bit/primefaces.primereact.chart

• That’s it you can start integrating the component as per the sample code

Summarize

So that’s about it 😃😎

Check it out more from here

Enjoy! 🤘🤘🤘