Todo List App ReactJS Frontend + WordPress REST API Backend Part 1: The Dream

As the future of web development continues to rapidly change, there is a certain pattern that we continue to consistently see, and that is the use of a Javascript(JS) framework to build a site. We don’t have to look so far into the future to see this pattern in action, with the introduction of the Gutenberg Editor in WordPress 5.0 being built on top of ReactJS. With the use of any JS framework, there needs to be a way of accessing data asynchronously for the framework. A common way of achieving this is through a REST API. I wont go into too many details about the concept of REST, but in short, a REST API created HTTP endpoints for a client to use to transfer/receive data between the client and a server. Getting back to topic here, I decided I too wanted to take part in this pattern and also create a web app using a front-end framework, but I wanted to incorporate it with another love of mine, and that is WordPress. Out of the box, WordPress provides a REST API with some endpoints included, so I decided that I would use this, alongside ReactJS, to create a Todo List application that would run on a React front-end and WordPress REST API back-end.

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.

Conclusion

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.