Render React components on the server side in Django, also called "isomorphic React". You would do this for faster page loads, to make it friendlier to web crawlers and for SEO.

from react_render.django.render import render_component

props = {
    'foo': 'bar',
    'woz': [1,2,3],
}

rendered = render_component('path/to/component.jsx', props=props)

print(rendered)

It works by having a NodeJS service on the same server that can render the React components. The Python just uses a simple HTTP API to send the context and the file path over to the service, and it responds with the rendered HTML.

• Installation
• render_component()
• RenderedComponent
• Running the tests

npm install react-render-service --save
pip install react-render-client

Optional: Point it to the service in your settings.py

REACT_SERVICE_URL = 'http://localhost:63578/render'

Start the node server which hosts the renderer.

react-service --debug

Renders a component to its initial HTML.

Returns a RenderedComponent instance, which can be passed directly into templates to output the component's HTML.

Arguments:

• path_to_source — a path to a JS or JSX file which exports the component. If the path is relative, django's static file finders will be used to find the file.
• props optional — a dictonary that will be serialised to JSON and passed to the component during the renderering process.
• to_static_markup optional — a boolean indicating that React's renderToStaticMarkup method should be used for the rendering. Defaults to False, which causes React's renderToString method to be used.
• json_encoder optional — a class which is used to encode the JSON which is sent to the renderer. Defaults to django.core.serializers.json.DjangoJSONEncoder.

The result of rendering a component to its initial HTML. RenderedComponents can be passed directly into templates where they output the generated HTML.

# Render the component
my_component = render_component(...)

# Print the generated HTML
print(my_component)

<!-- Insert the generated HTML into your template -->
{{ my_component }}

RenderedComponents have a helper method, render_props, which outputs your 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>

mkvirtualenv react-render
pip install .
cd tests
npm install
npm run react-render &
cd ..
python runtests.py