Build a To-Do App in React With Easy Peasy and Ant Design

How to integrate Easy Peasy in your React app

Source: Solen Feyissa on Unsplash

To-do apps are prevalent around us. They help us keep track of tasks and get things done throughout the day.

In this guide, you will learn how to build a to-do list web application using React. To store and share data between multiple components, we will leverage the Easy Peasy state management library. Furthermore, to make our UI look more appealing, the project will source components from the Ant Design library.

To learn the fundamentals of Easy Peasy, check out this article.

This will be the outcome of this article:

End result

Let’s get started!

Getting Started

Project setup

To create a blank React repository, run the following terminal command:

npx create-react-app todo-easy-peasy

Installation of modules

Our project requires the following dependencies:

• easy-peasy : This will allow us to store user data and share it throughout parts of the app.
• antd : This module will help us use components from the Ant Design package.
• nanoid : To assign ID fields to our items.

To install these packages, run this bash command:

npm i easy-peasy antd nanoid

Project folder structure

In this section, we will create some folders in our project. This will encourage code organization and thus, cleanliness.

Locate the src directory in your repository. Here, make the following folders:

• components : This folder will hold our custom components.
• store : Will hold our Easy Peasy store. This is where we will store our states and actions.

To create these directories, run this bash instruction:

cd src #go to directory…