django rest framework y react crud

Опубликовано: 16 Июль 2026
на канале: CodeFix
9
0

Download 1M+ code from https://codegive.com/9311e90
creating a crud (create, read, update, delete) application using django rest framework (drf) and react is a common approach to building web applications that require a backend api. below is a step-by-step tutorial that will help you set up a simple crud application.

prerequisites

basic knowledge of python and javascript
python installed on your machine
node.js and npm installed
django and django rest framework installed

step 1: setting up the django backend

1. *create a new django project:*



2. *create a new django app:*



3. *install django rest framework:*

add the `djangorestframework` package to your project.



4. *update `settings.py`:*

add `'rest_framework'` and `'myapp'` to the `installed_apps` list in `settings.py`.



5. *create a model:*

in `myapp/models.py`, create a simple model. for example, a `book` model:



6. *create database migrations and migrate:*



7. *create a serializer:*

in `myapp/serializers.py`, create a serializer for the `book` model:



8. *create views:*

in `myapp/views.py`, create the crud views:



9. *set up urls:*

create a new file `myapp/urls.py` and add the following code:



include this `urls.py` in the main project `urls.py` (`myproject/urls.py`):



10. *run the server:*



step 2: setting up the react frontend

1. *create a new react application:*

open a new terminal and run:



2. *install axios:*

axios is used to make http requests to the django api.



3. *create a crud component:*

in `src`, create a new file called `booklist.js` and add the following code:



4. *modify `app.js`:*

import and use the `booklist` component in `src/app.js`.



5. *run the react app:*

in the terminal, navigate to the `myfrontend` folder and run:



step 3: testing your application

1. start the django server if it’s not already running:



2. start the react app:



3. open your browser and nav ...

#DjangoRestFramework #ReactCRUD #windows
Django
Django Rest Framework
React
CRUD
API
Frontend
Backend
JavaScript
HTTP methods
JSON
RESTful services
Axios
State management
User authentication
Component-based architecture