ReactJSとDjangoの組み合わせ - 実際の使用例

質問

私はReactを少しいじっていました、そして、私はそれをかなり好きです。それはAngularよりもはるかに冗長です（ng-repeat with | filterは貴重です）、しかし大丈夫です。

私を悩ませているのは、DjangoテンプレートでどのようにReactを使うかです。すべての javascript を "HTML" マークアップと一緒にテンプレートに入れるべきなのでしょうか。

Angularの実装は非常にシームレスでした。テンプレート/jjangoフォームクラスにいくつかの属性を入れ、そしてjavascriptを分離したファイルに書きました。そのファイルをインクルードすれば完了です。

reactはどのように使うのですか？正しい方法は何ですか？

ありがとうございます。

どのように解決するのですか？

Django テンプレートと一緒に React を使いたいので、React のコードがページの特定の部分にしか影響しないことを想定しています。以下の説明は、その前提で書かれています。

まず第一に、全ての JS コードをテンプレートに入れる必要はありません - 実際、それは混乱するでしょう。

JSベースのビルドプロセスを別に作成することができます。 Webpackを使用して ( このHowtoをチェックする ). これにより、クライアントサイドのコードの機能が強化され、ブラウザで CommonJS モジュールを使用できるようになり、npm から直接引き出すことができます。 React .

Webpack は順番にバンドル (アプリケーションの性質と Webpack の設定によっては複数のバンドル) を生成するので、Django テンプレートに <script> タグで Django テンプレートに含める必要があります。

ここで React.render() を呼び出して、既存のページレイアウトのどこかに React アプリケーションをレンダリングする必要があります。アプリケーションのマウントポイントとして、特定の id/class 名を持つ空の HTML 要素を使用する必要があります。

しかし、ここで注意点があります: ブラウザや Django テンプレートから CommonJS モジュールに直接アクセスすることはできません。ですから、どちらか一方が

• を公開する React と自分のアプリを window オブジェクトを作成するか、あるいは
• アプリの初期化を処理するためのグルーコードを持つモジュールを作成し、そのメソッドを window オブジェクトに公開します。

いずれの場合も、テンプレートから直接初期化コードを呼び出す必要があります (チェックアウトは グルーコードの例 を、そして アプリの初期化を呼び出す ).

この初期化ステップでは、Django テンプレートで利用可能な変数を JS コードに渡すこともできます。

最終的な Django テンプレートはこのようなものになります。

{% load staticfiles %}
{% extends 'base.html' %}

{% block scripts %}
<script type="text/javascript" src="{% static 'path/to/app.bundle.js' %}"></script>
<script type="text/javascript">
  // Initialization glue code
  window.MyApp.init({el: '.app-mountpoint'});
</script>
{% endblock %}

{% block content %}
<!-- Your template contents -->

<!-- The mount point of your app -->
<div class="app-mountpoint" />
{% endblock %}

そして、グルーのコード。

var React = require('react');

var MyAppComponent = require('MyAppComponent');


window.MyApp = {

  init: function (opts) {
    var mountPoint = document.querySelector(opts.el);

    React.render(<MyAppComponent />, mountPoint);
  }

};

このすべてが最初は圧倒されるように聞こえるかもしれませんが（Angularで行ったいくつかのステップと比べるとなおさら）、長い目で見れば報われると信じています。

というわけで、まとめます。

1. Reactのコードは別のJSファイルに書く
2. Webpack (CommonJS モジュールの活用) を使って React コードをバンドルする。
3. Django テンプレートにバンドルをインクルードします。
4. Django テンプレートでグルーコードを使用して React コードをレンダリングします。