Build a Super-Modular Todo App with React and Bit Components

How to compose a highly modular React application with reusable components from 5 different libraries.

The final todo app composition with Bit

Modular programming has been around since the 60s, and the term itself was set at 1968 by Larry Constantine and extended ever since.

Today, in the technological world of component-based libraries like React and with tools like Bit, application modularity can be taken to a whole new level.

We will compose a simple React Todo application using reusable components from 5 popular libraries like Material-UI, Grommet and Semantic-UI. Thanks to Bit, we can quickly isolate and compose these components into an app.

When done, not only we will compose a highly-modular app from reusable components, but we will have a collection of components we can reuse to build more apps. The entire app is shared as a reusable component, which can be extended and composed with other components to build larger apps.

This is very exciting, as it’s a live implementation of full-blown modular application composition with a Lego-like experience.

This is the result of the todo list app:

And here’s the app’s GitHub repo:

JoshK2/basic-todo-app-using-bit

3 Components

For creating the app I decided to divide the App’s code into 3 components:

1. TodoItem component, text with remove option.
2. AddItem component, input text area with add button and remove all button.
3. TodoApp component, this is the main code of the app that includes the TodoItem and the AddItem, so there will be a List with simple code to manage all the components options like remove, remove all and add.

Components 1+2 are modularly composed of components isolated and shared from different libraries- using Bit which helps us isolate, share and manage reusable components to build modular applications.

TodoItem

This component receives a simple text and id for removing the right todo item from the main list as props, and uses a remove icon from the semantic-ui-react component collection:

icon - semantic-ui-react · Bit

To install the component, firsy configure bit.dev as a scoped registry (one time action) and then install the component using Yarn:

npm config set '@bit:registry' https://node.bit.dev
yarn add @bit/semantic-org.semantic-ui-react.icon

This is the code of the component, after adding some helping-code to show the remove icon and send remove as an event to the main component when remove is clicked.

Here’s the final TodoItem component with live editing and playground in Bit:

todo-item - basic-todo-app · Bit

AddItem

This component shows an input text area with auto resize and two buttons, one to add an item to the list, and the second to remove all items from the list. The remove all button work with props to show or hide this button.

So for this, I use input text area and button from primereact, a button from grommet, and icon from grommet-icons.

inputtextarea - primereact · Bit

button - primereact · Bit

button - grommet · Bit

add - grommet-icons · Bit

Install it:

yarn add @bit/primefaces.primereact.inputtextarea  
yarn add @bit/primefaces.primereact.button  
yarn add @bit/primefaces.primereact.internal.stylelinks  
yarn add @bit/grommet.grommet.button
yarn add @bit/grommet.grommet-icons.add

This is the code of the component after adding some helping code to use the Add button and the Remove All button.

AddItem component with live editing and playground

add-item - basic-todo-app · Bit

TodoApp

This component is the main component that uses the TodoItem and the AddItem components. The component has a list of item and allow to send an initial list as a prop, and receives all the event from the other components to manage the list. Like the add item, the remove item and the remove all item.

So I use List component from semantic-ui-react, and a unique id function from lodash to avoid key error in map function.

list - semantic-ui-react · Bit

unique-id - lodash · Bit

Install it:

yarn add @bit/semantic-org.semantic-ui-react.list  
yarn add @bit/semantic-org.semantic-ui-react.internal.style-links
yarn add @bit/lodash.lodash.unique-id

This is the main code of the app, it receives and manages all the events that come from AddItem and TodoItem components.

Then all that’s left is to export the components with Bit- and the final TodoApp is now a modular and reusable component!

todo-app - basic-todo-app · Bit

All the reusable components we built are available in this collection, including the final todo app

basic-todo-app by joshk · Bit

Check the GitHub repo to see all the project’s code:

JoshK2/basic-todo-app-using-bit

Conclusion

In this post, we’ve seen a very real example of modular software composition with reusable React components and Bit.

When we base our software design on modularity of smaller focused components, we build a better application which is easier to develop, maintain, test and extend. Today, building modular apps becomes more practical- and more fun- than ever before in history.

The same can be done not only with React and not only with frontEnd components. In my next posts, I’ll play with a modular composition for a verity of different technologies and architectures. Thanks for reading and feel free to ask anything! Cheers 🚀

Learn more

How to Share React UI Components between Projects and Apps

Atomic Design With React And Bit: Simplify a Complex UI

5 Tools for Faster Development in React