web-dev-qa-db-ja.com

Django-実際の使用法でのReactJS

私はReactを少しいじっていましたが、とても気に入っています。Angular（ng-repeat with | filter is priceless）よりも冗長です。 。

私を悩ませているのは、React with Django templates。すべてのjavascriptをテンプレートに入れて、 「HTML」マークアップ。

Angular=の実装は非常にシームレスでした。テンプレート/ Djangoフォームクラスにいくつかの属性を追加し、javascriptを個別のファイルに記述しました。そのファイルをインクルードして完了です。

反応を「使用」する方法は？正しい方法は何ですか？

前もって感謝します！

djangoangularjsreactjs
75
n1_

Reactテンプレートと一緒にDjangoを使用したいので、Reactコードは特定の部分にのみ影響を与えると思いますページ。以下の説明は、その仮定に基づいて書かれています。

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

別個のJSベースのビルドプロセスを作成できます Webpackを使用 （ このハウツーを確認してください ）。これにより、クライアント側のコードの機能が強化され、ブラウザーでCommonJSモジュールを使用できるようになります。これは、 React など、npmから直接プルできます。

次に、Webpackはバンドルを生成します（または、アプリケーションの性質とWebpack構成に応じて複数のバンドル）。これは、通常どおり<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. 個別のJSファイルにReactコードを記述します
  2. Webpack（CommonJSモジュールを活用）を使用してReactコードをバンドルします
  3. Djangoテンプレートにバンドルを含めます
  4. Reactテンプレートのグルーコードを使用してDjangoコードをレンダリングします
83
julen

フロントエンドとバックエンドを2つの異なる独立したエンティティと見なすとどうなりますか？私は次のことを意味します：

  1. DjangoはAPIのみであり、jsonデータで応答する必要があります
  2. フロントエンドは、nginx によって提供される静的ファイルのみである必要があります
  3. 2つの間の通信を許可するには、 [〜＃〜] cors [〜＃〜] を処理する必要がある場合があります。 1つのオプションはフロントエンドからのプリフライトリクエストを許可することであり、もう1つのオプションはnginxプロキシをセットアップすることです。これは別の問題であり、詳細が必要な場合は検索する必要があります。

このアーキテクチャを使用すると、統合を処理せずに、物事を分離しておくことができます。フロントエンド/ Reactエコシステムでは既に複雑になっているため、構成の単純さを考慮する必要があります。

また、展開プロセスがこのアーキテクチャをどのように探すか（どのツールを使用するのか）を知りたいので、提案がある場合はコメントを追加してください。今後の読者に役立つ情報を提供するために応答を更新します。

9
Tiberiu Maxim

あなたが求めているものに似たものを実装しました。私のフロントエンドはすべてwebpackを使用してコンパイルされたreactjsにあり、テンプレートはDjangoで作成されます。

だから私は次のことをします：

  1. React-routerを使用し、reactして.jsx/.jsコードを作成します。
  2. Webpackを使用してコンパイルします。
  3. Django-webpack を使用します

だからDjango-webpackは本当にすてきに動作し、Django=の外でコンパイルを分離するのに役立ちます。

4
Harkirat Saluja