Introduction

React and Django, representing the dynamic duo of JavaScript and Python, synergize seamlessly to yield robust and scalable applications. This article delves into constructing a CRUD (Create, Read, Update, and Delete) application— a ToDo application—providing insights into the powerful coexistence of these two frameworks and their collective potential.

React and Django

React:

• Declarative Syntax: You describe what you want to see on the screen and React takes care of updating it when the data changes.

• Component-Based Architecture: Can break down complex UIs into smaller and reusable pieces of code.

Django:

• In-built customizable Admin Panel: Has an in-built customizable admin interface that helps the management of data and users easy and comprehensive.

• Model-View-Template (MVT) Architecture:

  • Model: Represents the data structure of the application. More like the database of the application.

  • View: Handles the presentation logic and user interface.

  • Template: Manages the presentation of data, separating it from the business logic.

ToDo - Overview:

ToDo allows users to effortlessly perform CRUD operations (Create, Read, Update, and Delete) on items (to-do lists). This application serves as a showcase, highlighting the seamless integration between the React frontend framework and the Django backend framework.

Setting Up ToDo:

Requirements:

• React.js

• Python 3 and above

• Django (Django Rest Framework)

Getting Started

1. Clone the Frontend Repository

    https://github.com/Minty-cyber/React-Django-CRUD-Frontend.git
   

2. Server Set Up (Frontend): Navigate to the frontend directory in the React App and run the server.

    cd todofront
    npm start
   

3. Clone the Backend Repository

    https://github.com/Minty-cyber/React-Django-CRUD-Backend.git
   

4. Server Set Up (Backend): Navigate to the project directory, where you should proceed to install the necessary packages and start the Django server.

cd toDOApi
pip install -r requirements.txt
python manage.py runserver

Details of the Project: How it works.

The Django Backend

Django, in conjunction with the Django Rest Framework (DRF), forms a robust backend infrastructure which is used to build the ToDo API. Let's take a swift look at the Item model:

class Item(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(null=True, blank=True)
    completed = models.BooleanField(default=False)

The URL endpoints for the CRUD operations:

path('', views.endpoints), #for testing purposes.
path('items/', views.item_list, name='items'),
path('items/<int:pk>/', views.item_detail),

The React Frontend

React's interface is constructed using a component-based architecture. The component, List.js displays the list of the items or to-dos. A quick glimpse down here:

<div  className="todo-list">
        {Items.map((items, index) => (
          <div className="item-list" key={index}>
            <div className="items">

Now, for the Django backend to communicate with React frontend, asynchronous HTTP requests are sent to the server through Axios.

useEffect(() => {
    axios.get("http://127.0.0.1:8000/items")
      .then(response => {
        setitems(response.data);
      })
      .catch(err => seterrors(err.message));
  }, []);

Want to Contribute?

ToDo is an open-source project and looking out to other developers to make contributions. Be it fixing bugs or enhancing the User Interface, the project welcomes everyone to be a part of its collaborative journey. Click Here to join in and contribute.

Conclusion

As an open-source project, ToDo not only benefits from the strengths of Django and React but also serves as a learning resource for developers interested in understanding the intricacies of integrating these technologies.