Maximize code reuse in React

Tram Ho

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

Code reuse is great – everyone

It's good to reuse the code, but we all know it will take a lot of time and effort. Reusing code on repositories requires packaging and publishing – a headache. The code needs documentation, examples and a certain collection of web pages to display it and to see if it's really worth exploring and using.

Minimizing the cost of making code reusable.

In this post, I will show you how to use Bit and Bit.dev to minimize the cost of making your React code reusable and available to you and your team. Reducing costs is key to maximizing code reuse, speeding up development and building a more maintainable and scalable coding base.

What is Bit & Bit.dev?

Bit.dev is a component center. It can store and manage reusable components from your various projects. It is a powerful tool that enhances code reusability and optimizes your team collaboration. It is also a good choice to build design systems from scratch (because it basically 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 will be published to the Bit's registry).

"Harvesting" reusable components

source

I have an app called to-do , and now I need to share its components. Let's handle it with Bit

8 steps to share components

1. Create component collection on bit.dev

It will be almost like creating an empty repository on github.

2. Installing Bit globally (NPM / Yarn)

3. Log in your account locally

4. Init workspace

Note that a new .bitmap file has been added to your directory and the bit will be added to your package.json

5. Tracking all application components.

In this case, they are located in the components directory (e.g. src/components/button/index.js ):

6. Configuring the compiler accordingly (React JS / TS)

to make components usable in environments with different settings:

7. Tag the ingredients

to build them in isolation (and change the key):

The bit keeps track of your component dependencies and no manual configuration. But you can still check it with $ bit status

8. Export the tracked components

(push them to the shared collection):

Done, the components are now shared and public

You can visit bit.dev/<user-name>/<collection-name> to see them displayed, demo on Bit. If not, you can check out my collection here:

* A demo React with TS collection *

Write document for component: from local to cloud

The documentation process begins by writing the components in your local dev environment and ends by writing the examples in the component page on bit.dev.

When using React with prop-type or React with TypeScript, most of the work just stops there. Bit extracts props and types, creates a document template, and displays it on the component page (on bit.dev). The document will automatically be generated with JSDocs descriptions, which is nice.

Example: React with prop-types:

For example: React with TypeScript

Write an example on Bit's playground

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

The examples allow the components to show in Bit's playground (this guy needs a specific example to show) and show the user the components on how to best use them.

The component is displayed in Bit's playground

Consuming components – built and source code

There are two ways to use shared components on bit.dev. The first is by using the familiar installation npm install or yarn add (shared components are published on Bit's own registry – not NPM. The commands here are for convenience only).

The second way is to bit import the bit import with their source code. You can choose that for a number of reasons – one of which is further development and even republish, modification.

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

This component is entered into the components directory, located in the project's root directory:

You can now edit removable-list-item . Then add –tag to change

The imported component has been monitored and configured with the appropriate compiler – that's why the bit add bit <compiler id> --compiler or bit <compiler id> --compiler not needed here.

Finally, export the component back to the collection:

Hopefully this article will help you understand the bit usage

Source: https://blog.bitsrc.io/

Share the news now

Source : Viblo