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.
Also worth reading:
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).
“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-bin3. Log in to your account
$ bit login4. Initialize a workspace in your project’s directory
$ bit init --package-manager yarnNotice 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.0Bit 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:
Example: React with TypeScript:
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.
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-itemI can now modify the removable-list-item component.
Then — tag it with a new version:
$ bit tag <user-name>.<collection-name>/removable-list-itemThe imported component is already tracked and configured with an appropriate compiler — that is why
bit addorbit <compiler id> --compilerare not necessary here.
And finally, export the component back to the component collection:
$ bit export <user-name>.<collection-name>That’s it 🙂
Cheers! 🍺
