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