Scribd
Upload
180 views

DRF + React

This document discusses building APIs with Django and Django Rest Framework to be consumed by frontend frameworks like React. It covers setting up Django Rest Framework in an existing Django project, defining serializers and endpoints, and basic React integration. The key steps are to install DRF, define serializers that transform models to JSON, set up DRF-specific URLs and views, enable CORS, and make requests to the API from React to build the frontend.

Uploaded by

Agil Syofian Hidayat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
180 views

DRF + React

This document discusses building APIs with Django and Django Rest Framework to be consumed by frontend frameworks like React. It covers setting up Django Rest Framework in an existing Django project, defining serializers and endpoints, and basic React integration. The key steps are to install DRF, define serializers that transform models to JSON, set up DRF-specific URLs and views, enable CORS, and make requests to the API from React to build the frontend.

Uploaded by

Agil Syofian Hidayat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Django APIs + React

Modern web development with Django Rest


Framework & ReactJS

Django Boston (May 2018)

William S. Vincent
Who Am I?
● Freelance software developer
● Early employee at Quizlet, other startups
● Books

William S. Vincent
API
● Application Programming Interface (API)

● Way for 2 computers to communicate

● Need agreed-upon rules (a protocol)


William S. Vincent
Why APIs?
Pros Cons
● Future proof ● More set up required

● Multiple frontends (iOS, ● User auth is tricky


Android, web) (sessions, tokens, JWT)

● Internal or external access ● JS frameworks change


William S. Vincent
What is a web API?

William S. Vincent
HTTP
● HTTP: Communications protocol for the web

● Web APIs sit “on top” of HTTP

● API endpoints: url + available HTTP verbs


William S. Vincent
HTTP Verbs
Rough equivalence between CRUD & HTTP verbs

Functionality HTTP Method/Verb


Create POST
Read GET
Update PUT
Delete DELETE
William S. Vincent
HTTP Status Codes
Code Meaning
2xx Success (200, 201)
3xx Redirection (301)
4xx Client error (404)
5xx Server error (500)
William S. Vincent
API Endpoints
● https://mysite.com/api/users
# GET returns collection of all users

● https://mysite.com/api/users/<id>
# GET returns a single user

William S. Vincent
Django APIs

William S. Vincent
Building APIs with Django
● Multiple packages available
● Django Rest Framework the clear favorite
○ Easily add to existing Django sites
○ Complete feature set
○ Very mature

William S. Vincent
Django vs Django API Structure
Django Django API
template.html serializers.py

urls.py
views.py
models.py
William S. Vincent
Django Rest Framework

William S. Vincent
Django + DRF
● Add DRF to existing(!) Django sites
● Only need models.py file from regular Django
● Write DRF-specific urls.py, views.py, and
serializers.py files

William S. Vincent
Django Blog
1. Create a new Django project/app
2. Update models.py and admin.py
3. Add blog posts via Django admin

https://github.com/wsvincent/djangoboston-drf-react-blog

William S. Vincent
Adding DRF
● Install, update settings.py
● Update urls.py (project/app level)
● Update views.py

William S. Vincent
Serializers

● The real “magic” of Django Rest Framework

● Transform models/querysets into JSON

● Deserializers transform data from client


back into complex data types too
William S. Vincent
Serializers
# posts/serializers.py
from rest_framework import serializers
from . import models

class PostSerializer(serializers.ModelSerializer):

class Meta:
fields = ('id', 'title', 'body',)
model = models.Post

William S. Vincent
Browsable API

William S. Vincent
CORS (Cross-Origin Resource Sharing)

● Fundamental security feature of the web


● Allows for cross-domain requests
● HTTP Headers added

William S. Vincent
What We Didn’t Cover

● Viewsets/Routers
● Authentication/Permissions
● Documentation
● Tests, Throttling, Pagination, etc.

William S. Vincent
Adding React
Or Vue, Angular, etc...

William S. Vincent
React setup

William S. Vincent
Project structure
frontend
├── public
├── src
├── App.js
backend
├── backend_project
├── settings.py
├── urls.py
├── posts
├── models.py
├── serializers.py
├── views.py
├── urls.py

William S. Vincent
App.js

● Only need to update one file!


● Endpoint: http://127.0.0.1:8000/api/v1/
● Use map() to display all blog posts

William S. Vincent
Conclusion

● Add DRF to an existing Django project


● Add CORS headers!
● Use create-react-app
● Run frontend/backend in two consoles

William S. Vincent
Resources
Django Rest Framework Docs
http://www.django-rest-framework.org/

Demo Project
https://github.com/wsvincent/djangoboston-drf-react-blog

Slides
https://tinyurl.com/drf-react

My Site
https://wsvincent.com/

William S. Vincent

You might also like