How to Build a Super-Modular Todo App with React and Bit Components
Tags: javascript, react, webdev
Published: 2019-09-05 16:37:54

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

![The final todo app composition with Bit](https://cdn-images-1.medium.com/max/2594/1*4XJPGFQtX3EmP0ZZBG1w7Q.png)*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](https://en.wikipedia.org/wiki/Larry_Constantine) and extended ever since.

Today, in the technological world of component-based libraries like [React](https://github.com/facebook/react) and with tools like [Bit](https://github.com/teambit/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](https://bit.dev/mui-org/material-ui), [Grommet](https://bit.dev/grommet/grommet) and [Semantic-UI](https://bit.dev/semantic-org/semantic-ui-react). 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:

![](https://cdn-images-1.medium.com/max/2036/1*cAylrEutkQWspFHEuR8ewg.png)

And here’s the app’s GitHub repo:
{% github https://github.com/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](https://bit.dev/joshk/basic-todo-app/todo-item), text with remove option.

1. [AddItem component](https://bit.dev/joshk/basic-todo-app/add-item), input text area with add button and remove all button.

1. [TodoApp component](https://bit.dev/joshk/basic-todo-app/todo-app), 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](https://github.com/teambit/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](https://bit.dev/semantic-org/semantic-ui-react/icon?example=5c920bc8c634f0001a931747) from the [semantic-ui-react](https://bit.dev/semantic-org/semantic-ui-react) component collection.

To install the component, firsy configure [bit.dev](https://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](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.

{% gist https://gist.github.com/JoshK2/e54a0ed9a951718135b9fad7faf5bcba %}

Here’s the final TodoItem component with live editing and playground in [Bit](https://bit.dev/joshk/basic-todo-app/todo-item).

## 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](https://bit.dev/primefaces/primereact), a button from [grommet](https://bit.dev/grommet/grommet), and icon from [grommet-icons](https://bit.dev/grommet/grommet-icons).

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.

{% gist https://gist.github.com/JoshK2/50ed55f7e14218d2291a972c45a0fd64 %}

AddItem component with live editing and playground in [Bit](https://bit.dev/joshk/basic-todo-app/add-item).

## 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](https://bit.dev/lodash/lodash) to avoid key error in map function.

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.

{% gist https://gist.github.com/JoshK2/8e8cf95ccc2e43310759bd306cbb9211 %}

Then all that’s left is to [export the components with Bit](https://bit.dev)- and the final TodoApp is now a modular and reusable component, check out the live [demo](https://bit.dev/joshk/basic-todo-app/todo-app)!

All the reusable components we built are available in this [collection](https://bit.dev/joshk/basic-todo-app), including the final todo app

Check the GitHub repo to see all the project’s code:
{% github https://github.com/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](https://addyosmani.com/first/), 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 🚀