Building with Reusable React Components

How to build scalable and maintainable React Apps with Reusable components.

In this post, I’ll demonstrate, using Bit, how to turn your frontend code from a monolith into a modular composition of independent components that are versioned individually and can be consumed and collaborated on from any repo.

Sharing independently versioned components is a way for simpler maintenance and greater scalability. If done right, each component has a specific purpose and an explicit API, making modifications more predictable and easily managed. Newer versions of shared components can be imported or installed into different projects and if anything breaks, the culprit is easily identified and changes are quickly reversed by downgrading to an older version of that component.

This post covers a sort-of “migration” scenario, where components are harvested from an existing React monolith, but it can easily be done the other way around. Components can be built independently, right from the get-go, and composed into one or more modular applications.

The project

Turn this:

To this:

1. Create a component collection

A collection is a scope of independent components hosted on bit.dev and registered in Bit’s registry. It is radically different from a traditional library as it only serves as a way to organize and manage sets of components. Unlike a traditional library, a collection is not a monolithic object with single versioning.

Collections allow you to install and update components on a component-level. When a component gets modified, updates are delivered to projects that use it specifically (as oppose to other components in the same collection). This means you don’t need to worry about meaningless CI.

Head over to bit.dev and create your account and a new collection named ‘react-demo-app’.

2. Install Bit and initialize a workspace

Clone and install this demo to-do app:

$ git https://github.com/teambit/react-demo-app.git
$ cd react-demo-app
$ yarn

Install Bit CLI globally on your machine:

$ yarn global add bit-bin

Log in to your account:

$  bit login

To start working with Bit on our newly-cloned project, initialize a Bit workspace in your project’s directory:

$ bit init --package-manager yarn

3. Track the app’s components

Track all the app’s components (located in the ‘components’ library):

$ bit add src/components/*

Your repository is no longer versioned solely as meaningless code. It now has an additional semantic layer where code is versioned as components.

To make sure Bit tracks the added components with no errors or issues that need to be resolved, type in:

$ bit status

You should expect to see the following message:

new components
(use "bit tag --all [version]" to lock a version with all your changes)
> button ... ok
     > h1 ... ok
     > list ... ok
     > removable-list-item ... ok
     > text-input ... ok
     > to-do-list ... ok

If any component has dependency graph issues, click here to learn how to resolve them.

4. Configure a compiler

Configuring a compiler for your shared components gives you the freedom to use, build and test them anywhere (that includes running them in Bit’s live playground). By using Bit’s pre-made compilers you make sure you build your components using best practice.

Type into your terminal:

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

You should expect to see:

the following component environments were installed
- bit.envs/compilers/react@1.0.5

5. Tag (stage) components

When tagging a component, three things happen:

1. The component will be built in an isolated environment
2. The component will be tested in an isolated environment
3. Changes to the component will be recorded and locked. All future modifications to this component will not affect this version.

Building and testing components in isolation help you validate your components are, in fact, independent and reusable.

To tag all tracked components we add the--all flag:

$ bit tag --all 1.0.0

After entering your tag command, you should expect to see in your terminal:

6 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)
new components
(first version for components)
     > button@1.0.0
     > h1@1.0.0
     > list@1.0.0
     > removable-list-item@1.0.0
     > text-input@1.0.0
     > to-do-list@1.0.0

6. Export components

You are now ready to export your components to your ‘react-demo-app’ collection:

$ bit export <username>.react-demo-app

Your components are now available in your react-demo-app collection in bit.dev.

Go to https://bit.dev/user-name/react-demo-app (or explore my own collection on https://bit.dev/learn-bit/react-demo-app/) to see them rendered live in Bit’s playground. Use the playground to add examples, showing how each component could be used.

7. Import a single component to a new project

Create a new React project using create-react-app and name it ‘new-app’.

$ npx create-react-app new-app

Let’s say your project needs a removable-list-item component.

You can install it in its built form, using NPM or Yarn, just like any other package:

$ yarn add @bit/user-name.react-demo-app.removable-list-item

Or, you may want to import its source-code and modify it in your new project. To do that, you first need to initialize a new Bit workspace:

$ cd new-app
$ bit init

Then, import the removable-list-item component from your collection.

$ bit import user-name.react-demo-app/removable-list-item

For example:

$ bit import bit.react-demo-app/removable-list-item

After completion, this message should appear:

successfully imported one component
- added bit.react-demo-app/removable-list-item new versions: 1.0.0, currently used version 1.0.0

The imported component is now located under the newly created components library (located in your project’s root folder — not its src folder).

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

8. Modify a component and export it back

Open the source code inside the removable-list-item directory and make a small change before exporting it back as a new version.

For example, let’s add animation for every removable-list-item appearance.

This is how the removable-list-item looks before the modification:

This is how it looks after the modification:

The removable-list-item component is now an imported component. That means it is already tracked and handled by Bit. That makes two steps in the export workflow redundant:

1. Adding a component to Bit’s list of tracked components (bit add)
2. Configuring a compiler (bit import bit.envs/compilers/react --compiler).

When a component is tracked by Bit, it is given its own ID. To get the full list of tracked components, type in:

$ bit list

In this case, you have only a single tracked component.

You can use the component’s ID to tag it before exporting it back.

$ bit tag user-name.react-demo-app/removable-list-item

You should expect to see this notification:

successfully installed the bit.envs/compilers/react@1.0.11 compiler
(node:51220) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
✔ ensuring package dependencies
1 component(s) tagged
(use "bit export [collection]" to push these components to a remote")
(use "bit untag" to unstage versions)
changed components
(components that got a version bump)
     > user-name.react-demo-app/removable-list-item@0.0.2

Let’s export our modified component:

$ bit export user-name.react-demo-app

You should receive a message stating:

exported 1 components to scope username.react-demo-app

The modified component is now available in the react-demo-app collection :)

Learn More

13 Top React Component Libraries for 2020

11 Top React Developer Tools for 2020

Building a UI Component Library for Your Startup