JavaScript - - By Jonathan Saring

Sharing React Components Easily with Bit

For a high-quality, in-depth introduction to React, you can’t go past Canadian full-stack developer Wes Bos. Try his course here, and use the code SITEPOINT to get 25% off and to help support SitePoint.

This is the age of components. Frameworks built for UI components, such as React, enable us to split our UI into individual, reusable pieces that can be worked with in isolation.

In many ways, React components are not that different from other encapsulated code functionalities. They can get defined inputs (usually “props” or ES6 classes) and return UI-oriented elements that will appear as part of your UI.

Individual components are often used across different parts of our UI. The problem is, organizing and sharing our components across teams and applications often presents a real challenge. Sharing components can give us fast and simple access to components written and used by our team, and help make sure our codebase is made of nothing but what we actually need.

Bit is an open-source project that enables us to instantly share components from our existing source code with our team, and use them across our different projects without changing our source code, file structure or the tools we work with. Let’s see how.

Managing code components with Bit

Sharing Components: It’s Not That Simple

Three major issues stand in the way of easily organizing and sharing source-code components: discoverability, maintainability, and the overhead of sharing.

Discoverability is a major issue. A developer working on my team on or a different team has no way of easily discovering and browsing the components available throughout our source code when choosing, upgrading or installing the ones they need with the tools of their choice.

Maintainability is another problem while sharing common components across different parts of our application. Maintainability problems range from simple duplications, to the complexity of maintaining multiple repos and packages and keeping control over the dependency chain. This can quickly get out of hand.

Up until now, sharing our components was a bit of a challenge. It forced us to either duplicate code or invest a lot of time and effort maintaining large packages — which also weigh down our build and install time.

When trying to find and use an individual React component (Slider, Spinner etc.) we usually ended up installing vast static libraries containing a whole bunch of stuff we didn’t need. It also made it next to impossible to discover or use individual components created by our team or the community.

In some ways, this is very much like using a CD-ROM just to listen to a single song. Using Bit, we can easily share any set of components, making them individually available to anyone on our team.

Sharing Components with Bit

If you haven’t heard of Bit’s latest release, it’s an open-source project that allows us to share components from our existing source code with our team and across projects.

By decoupling the representation of components from our actual file structure, Bit tracks the components within our source code and enables us to quickly turn any file or subset of files into a reusable component. Using simple glob patterns (see below), the components within an entire library or project can be instantly shared without changing our source code itself or our file structure.

Any component (installed with Bit, and very soon with NPM or Yarn) can be individually shared, discovered and used in any application or project. It can also be modified and updated from any project environment, choosing if and how to let our friends update our components from their own projects (and vice versa).

A Netflix hero banner, showing featured content

Components can be grouped together into “Scopes”, which are collections that can be thought of as “playlists” of individual components sharing common attributes. When using the free Bit community site, each component is presented along with its rendered visuals, test results, semi-automatically generated docs and more.

Regardless of the tools we use to install our components, we can gain full control over our dependency graph and get a clear picture of the components used across our projects. Sharing code can also help keep our UI aligned with our design principles, as we can avoid changes when implementing the same components again and again in different projects.

Let’s try an example.

Quick Start

Bit is a distributed, open-source project, so you can set up an organized collection (called a Scope — see a demo Scope and a demo project) on any machine. However, you can also use the free Bit community hub (called bitsrc) to host, view and collaborate on your components and collections. You can sign up for a free account here (it will always be free for open source).

Okay, so let’s get going and turn a bunch of source code components (e.g. your shared library or a bunch of components — React or something else) into a shared collection.

  1. First thing’s first: install Bit in our environment.

  2. Then, we can initialize Bit for our project:

    bit init
  3. Our next step would be to track the components within our project using bit add. This command allows Bit to track any subset of files or directories as a reusable component. In this case, we’ll use a glob pattern to turn an entire library into an organized collection of reusable components:

    bit add src/library_name/*.js
    #Tracked 24 new components
  4. The next thing we want to do is to commit our changes:

    bit commit -am 'committed my first tracked code components'
  5. The next step is exporting our components into a remote organized collection (Scope), sharing them across project, applications and teams.

Bit is distributed, so you can set up a remote Scope on any machine using simple commands.

However, it’s simpler to use the centralized free Hub for Bit components.
You can set up a free Bit Scope at Bit’s community hub and follow the setup instructions.

Once you have the Scope ready, run the export command:

bit export username.scope_name
// username.scope_name is your Scope name.

That’s it!

You can now browse your Scope on bitsrc, and view your newly created collection! You can check out the component’s rendered visuals, semi-automatically parsed documentation (parsed directly from the jsdocs), test results and more.

You can invite others to collaborate on this Scope, or find, update and use individual components from any project you’re working on.

Importing and requiring components

Bit import enables you to install a component as an application part in any destination on your project’s file system.

Let’s import the component we’ve just created to a new project:

  1. create a new project
  2. initialize a new scope using the bit init command
  3. import the component.
bit import user_name.scope_name/namespace/component_name

Note that “components” is the namespace of the imported components. You can use your own naming conventions to organize your collection.

The component is now in the components directory, ready to be used in your code:

const component = require('./components/namespace/component_name');

Modify components

If you’re using a code component that requires modification, you can make a change right in the context of your project. Once the change has been made and checked for validity, you should commit it back, and export.

That’s it. This kind of workflow saves the overhead of maintaining complex packages, and allows our team to get updates and stay in sync. It also enables us to test our components before they reach production.

Recommended Courses

Wes Bos
A step-by-step training course to get you building real world React.js + Firebase apps and website components in a couple of afternoons. Use coupon code 'SITEPOINT' at checkout to get 25% off.

What Just Happened?

Using Bit, we tracked multiple components inside our shared React components library. To organize them into a shared collection, we instantly exported them all at once to a collection called a “remote Scope”.

Instead of a static shared library, we now have an organized collection of reusable components that can be shared and used anywhere we need. We can cut our app’s build time and weight, avoid duplications, make sure our UI looks the same on any page, and share these components with our team.

We can also find, update or use any component from any context — and even build or test it in any application environment.

To organize your own components into shared collections, feel free to get started with Bit or visit the project on GitHub.