Reusing React UI Components

How to leverage Bit+NPM to simplify React and other UI component sharing, reuse and collaboration.

When working with UI components, reusability across projects and teams is often the key to faster development, UI consistency and simpler maintenance.

As today components are designed to be reusbale with React, Vue and other great frameworks, the ability to reuse them is becoming critical. When different developers are rewriting the same components in different places, time is wasted and maintenance soon becomes a nightmare.

Using Bit and NPM together you can bring new found Simplicity and Scalability to the code-sharing workflow, as the entire team can collaborate and share code between their projects while keeping it synced.

Component reuse can be tricky

The biggest problem with reusing components is the overhead around it.

First, to make a reusbale component reusbale, you’d have to turn it into a package. This means Splitting the repo, boiler-plating a package including package.json, build and test configurations etc, and then publish it to NPM.

You’d also have to document the component, create a wiki, and somehow organize all these components and make them discoverable for the team.

The developers using this code will install it with a package manager, which means they can’t make changes to the component when needed without a large amount of overhead. This makes maintenance much harder over time.

Many teams encounter these problems, which might end up leading to undesired forced architectures or code duplications. But, with Bit + NPM you can scale component reuse without this overhead. Here’s how.

Bit + NPM: Scale component reuse

With a Bit+NPM workflow components can be shared, developed and synced across project without the overhead mentioned above. Here’s how it works in 3 simple steps, from publish to syncing changes between teams.

1. Zero publish overhead

Example: Here’s an example app and React components published from it.

Instead of forcing you to refactor your code or split repositories to publish packages, Bit lets you seamlessly isolate components in any existing project.

This is done using the bit add command to point Bit to the sets of files you want to reuse. When Bit identifies the components, it will automatically detect their dependencies so that you don’t have to configure anything.

Then, you can add pre-made build + test environments (or create your own) and lock a version for the components using bit tag. All that’s left is to publish the components using bit export and that’s it.

All the components from the project are now available to reuse and install with NPM, or to consume via bit import to develop them from any project.

This means 0 refactoring, 0 code or file changes, 0 configurations and no manual dependencies definition. While eliminating the overhead around publishing the components, you can scale component reuse.

2. Discoverability and teamwork

https://bitsrc.io/bit/movie-app/components/hero

Once exported, all the components are organized in the cloud to be made more discoverable than they would have been with NPM alone.

Here are a few key features to help find and navigate components at scale:

• Collections: Component can be organized into collection by theme, team, project or anything you’d like.
• Visualization: UI Components (React for now) can be rendered so that you can play with the components and choose with your own eyes.
• Test + Build results: Bit builds and runs tests for your components outside of your project, to make sure they’re battle-ready. The results are are presented as a useful indication that it works and in what cases.
• Auto-parsed docs: Bit will automatically parse and present docs and examples from the code itself using .md files and jsdocs.

As a result, and combined with Bit’s team managing features, you can more easily find and manage the components you share, their quality and so on.

3. Collaborative workflow: 2-way development

Another useful feature of Bit is that apart from installing the components with NPM/Yarn, you can also use bit import to source the components in any project using them(!).

This means that when a component needs slight improvements or modifications, you can simply import it into the consuming project, make the changes, and share the new version back out to your team’s collection.

Then, if you choose to do so and have the right permissions, you can update the component in any project it’s in, including the original repository from which it was shared.

Changes can be merged between projects using Bit’s extension of Git’s merge utility, which means the sync process across projects is smooth and fluent.

When a team or several teams are working together, this distributed workflow makes development and maintenance much faster over time. So far, ~75% of the thousands of developers using Bit since Jan 2018 prefer importing the components over installing them as packages.

What’s next

Bit + NPM is a useful workflow for effective sharing and collaborating on UI components across projects and teams. Bit isn’t limited to UI components, so the same workflow works for Node.js modules, pure JS functions and more.

Future roadmap includes features to increase discoverability even further, a smart event-driven update mechanism, and support for more languages.

Bit is open source, and is being constantly maintained and developed. Feel free to give it a try, suggest feedback, contribute or extend it yourself.

Bit - Share and build with code components_Bit helps you share, discover and use code components between projects and applications to build new features and…_bitsrc.io

teambit/bit_bit - Easily share code between projects with your team._github.com

Learn more

11 Javascript Utility Libraries You Should Know In 2018_11 Useful Javascript utility libraries to speed your development._blog.bitsrc.io

How To Write Better Code In React_9 Useful tips for writing better code in React: Learn about Linting, propTypes, PureComponent and more._blog.bitsrc.io

Monorepos Made Easier with Bit and NPM_How to leverage Bit + NPM to go monorepo without the overhead._blog.bitsrc.io