How To Easily Share React Components Between Projects And Apps

March 12, 2018 0 Comments

How To Easily Share React Components Between Projects And Apps

 

 

A simple 5 minute walkthrough to easily organize, share and sync your favorite React components between all team’s your different projects and applications.

Building different apps with React components

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 your components into building blocks which can be organized and used across your different projects and apps.

It’s workflow lets you seamlessly isolate components from different projects, organize them for your team and sync them across your projects, while making changes to your components’ code from any of these projects.

Here is how it works in 3 simple steps.

A Rect Hero component shared from this catalogue on the cloud

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 Initialize it for your project.

# Install Bit
$ npm install bit-bin -g
# Initialize it for your project
$ cd movie-app
$ bit init

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).

$ bit import bit.envs/bundlers/webpack-css-modules --compiler
the following component environments were installed
- bit.envs/bundlers/webpack-css-modules@0.0.5

$ bit import bit.envs/testers/karma-mocha --tester
the following component environments were installed
- bit.envs/testers/testers/karma-mocha@0.0.8

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
$ 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 Scope.

A Scope 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 Scope on Bit’s component hub (you can also set up a local server) and share our components to this new Scope.

# Export the components to your Scope
$ bit export <ownername>.<scopename>

That’s it!

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

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

Now that our Scope 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 bitsrc.io 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.

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 <ownername>.<scopename>/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 Scope (or to a new Scope- it’s your choice).

bit tag namespace/componentname
bit export <ownername>.<scopename>

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 namespace/componentname <ownername>.<scopename> --eject

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

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

React movie-app components organized on the cloud

Before Bit, our own team had different components scattered in different apps, each with its own visual and functional changes to suit the project.

Using Bit, we were able to create Scopes which work like “Lego boxes” that our team shares in order to build different projects and applications.

Every team member can easily find the components they need, use it in their projects and easily make the changes they need for their applications.

You are welcome to try it out and turn your own components (React, Vue, or any other JS functionality) into your team’s shared building blocks.

Bit is open source so feel free to suggest feedback or contribute to the project!


Tag cloud