Maximizing Code Reuse in React

How to speed-up development by “harvesting” and sharing React components from any codebase.

Reusing code speeds up development and makes our codebase more maintainable and scalable (but you already know that).

Solving 2 problems:

— Reusing code across repositories (without packaging)

— Discovering reusable components (without a library)

In this post, I’ll demonstrate how to use Bit ( Github ) to solve the two main problems we usually encounter when trying to reuse our code, or more specifically, our React code: discovering which reusable components are available and reusing components from other repositories (and doing so without getting into endless setups and configurations).

Sharing components to a component collection

A component collection is a scope or container for components shared on bit.dev . It serves as a way to organize your components. Each collection has its own permissions, team members, etc. In contrast to a component library, a collection is not versioned as a single package. In fact, it’s not a package at all. In a collection, components can “come and go as they please” — each component with its own independent versioning.

One thing to keep in mind: a collection is different from a library but that doesn’t mean it can’t serve the same purpose. In fact, in many cases, developers use Bit as a way to quickly build their own UI library/design system.

Browsing through collections in bit.dev

Harvesting reusable components from a project

Let’s say I’ve decided the world needs another to-do app. After building it, I realized me and my team may need some of its components for other projects. We may even want to develop it further, elsewhere.

If you like to follow along, choose one of the app’s implementations:

React with TypeScript + SCSS:

React with prop-types + styled-components:

Create a shared component collection

The first step is to set up a collection at bit.dev .

Then , we harvest :ear_of_rice::ear_of_rice::ear_of_rice:

Install Bit globally (NPM/Yarn):

$ yarn global add bit-bin

Log in:

$ bit login

Initialize a workspace:

$ bit init --package-manager yarn

Notice a new .bitmap file has been added to your directory and a bit section has been added to your package.json

Track all the app’s components. In my case, they are located in the “components” directory (for example src/components/button/index.js ):

$ bit add src/components/*

Configure the right compiler (React JS / TS) for the shared components, to make them usable in other environments, with different setups:

// React JS
$ bit import bit.envs/compilers/react --compiler// React with TypeScript
$ bit import bit.envs/compilers/react-typescript --compiler

Tag the components to build them in isolation (and lock changes):

$ bit tag --all 1.0.0

Bit tracks your component dependencies by itself and does not reauire manual configuration. Having said that, it’s good practice to check if there are any unresolved dependency issues using $ bit status .

Share the tracked components to a collection in bit.dev

Export the tracked components (push them to the shared collection):

$ bit export <user-name>.<collection-name>

If you followed along, go to bit.dev/<user-name>/<collection-name> to see them render in Bit’s playground. Otherwise, you can check out my collection here:

Documenting components — from local to cloud

The process of documentation starts when we build components in our local dev environment and ends when we write examples in Bit’s playground.

When using React with prop-types or React with TypeScript, most of the job is done for us by Bit. It extracts props and types for us, forms documentation and displays it on the component page (in bit.dev ). Having said that, it’s good practice to enrich it with JSDocs.

Here’s an example using React with prop-types:

Documentation on the component page React with prop-types

Here’s an example using React with TypeScript:

Documentation on the component page — React with TS

Writing examples in Bit’s playground

After exporting components, it’s best to complete the documentation process by providing an example (on the component page).

Examples enable components to render in Bit’s playground (a component that does not receive its required props will not be able to render) and guide consumers of that component on how/how best to use it.

A component rendered in Bit’s playground

Consuming components — built and source code

There are two ways to consume components shared on bit.dev. The first is by using the familiar npm install or yarn add (shared components are published on Bit’s private registry — not NPM. The commands are only for convenience).

The second way is to bit import components with their source code. That could be for a number of reasons but mainly to further develop a component (and even publish it back, modified).

The freedom to modify shared components is another key factor in maximizing code reuse. It’s a way to reuse code that is a “close match” but not a “perfect match”. It’s no longer an all-or-nothing situation.

For example, let’s say I want to import the shared removable-list-item from this collection to a new create-react-app project:

// create a new React project
$ npx create-react-app new-app// initialize a new Bit workspace
$ cd new-app
$ bit init// import the component
$ bit import <user-name>.<collection-name>/removable-list-item

The component is imported to the components directory, located at the project’s root directory :

├───.git
├───components
│   ├───removable-list-item

I can now modify the removable-list-item component.

Then — tag it with a new version:

$ bit tag <user-name>.<collection-name>/removable-list-item

The imported component is already tracked and configured with an appropriate compiler — that is why bit add or bit <compiler id> --compiler is not necessary here.

And finally, export the component back to the component collection:

$ bit export <user-name>.<collection-name>

That’s it

Cheers! :beer: