Skip to main content

Quick Start

This is the shortest path from a Django template to a mounted React component.

1. Register a browser bundle​

Build a client bundle that registers your components with the shared runtime:

import RuntimeBridge from "react-on-rails/client";
import HelloWorld from "../components/HelloWorld";

RuntimeBridge.register({ HelloWorld });

2. Render assets in the layout​

{% load react %}
<!doctype html>
<html>
  <head>
    {% react_component_assets %}
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>

3. Render a component from a template​

{% extends "base.html" %}
{% load react %}

{% block content %}
  {% react_component "HelloWorld" props=hello_props id="hello-world-root" %}
{% endblock %}

4. Pass props from the Django view​

def homepage(request):
    return render(
        request,
        "homepage.html",
        {"hello_props": {"helloWorldData": {"name": "Ada"}}},
    )

5. Enable SSR when ready​

{% react_component "HelloWorld" props=hello_props prerender=True %}

That only requires a renderer server once you actually enable prerendering.