The document discusses the integration of React into Django projects, highlighting the benefits of using React for building user interfaces while managing the complexity of the codebase. It details various methods for integration, including client-side and server-side rendering, along with potential drawbacks like file size and service dependencies. Additionally, it provides links to relevant resources and examples for implementing this integration effectively.

1. DJANGO MEETUP
Integrating React in
Django while staying
sane and happy

2. What is this React
thing anyway?

3. REACTJS.ORG
“React is a declarative, efficient,
and flexible JavaScript library for
building user interfaces.”

5. • Clean code – Complex and reactive frontends usually
produce complex code
• Fewer frontend bugs with Unit and Snapshot Tests
• Frontend developer experience is great
• Frontend developers do not need to know the
underlying backend
Why do I want this in my project?

6. How do I integrate
it in Django?

7. There are a few ways
to do this...

8. • Leads to a scattered codebase – Hard to navigate
• Developers must jump between DTL and React
Only using React for some
components

9. • Hard work to keep routing in sync between frontend/
backend-app
• Might have to reimplement much functionality that
already exists in Django or 3d party apps
Everything in React including
routing (SPA)

10. • Clear project structure
• Can still use Django and 3d party apps without too
much hazel
Let React handle the frontend,
let Django handle requests and routing

11. Let´s look at code! 🎉

12. Django implementation:
Template
https://github.com/Frojd/django-react-templatetags

14. Django implementation:
Views

17. React implementation

20. Client Side Rendering
• Slow initial page load
• Page flicker on navigation
• Does not work without JS

21. Server Side Rendering (SSR)
https://github.com/Frojd/Hastur/
• Running as a node daemon
• Integrates with Django-react-templatetags

22. So... Is there any cons?

23. • JS bundle file size
• Be careful when installing javascript libraries
• Analyze your javascript bundle with webpack-bundle-analyzer
• Preact or other framework
• Server Side Rendering require another service running
Cons

24. • https://github.com/mikaelengstrom/django-react-polls-example
• https://github.com/Frojd/django-react-templatetags/
• https://github.com/Frojd/Hastur/
• https://github.com/Frojd/react-sass-starterkit
• http://www.django-rest-framework.org/
• https://www.npmjs.com/package/webpack-bundle-analyzer
Links

25. ¿Questions? 🤔

26. SOCIAL MEDIA OFFICECONTACT
Thanks
Mikael Engström
mikael.engstrom@frojd.se
Twitter: @FrojdAgency
Facebook: @FrojdAgency
Linkedin: Fröjd Agency
Fröjd Interactive AB
Kungstensgatan 18
113 57 Stockholm