As a developer, I’m always building new apps. As a result, I often find myself repeating a lot of tasks.

Such as creating the same types of components — buttons, forms, navbars etc — over and over again. I recently came across a platform called Bit, which provides developers with an easy and effective way for sharing components between projects. Using Bit provides me with an easy way to get up to speed as it helps me avoid having to recreate those same components over and over.

In using Bit, I also end up with a repository of components that I can browse through via their GUI.

Using the GUI — which is not a separate piece of software for Bit, but is rather just being logged in to the Bit website and viewing a component library — I get the added ability of being able to view each component in isolation and can play around with how it looks with different values, states and so on.

This visual approach to creating and storing components helps bring the two worlds of development and design together, with an experience that you just don’t get when storing code on something such as GitHub.

Sharing a component from any app or project becomes a simple process of using Bit to add, tag and export components to your reusable collection. It then becomes easy to add components to your project using npm/yarn, in much the same way that you would add any other package.

I want to demonstrate just how easy it is to use Bit.

So let’s spend a few minutes taking some simple components that we created earlier, exporting them to Bit, and then reusing them into our app.

I quickly went from having a demo React To-Do app that looked like this:

To having a collection of separate reusable components at my disposal:

Reviewing a collection of components in Bit

Okay, enough talk. Let’s begin!

1. Gather your components

If you’ve created an app before with React, great. You will be taking that app and using it to build your very own component library. You may now move on to Step 2!

Note: If you don’t have any apps or have never created an app with React before, it may be best to do that by creating something simple like a ToDo app first, then come back to this when you feel comfortable with React.

2. Now, install Bit:

$ yarn global add bit-bin

# or

$ npm install bit-bin --global

3. Create a free Bit account

Which you can do by visiting: https://bit.dev/signup

4. Go back to the terminal and login to your Bit account

You can do this by simply running the following:

$ bit login

Bit will ask you a couple of questions in the terminal regarding error reporting that you can say yes or no to. Then your browser should open up the Bit website and show a success page if everything went as expected — which it did for me and was a fantastic developer experience.

5. Start sharing!

To share components on Bit, we need to do 3 things: add (pack), tag (version), and export (publish). Bit automates most of the work, so this is actually quite a pretty straight forward process.

In your app’s root folder run bit init to initialise a Bit workspace. By default this sets up your workspace to use npm. If you would prefer to use yarn, run this bit init --package-manager yarn . Or just update the "packageManager" value to use yarn .

This adds some code to your package.json that looks like this:

“bit”: {

“env”: {},

“componentsDefaultDirectory”: “components/{name}”,

“packageManager”: “yarn”

}

Now that our workspace has been initialised, let’s go ahead and add some components.

Adding components

Next, let’s tell Bit to start tracking all components in the src/components directory. It will auto-pack every component with all files and dependencies. We can do this by running the following command:

$ bit add src/components/*

You can now run bit status to see if everything was added okay. If it was, you will see ok in the terminal/command line next to each component that was added.

If you did have any issues while doing this in your own apps, click here to learn how to resolve them.

To make sure our code is reusable we need to define a compiler. To save overhead, Bit provides reusable dev environments (envs) with pre-defined configs.

Import the React compiler from Bit.dev into your app’s workspace. Bit will define it as the build configs for every component in the workspace.

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

The above step took about one minute to execute on my computer, so don’t worry if you find yourself waiting a little. If it all went well, you should see the following in your terminal:

the following component environments were installed

- bit.envs/compilers/react@1.0.11

You’ll also notice that the "bit" object in our package.json has now updated to:

“bit”: {

"env": {

"compiler": "bit.envs/compilers/react@1.0.11"

},

“componentsDefaultDirectory”: “components/{name}”,

“packageManager”: “yarn”

}

Optional: run $ bit build to see that all components are successfully built.

Now that the components have been added, we can now look at tagging them.

Tagging components

Bit uses semantic tagging to help identify different versions of a component, similar to how a piece of software would have tags to demonstrate what version it is.

To tag a component we use bit tag followed by file path to the component you want to tag and whatever version number we want to give our component. Or we can just go ahead and tag all your components at once by adding the --all flag, like below:

$ bit tag --all 1.0.0

If that went through okay, you should see the number of components tagged in your terminal/command line.

It’s worth noting that specifying a version number is not mandatory. If you prefer, you can actually leave it to Bit to handle, in which case, the patch number will automatically increase on each new tag.

Finally, we can now export our components to our Bit.dev collection.

Exporting components

First, go to to bit.dev and, providing you are logged in, click the +New button in the top right corner and then click on ‘Collection’.

Then give your collection a name:

So in my case, I called my collection ‘react-components’. Then click the ‘Create’ button at the bottom of the page. You’ll now see a page that looks something like this:

On the right hand side of the above image, you can see that it shows you a command to run whenever you want to export components to this collection. So let’s go ahead and do that, by running:

$ bit export user-name.collection-name

In my case, I would be running the following: $ bit export sunil-sandhu.react-components .

Once complete, you should see a comment in the terminal/command line that shows it was successful. And if I revisit my component library on Bit, I can see the six components that I exported!

Now each of your components can be viewed in an isolated environment, where you can make changes, add/remove props, all sorts!

What the component playground looks like for my List component

As you can see, I’ve made sure the component receives all its required props. In addition, I’ve added a CSS file with the right @import in it so that the component will be able to use the intended font-family I want it to use.

And just like that, I now have my own reusable component library!

Okay, so how do I go about using them in other apps? Let’s cover that next!

Installing components in a new app.

Create a new React app using create-react-app and name it ‘new-app’.

$ npx create-react-app new-app

Now you could look to pull in components from your newly created library on Bit!

So in my case, let’s say my project needed a removable-list-item component. Well funnily enough, I already created one earlier and exported it to Bit! So I can just go ahead and install it just like I would with any other package. I can do so by running:

yarn @bit/sunil-sandhu.react-components.removable-list-item

Of course, you would replace the username.component-library.component-name — which, in my case, was: sunil-sandhu.react-components.removable-list-item — with whatever your username.component-library.component-name happens to be.

But what if I don’t want to be adding components as packages and would rather just have the code for appear locally in my app?

No problem, Bit allows you to fork your component code, allowing you to edit it locally.

To do this, initialise a Bit workspace in you app’s root directory:

# cd new-app $ bit init

Now if I want to use my removable-list-item component from earlier but just want the code and not the package, I can run the following command:

$ bit import sunil-sandhu.react-components/removable-list-item

Again, you would replace the username.component-library/component-name with whatever yours happens to be.

This imports the component and places in a newly created folder called components .

Note: this components folder appears in the root of your app directory, so it is different to the src/components directory.

├───.git

├───components

│ ├───removable-list-item

You can access the source code for your component and make any changes you like.

Now let’s say that you’ve made some changes locally and have now decided that you want these changes to appear in your Bit component library as a new version of the component. It turns out you can do this too!

If you run bit status , Bit will recognise that the component has been modified. You can list all components using bit list . In our case, we have only a single tracked component:

Single tracked bit component

Use the component’s ID to tag it with a new version:

$ bit tag user-name.collection-name/component-name

Which in my case, $ bit tag sunil-sandhu.react-components/removable-list-item .

Now export the new version to Bit.dev.

$ bit export user-name.collection-name

And just like that, you’ve just edited the component right from a new project, and exported the new reusable version to your Bit collection.

But what if I want the original app I created to make use of the new version of this component?

It turns out that Bit created a way to do this too! FYI, it’s similar to merging changes like you would with Git. Let’s wrap up by quickly reviewing how to do it in Bit.

Head back to your React To-Do app:

$ cd react-demo-app

Now run the following command to check for outdated versions in your app:

$ bit list --outdated

This will list all of the components in your app and I can see that the local version for the removable-list-item is listed in red.

You should expect to see something that looks like this table in your console:

bit list --outdated

You can now fetch the latest versions of your components:

$ bit import

Now the component has been downloaded but your local component has not yet changed. We can verify this by running:

$ bit status

You should receive this message that explains that there are pending updates, specifically with your updated component.

We resolve this by running bit checkout to merge the changes between the new imported version and your local version. In our case, we run the following:

$ bit checkout 1.0.1 removable-list-item

You’d replace removable-list-item with whatever your component is called.

If you come across any merge conflicts, Bit will tell you about this in the terminal. It will also give you optional flags to use for your checkouts, one of which was to add the --manual flag, like so:

$ bit checkout 1.0.1 removable-list-item --manual

Again, replace removable-list-item with whatever your component is called.

This gave me the ability to fix any merge conflicts inside the component in the same way that you would fix a merge conflict in Git.

I can then run yarn start to see that my ToDo app is now using the updated component!

A word on component props and component validity

When viewing components in your component library on Bit, it is important to make sure that your components are receiving any props that they may typically require.

The key here is to consider each of your components in isolation from think about what props it would need in order to render. So for example, if you have a component that usually receives a ‘text’ prop, make sure you are providing that prop to it. If you don’t, Bit will not be able to render your component when you try to view it in insolation in your component library.

It might make sense for you to not provide props to it when you upload it to Bit, because you may prefer not to, but then consider ways that you can work around this, such as by providing default props via the prop-types library. Or at the very least, add the required props to the component while viewing it in your component library 🙂.

And there we have it! 🎉

We’ve seen how we can quickly pack, version and reuse components between React applications. Aside from the speed gained from Bit’s automation, we also created our very own reusable library!

We can now decide to incrementally add to this as we go along our programming journey. We can even invite other devs to contribute to our code, just like we would with any other project.

It also doesn’t stop there, because there are thousands of other component libraries sitting and waiting on Bit for you to explore!

Want to read more about Bit?

15 Reasons to Build Your Component Library in Bit.dev

5 Tools for Faster Development in React

11 React UI Component Libraries you Should Know in 2019