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
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)
1 2 | $ yarn global add bit-bin |
3. Log in your account locally
1 2 | $ bit login |
4. Init workspace
1 2 | $ bit init --package-manager yarn |
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 ):
1 2 | $ bit add src/components/* |
6. Configuring the compiler accordingly (React JS / TS)
to make components usable in environments with different settings:
1 2 3 4 5 | // React JS $ bit import bit.envs/compilers/react --compiler // React with TypeScript $ bit import bit.envs/compilers/react-typescript --compiler |
7. Tag the ingredients
to build them in isolation (and change the key):
1 2 3 | $ bit tag --all 1.0.0 |
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):
1 2 | $ bit export <user-name>.<collection-name> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | const RemovableListItem = (props) => { const {id, text, removeItem} = props; return( <Item> <Text>{text}</Text> { (removeItem && id) && <DelButton onClick={() => removeItem(id)}>X</DelButton> } </Item> ) } RemovableListItem.propTypes = { /** * The items's ID */ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** * The item's text */ text: PropTypes.string.isRequired, /** * A callback to be exectuted on a remove-item event */ removeItem: PropTypes.func } export default RemovableListItem; |
For example: React with TypeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | type RemovableListItemProps = { /** The item's text */ text: string, id: string, /** A callback function for the "X" click event */ removeItem: (id: string) => void } const RemovableListItem : React.FC<RemovableListItemProps> = ({text, id, removeItem} : RemovableListItemProps) => { const [isCompleted, setIsCompleted] = useState(false); return( <li className={styles.listItem}> <span data-iscompleted={isCompleted} className={styles.text} onClick={() => setIsCompleted(!isCompleted)}>{text}</span> <button className={styles.delete} onClick={() => removeItem(id)}>X</button> </li> ) } export default RemovableListItem; |
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 :
1 2 3 4 5 6 7 8 | // 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 |
This component is entered into the components directory, located in the project’s root directory:
1 2 3 4 | ├───.git ├───components │ ├───removable-list-item |
You can now edit removable-list-item . Then add –tag to change
1 2 | $ bit tag <user-name>.<collection-name>/removable-list-item |
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:
1 2 | $ bit export <user-name>.<collection-name> |
Hopefully this article will help you understand the bit usage
Source: https://blog.bitsrc.io/