So, we are going to develop our own countdown timer React component and use Bit to easily make it available for my whole team to use in their apps.

When done, you will have your own components like this:

More than that, you will learn how to easily share components from your different into a shared collection, and use them anywhere to build faster.

Introduction

Nodejs and NPM revolutionalized the JavaScript universe, which saw the rise of so many frameworks and tools: Angular, Lerna, React, etc. Some are extinct, some on the brink of extinction, some still flourishing.

Most JS frameworks still used today like Angular, React and Vue brought the use of components to build our UI. Every single view is componentized so we can aggregate all the components to form a complex and well-defined UI.

Components give us the ability to isolate view and logic and also to make our views reusable. It is said that if you find yourself copying-and-pasting your code it is obvious you have violated the DRY principle.

But with all the goodies the components bring to the table, we still have the problem of sharing the components across multiple projects. NPM is here for a while but you find yourself creating repos for every component you won’t share them at all. Lerna and Yarn came with their own brilliant solution but still the same story as sharing components is just not good enough.

In came Bit,

Bit turns your components into building blocks you can instantly isolate and publish from any project. All your components will be organized and made available for your team, which easily can discover, install and even develop components in any project. — Jonathan Saring

Bit is an awesome tool that helps you seamlessly share your components across your projects.

For example, we have this React app:

react-app/

- src/

- components/

- login/

- login.component.js

- login.component.css

- register/

- register.component.js

- register.component.css

- App.js

- index.js

See in the above project, we have a components folder that holds the login component; which will display and hold the logic for signing in into our app. The register component holds the logic and view of our registration.

Now, in each new project we start, we will find that will need to build login and register components for the projects. It will be cumbersome and boring and repetitive to build register and login components afresh for each project. Can’t we make a generic component and share it among the projects?

We might use NPM but it will require us to seperate the components into repos and push them to NPM. It solves the issue but it’s quite hectic creating repos and pushing and pulling. Lerna can help us do the same in one repo, but won’t solve most of the over-head generating issues around it.

With Bit, we simply move into the project and isolate the components without creating new repo or folders or projects and push to Bit registry. Since automatically isolates the components and handles all their dependencies, configurations and versioning, we can publish 500 components in minutes without changing a single code-line.

Now, when working on another project and we need the login or the register component we simply add the component bit import login.component or bit import register.component . That's all, the components are ready for you at your disposal, no extras node_module or entry into package.json.

If you prefer, you can even install them using the NPM/Yarn clients.

Now, in this post lets demo how to build a Timer component and how to share it among projects using Bit.

A countdown timer is used to display the countdown to any event. Like, in the wedding anniversary, countdown timers can be used to cut the cake. You know the popular: “10! 9! 8! …0!”

Installing Bit and Scaffolding React project

The first thing we need to install the Bit CLI tool globally so that we can use from anywhere in our system.

$ npm i bit-bin -g

Now we create our React project but before we do that make sure you have create-react-app installed:

$ npm i create-react-app -g

Lets scaffold the React project:

$ create-react-app react-app

Next, we initialize bit in the directory: