1 of 27

Django APIs + React

Modern web development with Django Rest Framework & ReactJS

Django Boston (May 2018)

​

​

William S. Vincent

2 of 27

Who Am I?

  • Freelance software developer
  • Early employee at Quizlet, other startups
  • Books

​

​

William S. Vincent

3 of 27

API

  • Application Programming Interface (API)

​

  • Way for 2 computers to communicate

​

  • Need agreed-upon rules (a protocol)

William S. Vincent

4 of 27

Why APIs?

Pros

​

  • Future proof

​

  • Multiple frontends (iOS, Android, web)

​

  • Internal or external access

​

Cons

​

  • More set up required

​

  • User auth is tricky (sessions, tokens, JWT)

​

  • JS frameworks change

William S. Vincent

5 of 27

What is a web API?

William S. Vincent

6 of 27

HTTP

  • HTTP: Communications protocol for the web

​

  • Web APIs sit “on top” of HTTP

​

  • API endpoints: url + available HTTP verbs

William S. Vincent

7 of 27

HTTP Verbs

Functionality

Create

Read

Update

Delete

HTTP Method/Verb

POST

GET

PUT

DELETE

Rough equivalence between CRUD & HTTP verbs

William S. Vincent

8 of 27

HTTP Status Codes

Code

2xx

​

3xx

​

4xx

​

5xx

Meaning

Success (200, 201)

​

Redirection (301)

​

Client error (404)

​

Server error (500)

William S. Vincent

9 of 27

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

10 of 27

Django APIs

William S. Vincent

11 of 27

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

12 of 27

Django vs Django API Structure

Django

template.html

​

urls.py

views.py

models.py

​

Django API

serializers.py

​

William S. Vincent

13 of 27

Django Rest Framework

William S. Vincent

14 of 27

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

15 of 27

Django Blog

  • Create a new Django project/app
  • Update models.py and admin.py
  • Add blog posts via Django admin

​

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

​

William S. Vincent

16 of 27

Adding DRF

​

​

  • Install, update settings.py
  • Update urls.py (project/app level)
  • Update views.py

William S. Vincent

17 of 27

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

18 of 27

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

19 of 27

Browsable API

William S. Vincent

20 of 27

CORS (Cross-Origin Resource Sharing)

  • Fundamental security feature of the web
  • Allows for cross-domain requests
  • HTTP Headers added

William S. Vincent

21 of 27

What We Didn’t Cover

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

William S. Vincent

22 of 27

Adding React

Or Vue, Angular, etc...

William S. Vincent

23 of 27

React setup

​

​

William S. Vincent

24 of 27

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

25 of 27

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

26 of 27

Conclusion

  • Add DRF to an existing Django project
  • Add CORS headers!
  • Use create-react-app
  • Run frontend/backend in two consoles

William S. Vincent

27 of 27

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