How to easily compose a simple app with reusable React components from bit.dev.

Aayush Jaiswal

·

Follow

Published in

Bits and Pieces

·

5 min read

·

May 13, 2019

--

1

Listen

Share

I have been talking a lot about React hooks in my previous articles and have been praising them for a while now. This time I would like to talk about this awesome tool called Bit.

Bit and React Hooks

Bit is a platform and open-source tool built to help build modular apps through the development and composition of components. It allows you to share your reusable components within your team and the community.

It’s one of the most exciting tools I’ve seen recently, as it instantly and seamlessly isolates components from any project to be used and even developed easily in any other project. With React, that’s incredible.

Using component based architecture? Seeking better code-sharing and modularity? Building a UI design system/library? Then definitely go for Bit.

React hooks are the new shiny thing, that has taken over the React community and is getting a lot of praise (which it definitely should).

I would take a step further and combine these amazing tools (Bit and Hooks) to build a modularized Todo App. So without any further delay, let’s get started.

Tip: If you don’t know about React hooks, please check these articles.

Todo App

We will be using semantic-ui-react for styling our app, using its attractive UI components. It’s a great React UI component library, turned into a component collection with Bit so that individual components can be found and used.

Get started

We will use create-react-app to make our React project.

create-react-app hooks-todo

Now it’s time to set up things on Bit side:

• Create an account, if you haven’t.
• Create a collection, give any name you like.
• Install Bit on your machine.

yarn global add bit-bin// ORnpm install bit-bin -g

• Initialize Bit in the project.

bit init

Moving back to the React side. We will be using 3 components to make our app:

1. AddItem component

The name says it all. This component will be responsible for adding our todo task. This component will contain the input state and will share it on a button click action to the parent component todos array.

As mentioned early, we will use semantic-ui-react for the development of UI components.

To use these components we can install them with Yarn or NPM from bit.dev:

yarn add @bit/semantic-org.semantic-ui-react.buttonyarn add @bit/semantic-org.se mantic-ui-react.input// ORnpm i @bit/semantic-org.semantic-ui-react.buttonnpm i @bit/semantic-org.se mantic-ui-react.input

We are using the useState hook to handle the state of the input field and passing the input state to the parent component which we will discuss in a minute.

2. ListItem component

This component lists the todo items from the todos array in the parent component. We get the array as props and then map through the array to display the list. We will be using theList component from the semantic-ui.

yarn add @bit/semantic-org.semantic-ui-react.list// ORnpm i @bit/semantic-org.semantic-ui-react.list

3. Todo component

This is the parent component responsible for handling the todos state. The state is handled using theuseState hook. Adding an element into the todos state and removing the element from the todo state both are handled in this component.

We will be using the unique-id method from lodash to provide unique id and SemanticUiStyle to provide styling.

yarn add @bit/lodash.lodash.unique-id
yarn add @bit/semantic-org.semantic-ui-react.internal.style-links// ORnpm i @bit/lodash.lodash.unique-id
npm i @bit/semantic-org.semantic-ui-react.internal.style-l

Once all the components are done. We have to push them to the Bit collection created.

bit add src/components/*# Importing the compiler for the build
bit import bit.envs/compilers/react --compilerbit tag --all 1.0.0bit export your_username.collection_name

Once done, our collection should look something like this:

Conclusion

In this article, we discussed some cool stuff related to Bit and Hooks. Hope you liked this article and learned something new and if you did 👏 your 💖out and follow me for more content on Medium and as well as on Twitter. Please feel free to comment and ask anything. Thanks for reading 🙏 .

Learn more