Having a clear dichotomy between client-side and server-side applications comes with many advantages such as separation of concerns and loose coupling, which allows teams to work independently. However this might be overkill for smaller teams or projects managed by the same person. In such situations, a better approach might be to have relevant code for both the front-end and back-end reside in the same project. In this tutorial, I’ll show you how to build a web application with React and CodeIgniter.

According to the official documentation, React is a JavaScript library for building user interfaces. My favorite feature of React is that it allows me to structure my web applications by breaking the interface into components and building accordingly. I’ve found this to add reusability and consistency to my applications.

CodeIgniter, on the other hand, is a lightweight open source PHP framework that allows developers to build web applications in a flexible manner. While its MVC (Model-View-Controller) architecture provides a cleaner design when building web applications, it is also considered as a great tool for building RESTful APIs.

To allow us focus on the integration and front-end aspects of this tutorial, we’ll be building on a  previous tutorial where CodeIgniter was used to build a secure RESTful API. Hence you can clone the source code for the repo  here to start things off. However, you’re free to use another CodeIgniter project if you have one.

Prerequisites

A basic understanding of CodeIgniter and React will be of help in this tutorial. However, I will provide brief explanations and links to official documentation throughout the tutorial. If you’re unclear on any concept, you can review the linked material before continuing with the tutorial. I will also be making mention of Webpack in this tutorial, however you do not need previous experience with this as I will provide an introduction and guide you through the process of setting it up in your project.

Additionally, you need to have the following installed on your system:

• Composer. Composer will be used for dependency management in your CodeIgniter project.
• A local database instance. While MySQL will be used in this tutorial, you are free to select your preferred database service.
• Yarn: Yarn will be used to manage Javascript packages in your React project. Alternatively you can use npm.

#code #tutorials and hacks #php