How to Build a To-Do App with React.js and Django Rest Framework – Full-Stack Guide

In this comprehensive guide, we’ll create a powerful To-Do app using React.js for the frontend and Django Rest Framework (DRF) for the backend. This full-stack approach combines React’s dynamic UI capabilities with Django's robust backend functionality, resulting in a seamless, high-performance To-Do application.

This project will guide you through building a RESTful API in Django, creating a responsive frontend in React, and connecting them for real-time interaction. By the end, you’ll have a complete To-Do app with features like task creation, update, completion status, and deletion.

Prerequisites

• Basic knowledge of JavaScript (ES6) and Python.
• Familiarity with React and Django basics.
• Installed and set up Django, Django Rest Framework, and React.js.

Steps to Build a Full-Stack To-Do App with React.js and Django Rest Framework

Step 1: Set Up Django and Django Rest Framework

Start by setting up the Django backend. Install Django and Django Rest Framework if they aren’t installed, and create a new Django project and app for the backend. This backend will serve as our API layer, allowing the React frontend to interact with the database.

Step 2: Design the API with DRF

Using Django Rest Framework, create API endpoints for CRUD operations:

• Create: Add new tasks.
• Read: Retrieve the list of tasks.
• Update: Edit or mark tasks as completed.
• Delete: Remove tasks from the list.

Set up Django models for the To-Do items, serializers to transform model instances to JSON, and views to handle HTTP requests.

Step 3: Set Up CORS for Cross-Origin Requests

Since React will make API calls to Django, we need to configure CORS (Cross-Origin Resource Sharing) in Django to allow requests from the React frontend. Install and configure Django CORS headers to allow safe communication between the two parts of your app.

Step 4: Build the React Frontend

Create a new React app using create-react-app, and set up a basic folder structure for components and services. Components will include:

• App Component: The main component that organizes other components.
• TaskInput Component: Collects user input to create new tasks.
• TaskList Component: Displays the list of tasks.
• TaskItem Component: Represents individual tasks with actions to mark, edit, or delete.

This structure keeps the code modular and allows easy maintenance.

Step 5: Connect React to the Django API

Set up an API service in React to manage HTTP requests. Use axios or fetch to communicate with the Django REST API. Through this service, the frontend can:

• Fetch existing tasks from the Django backend.
• Send new tasks to the Django backend.
• Update task completion status.
• Delete tasks from the backend.

Make API calls in each component as needed and update the state in React to reflect changes instantly.

Step 6: Implement Core Functionality in React

• Add Tasks: In the TaskInput component, capture user input and send the new task data to the Django backend through the API service.
• View Tasks: The TaskList component should fetch all tasks from the API and render them dynamically.
• Update Task Status: In the TaskItem component, add a checkbox to mark tasks as complete. When clicked, update the task’s status in Django via the API.
• Delete Tasks: Add a delete button in TaskItem to remove tasks from the list. When clicked, call the API to delete the task from the backend and update the React state.

Step 7: Style the To-Do App

To give your app a clean and user-friendly design, apply basic CSS. Add styles to ensure the input fields, buttons, and task list have a consistent look and feel. Use Flexbox or Grid for a neat layout, and apply conditional styling to mark completed tasks (like a strikethrough effect or a different color).

Step 8: Test and Debug

Ensure that all functionalities are working as expected:

• Check if tasks can be added, updated, and deleted from both the frontend and backend.
• Test edge cases, such as empty input fields or long task descriptions.
• Confirm that CORS is correctly set up and that React and Django communicate without issues.

GitHub Repository

Explore the complete project on GitHub for a step-by-step guide to building the To-Do app with React.js and Django Rest Framework.

GitHub Repository Link: GitHub Link to Full-Stack To-Do App

YouTube Tutorial

Watch our YouTube tutorial for an in-depth video walkthrough on building this To-Do app with React.js and Django Rest Framework.

Conclusion

Congratulations! You’ve built a complete To-Do app with a React.js frontend and a Django Rest Framework backend. This project is a practical way to learn and implement full-stack development, covering REST APIs, frontend-backend interaction, state management, and CRUD functionality. Now, try extending the app with additional features like user authentication, task prioritization, or due dates!

Happy coding!