Todo List App ReactJS Frontend + WordPress REST API Backend Part 1: The Dream
Oh Great Another Basic Todo List, Or Is It?
I know what you are probably thinking. Not another todo list. I know its been done before, but I did not decide to create this for purely practice and instructional purpose. I genuinely wanted to create my own dynamic todo list, one that I would actually use in my day to day life to add/edit/remove tasks, so this wasn’t going to be your typical, bullet list, nonpersisted todolist that is often seen in tutorials.
So what exactly did I build here? I built a todo list app that would render a list of tasks that could be rearranged via drag and drop AND also persist the task data, so that I could log in from anywhere and view my list of tasks. This is the reason why WordPress was incorporated, it essentially is a headless instance of WordPress that acts as a back-end server for the tasks, while a React app was built to pull the data, display it, and allow the user to modify, create or delete any data.
For the sake of simplicity and, well, because there really wasn’t any real need for it, I decided to leave out any external state management framework, such as Redux or Mobx. This was my first real tackle at a React app so I wanted to focus on using the built in local state management that React Components come with. That wasn’t the only reason for making this decision though. Many times people decide to throw in libraries like Redux into projects that really don’t need them. In this case, I felt that there was no need for global state management. I understand the usefulness of libraries like Redux, and am currently implementing it in other projects, but before deciding to use them, you should step back and consider if the project you are working on really needs it.
This concludes the intro to the Todo List implementation that I will be explaining throughout my articles. To summarize, the Todo List:
- Implements a WordPress REST API headless installation serving as the back-end of the project.
- Implements a React JS app that serves as the front-end of the project.
- Creates WordPress back-end endpoints that serve as gateways for the React App to pull data.
- Relies purely on the state management system that React offers, for the reason that there really was no need for global state management in this project.
There is plenty for me to explain regarding project details that I will continue to do in upcoming articles. If any of you have general questions or concerns about the way I envisioned the functionality, feel free to leave a comment below, or feel free to contact me.