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