React components are designed to be the reusable Lego bricks of your UI.

However, sharing your components in multiple apps and projects isn’t always simple. Sharing components often means creating new repos, making changes in multiple places and struggling to keep your UI in sync.

Bit helps you turn components into building blocks you can share, discover and sync across your projects and applications. Bit’s platform:

All your components will be organized and made available for your team, which can discover, install and even develop components in any project.

React spinner components with Bit

Each component becomes discoverable with a live playground, preview examples, auto-extracted docs, test results and more.

A React spinner component in Bit’s playground

Every component can be installed with NPM/Yarn, or imported and developed from multiple projects to make and sync changes.

Here is how it works in 3 simple steps.

Step 1- Sharing your components

Here is an example React app on GitHub. In this 5 minutes tutorial, we’ll turn it into a component collection like this one, use these components in other projects and sync changes to our components from any project using them.

As you can see, this app contains 8 reusable React components in the src/components directory, and 1 global styles component in a different path.

For this quick demo you can clone this repo, or use your own project. If you’re cloning the app, please make sure to delete the bit.json and .bitmap files.

First, let’s install Bit and login to connet to your bit.dev account, then Initialize it for your project.

# Install Bit

$ npm install bit-bin -g # Authenticate to bit.dev

$ bit login # Initialize it for your project

$ cd movie-app

$ bit init

Adding Build and Test Environments

Before moving on, let’s add build and test environments to the workspace Bit created for the project, to let Bit build and test your components in isolation.

When working with React components, adding a compiler will also enable Bit to render your components on Bit’s web-UI (live example).

Let’s import these pre-made build and test environments for this React components (you can always use existing ones or create your own envs).

# Import an environment to build and render the components

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



# Import an environment to test the components in isolation

$ bit import bit.envs/testers/karma-mocha --tester

Now let’s get to business and tell Bit which components you would like to share from your project, so it will seamlessly start tracking them everywhere.

In this case, we’ll use a glob pattern to track all the react components in the src/components directory and a specific path to track the css component.

# Start tracking your React components + test files

$ bit add src/components/* -t 'src/components/{PARENT}/*.spec.js' # Start tracking the global styles component

$ bit add src/global.css --id style/global

Note that the ” -t ‘src/components/{PARENT}/*.spec.js’ “ syntax isn’t mandatory, but it tells Bit which test files to add for your components.

Now let’s tell Bit to isolate the components from your project by locking a version and automatically defining their file / package dependencies.

# Tag the 9 components Bit is tracking

$ bit tag --all 1.0.0

Next, let’s share our components to a remote collection called a collection.

A collection works like a “playlist” in which your components are organized, and functions as a remote source of truth to track changes across your projects.

Let’s quickly create a free collection on Bit’s component hub (you can also set up a local server) and share our components to this new collection.

# Export the components to your collection

$ bit export <owner_name>.<collection_name>

That’s it!

You now have a collection of all your favorite React components to share.

You can browse through your collection, view the rendered components, see the test results, view auto-parsed docs and use them in other projects.

Here the Hero component.

React hero component

Step 2- Using components in other projects

Now that our collection is ready, it’s time to put our components to use in other projects. First thing’s first, let’s see how to install them as packages.

To install the component in other projects all you have to do is configure bit.dev as a scoped registry for your NPM client using a single command.

Then, you can simply install any component as a package using the component’s install command (also found on the component’s page).

Installing the React Hero component using NPM

And that’s it. We didn’t have to split our repos, boilerplate packages or work hard- and all our components are now available with NPM and Yarn.

Let’s see how we can also make changes to the components from any project using them, and sync the changes across our entire codebase.

Step 3- Making changes from any end

Sharing a React component between two apps using Bit

One of Bit’s most useful features is the ability to make changes to your components from any other project, and sync them across your codebase.

Enabling 2–way code changes creates a distributed development workflow between your projects and team members that speeds development.

To make changes to a components, simply import it into a different project. Let’s import the HERO components into a new project (you can use create-react-app to quickly set up a new project).

# Import a component into a project

bit import <owner_name>.<collection_name>/components/hero

Once imported, you can make changes to the code as needed. Bit will continue to track the component and identify that it was changed.

Let’s run bit status to see that our component was modified.

# Check the status of your components

$ bit status

modified components

> components/hero

Now let’s quickly tag the component again and export it back out to your collection (or to a new collection- it’s your choice).

bit tag name_space/component_name

bit export <owner_name>.<collection_name>

Note that when exporting you can even eject the component from the project back to being a package dependency in the project’s package.json file.

bit export name_space/component_name <owner_name>.<colllection_name> --eject

If you share back to the original collection, Bit will bump a version for the component- so you can now import the new version into the original collection to update the code (you can see if the tests still pass before updating).

Using Bit, you can also merge changes to components in different projects. You can learn more about it here.

Upcoming features include an event-driven update strategy that will help you automatically control updates based on different parameters like test results.

Collaborating as a team