Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Django APIs + React (Django Boston - May 2018)
Search
William S. Vincent
May 01, 2018
Technology
0
31
Django APIs + React (Django Boston - May 2018)
Learn about modern web development with Django REST Framework and ReactJS.
William S. Vincent
May 01, 2018
Tweet
Share
More Decks by William S. Vincent
See All by William S. Vincent
Django for AI: Deploying Machine Learning Models with Django
wsvincent
0
5
DjangoCon Europe 2025 Keynote - Django for Data Science
wsvincent
0
880
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
650
DjangoConUS 2024 - Django User Model: Past, Present, and Future
wsvincent
0
47
DjangoCon US 2022 - Solving the Django Jigsaw Puzzle
wsvincent
0
55
DjangoCon US 2019 - Search from the Ground Up
wsvincent
0
440
8 Reasons Why Learning Django is Hard (Django Boston - January 2019)
wsvincent
0
37
DjangoCon US 2018 - Finally Understand User Authentication in Django REST Framework
wsvincent
0
23
Other Decks in Technology
See All in Technology
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
500
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
120
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
310
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
690
Azure Well-Architected Framework入門
tomokusaba
1
350
能登半島地震で見えた災害対応の課題と組織変革の重要性
ditccsugii
0
240
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
110
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
210
AWS IoT 超入門 2025
hattori
0
280
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Statistics for Hackers
jakevdp
799
220k
Context Engineering - Making Every Token Count
addyosmani
5
220
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Become a Pro
speakerdeck
PRO
29
5.5k
The Language of Interfaces
destraynor
162
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Music & Morning Musume
bryan
46
6.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
William S. Vincent Django APIs + React Django Boston (May
2018) Modern web development with Django Rest Framework & ReactJS
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 • 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 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 Functionality Create Read Update Delete
HTTP Method/Verb POST GET PUT DELETE Rough equivalence between CRUD & HTTP verbs
William S. Vincent HTTP Status Codes Code 2xx 3xx 4xx
5xx Meaning Success (200, 201) Redirection (301) Client error (404) 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 template.html
urls.py views.py models.py Django API serializers.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/