Maximizing Code Reuse in React

How to speed-up development by sharing ReactJS components from any codebase, using Bit

Reusing code is great — everybody knows that

Reusing code is great but we all know it does not come without a cost. Reusing code across repositories requires packaging and publishing — a tremendous headache. Code needs documentation, examples and a website gallery to display it so that it would actually get discovered and used. Sometimes it just makes more sense to copy-paste code manually or even re-write the whole thing.

Minimizing the cost of making code reusable.

In this post, I’ll demonstrate how to use Bit and Bit.dev to minimize the cost of making your React code reusable and available for you and your team. Lowering the cost is key to maximizing code reuse, speeding up development and building a more maintainable and scalable codebase.

What is Bit & Bit.dev?

Bit.dev is a component hub. It’s where you host, document and manage reusable components from your different projects. It’s a powerful tool that would increase code reuse and optimize your team’s collaboration.

It’s also a good alternative for building design systems from scratch (as it essentially has everything a design system needs).

Bit.dev works perfectly with Bit, an open-source tool that handles component isolation and publishing (when using Bit.dev, components are published to Bit’s registry).

Browsing through component collections in bit.dev

“Harvesting” reusable components from a project

Let’s say I’ve decided the world needs another to-do app. Having done that, I realized my team may need some of its components for other projects in other repositories. That’s where Bit comes in handy.

8 steps to sharing components:

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

React with TypeScript + SCSS:

React with prop-types + styled-components:

1. Create a component collection in bit.dev

2. Install Bit globally (NPM/Yarn)

$ yarn global add bit-bin

3. Log in to your account

$ bit login

4. Initialize a workspace in your project’s directory

$ 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

5. 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/*

6. Configure the right compiler (React JS / TS) to make the components usable in environments with different setups:

// React JS

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

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

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

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

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

The components are now shared and publicly available 👍

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

Documenting components: from local to cloud

The process of documentation starts at writing components in your local dev environment and ends at writing examples in the component page on bit.dev.

When using React with prop-types or React with TypeScript, most of the job is done for us. Bit extracts props and types, forms documentation and displays it on the component page (on bit.dev). As wonderful as it is, it’s always good to enrich your auto-generated documentation with JSDocs descriptions.

Example: React with prop-types:

Documentation on the component page React with prop-types

Example: 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 components on how/how best to use them.

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. You may choose that for a number of reasons — one of them is 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 are not necessary here.

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

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

That’s it 🙂

Cheers! 🍺

Learn More