rendered-react-django
React is a MVC framework javascript library for building user interfaces. Although tempting, the use of react wrecks an apps SEO. The package react-python allows the rendering of react components to occur on the server side. Here's the github repository for django-react.
This project is an example of using react components using this package. It uses Material-UI to follow Google's material guidelines. It's pretty.
https://github.com/owais/django-webpack-loader
Dependencies
The purpose of python-react is to replace the django template system with react components. The package has multiple node dependencies, and requires a render server in order to render the components on the server-side. So, implementing this package would affect:
-
The way Django templates are used. A
{% rendered raw %}tag would replace any HTML (React can render JSX into native HTML if we don't want to include any react components but want to stay consistent with the template style). -
An extra proccess to render the components. Best to use Supervisor to run the render server in the background consistently. We can also wrap the call to the server to first check if the data is cached locally and populate the rendered markup with that data to ease the load.
Passing in data
python-react takes a dictionary of data that can be passed through the renderer for use on the client side, i.e.:
render_component(
path='',
props={
'foo': 'bar'
},
)django-webpack-loader
The other direction to go in is using a module bundler like webpack. The package django-webpack-loader consumes bundles (i.e. React components) and generates static bundles that can then be used in Django templates. This writeup does a great job at explaining the relationship between webpack, react and django.
React.js also has a tutorial regarding the use of webpack to render bundles on the server side. This may be the preferred approach, as it allows:
- frontend engineers and designers to run webpack mode in watch mode
- use grunt, gulp, or any dev server without limitations
- makes it easy to use npm or bower as a package manager
The limitations to this approach over something like python-react include:
- decouples frontend django and backend, making it harder to store static files in app directories (although changing to this workflow is more awesome)
- That's about all, folks
Modern frontends with Django along with Webpack plus hot react components are great starting points. The packages used for this approach include
How to Install
currently does not run correctly, migrating from python-react to django-webpack-loader
pip install requirements
cd react
npm install
node server.js
cd ..
manage.py runserver
{% load render_bundle from webpack_loader %}
<html>
<head>
<meta charset="UTF-8">
<title>Django, Webpack and ReactJS</title>
{% render_bundle 'main' 'css' %}
</head>
<body>
<!-- Using django-webpack-loader -->
{% render_bundle 'main' 'js' %}
<!-- react-render options below -->
{{ my_component }}
<!-- .render_props outputs JSON serialized props.
This allows you to reuse the encoded form of your props on the client-side.
-->
<script>
var myProps = {{ my_component.render_props }};
</script>
</body>
</html>