Front End Code of React js to fetch , update , create , delete
React js Frontendapi :-
Step 1:
Setting up the project First, let's create a new React app.
If you haven't already set up React, you can create a new project with the
following commands:
Cmd(terminal) command to type :-
npx create-react-app frontendapi
cd frontendapi
npm start
1) TaskList.js file code :-
import { useState, useEffect } from "react";
import axios from "axios";
const API_URL = "http://localhost:8000/api/tasks/";
const TaskList = () => {
const [data, setData] = useState([]);
const [task, setTask] = useState({ title: "", completed: false });
const [editingId, setEditingId] = useState(null);
useEffect(() => {
getTasks();
}, []);
const getTasks = () => {
axios.get(API_URL).then((response) => {
setData(response.data);
});
};
const handleChange = (e) => {
const { name, value } = e.target;
setTask((prev) => ({
...prev,
[name]: name === "completed" ? value === "true" : value,
}));
};
const handleSubmit = (e) => {
e.preventDefault();
if (editingId !== null) {
// Update
axios.put(`${API_URL}${editingId}/`, task).then(() => {
setTask({ title: "", completed: false });
setEditingId(null);
getTasks();
});
} else {
// Create
axios.post(API_URL, task).then(() => {
setTask({ title: "", completed: false });
getTasks();
});
}
};
const handleEdit = (item) => {
setTask({ title: item.title, completed: item.completed });
setEditingId(item.id);
};
const handleDelete = (id) => {
axios.delete(`${API_URL}${id}/`).then(() => {
getTasks();
});
};
return (
<>
<h1>Task Manager</h1>
<form onSubmit={handleSubmit}>
<input
name="title"
value={task.title}
onChange={handleChange}
placeholder="Title"
required
/>
<select
name="completed"
value={task.completed}
onChange={handleChange}
>
<option value={false}>Not Completed</option>
<option value={true}>Completed</option>
</select>
<button type="submit">{editingId ? "Update" : "Add"} Task</button>
</form>
<h2>Task List</h2>
<ul>
{data &&
data.map((item) => (
<div className="row" key={item.id}>
<div className="col-sm-3">
<h3>{item.title}</h3>
<p>{item.completed ? "✅ Completed" : "❌ Not Completed"}</p>
<button onClick={() => handleEdit(item)}>Edit</button>
<button onClick={() => handleDelete(item.id)}>Delete</button>
</div>
</div>
))}
</ul>
</>
);
};
export default TaskList;
2) App.js file code :-
import React from 'react';
import TaskList from './TaskList';
function App() {
return (
<div className="App">
<TaskList />
</div>
);
}
export default App;
3)Backend Api Django :-
Django Rest Api backend code:-
1)run following command
pip install django-cors-headers
4)run following command
pip install djangorestframework
and in your project frolder setting.py as show below:-
‘rest_framework’,
‘corsheaders’
5)todo/models.py file :-
from django.db import models
class Task(models.Model):
title = models.CharField(max_length=255)
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
6) todo/serializers.py file:-
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = '__all__'
7)todo/urls.py :-
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet
router = DefaultRouter()
router.register(r'tasks', TaskViewSet)
urlpatterns = [
path('', include(router.urls)),
]
8)todo/views.py file code:-
from rest_framework import viewsets
from .models import Task
from .serializers import TaskSerializer
class TaskViewSet(viewsets.ModelViewSet):
queryset = Task.objects.all()
serializer_class = TaskSerializer
9)todo_project /settings.py :-
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'todo',
'corsheaders',
]
10)todo_project/urls.py file code:-
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('todo.urls')),
]
11)Finally run:-
python manage.py runserver
fro get and Post option:-
http://127.0.0.1:8000/api/tasks/
for Put & delete ,
You can now:
GET /api/tasks/ –
List all tasks
POST /api/tasks/ –
Create a new task
GET /api/tasks// –
Retrieve a task
PUT /api/tasks// –
Update a task
DELETE /api/tasks//
– Delete a task
Comments
Post a Comment