web-dev-qa-db-ja.com

DjangoとReactJSを連携させるにはどうすればいいですか？

Djangoの新機能、そしてReactJSの新機能。私はAngular JSとReactJSを検討してきましたが、ReactJSに決めました。 AngularJSの方が市場シェアが高いにもかかわらず、AngularJSは人気の点では限界があり、ReactJSの方が早く入手できると言われています。

それだけではありませんが、Udemyのコースを受講し始めました。いくつかのビデオを見て、Djangoとどの程度うまく統合されているかを確認することが重要と思われました。それは私がどうしてもそれを立ち上げて実行するだけの壁にぶつかったとき、私は数時間と夜の間私の車輪を回さないようにどんな種類のドキュメンテーションがそこにあるかということです。

私が遭遇した、包括的なチュートリアルやpipパッケージは本当にありません。私が遭遇した数少ないものはうまく動かなかったか日付が付きませんでした、例えばpyreact。

ReactJSコンポーネントをレンダリングするクラスとIDを考慮しながら、ReactJSを完全に別々に扱うことだけを考えていました。別々のReactJSコンポーネントを単一のES5ファイルにコンパイルしたら、その単一ファイルをDjangoにインポートします。テンプレート。

Django Rest Frameworkは関係しているように思えますが、Djangoモデルからレンダリングするとすぐにうまくいくと思います。 Reduxがこれらすべてにどのような影響を与えるかを見るにはそれほど遠くありません。

とにかく、誰もが彼らが共有したいDjangoとReactJSを使っているという明確な方法を持っていますか？

いずれにしても、ドキュメントとチュートリアルはAngularJSとDjangoのために豊富にあるので、フロントエンドフレームワークを始めるためにその道を進むのは魅力的です...最良の理由ではありません。

djangoreactjs
106
sockpuppet

私はDjangoの経験がありませんが、フロントエンドからバックエンド、そしてフロントエンドフレームワークからフレームワークまでの概念は同じです。

  1. Reactはあなたの Django REST AP​​Iを消費します。フロントエンドとバックエンドは決して接続されていません。 Reactはデータを取得して設定するためにあなたのREST AP​​IにHTTPリクエストを行います。
  2. Webpack（module bundler）＆Babel（transpiler） の助けを借りて、ReactはあなたのJavascriptをエントリーHTMLページに置かれる単一または複数のファイルにバンドルして翻訳します。 Webpack、Babel、Javascript、およびReactおよびRedux（状態コンテナ）を学んでください 。私は 信じて あなたはDjangoのテンプレートを使うことはしませんが、代わりにReactがフロントエンドをレンダリングできるようにします。
  3. このページがレンダリングされると、Reactはそれをレンダリングできるようにデータを取得するためにAPIを消費します。 HTTPリクエスト、Javascript（ES6）、Promise、ミドルウェア、React についてのあなたの理解はここでは不可欠です。

これが私がウェブ上で見つけたいくつかのことです すべきです （簡単なGoogle検索に基づいて）助けになる：

これが正しい方向に進むことを願っています！がんばろう！うまくいけば、Djangoを専門とする人が私の回答に追加できることを願います。

108
KA01

私もDjangoとReact.jsを連携させようとしているので、私はあなたの痛みを感じます。 Djangoプロジェクトをいくつかやった、と私は思う、React.jsはDjangoにぴったりだ。しかし、始めるのは恐ろしいことです。私たちはここで巨人の肩の上に立っています;）

これが私が考える方法です、それはすべて一緒に働きます（全体像、私が間違っているならば誰かが私を直してください）。

  • Djangoとそのデータベース（私はPostgresが好きです）の一方の側（バックエンド）
  • 外界へのインターフェースを提供するDjango Restフレームワーク（例：モバイルアプリやReactなど）
  • 反対側のReactjs、Nodejs、Webpack、Redux（またはおそらくMobX？）（フロントエンド）

Djangoと 'フロントエンド'の間の通信はRestフレームワークを介して行われます。 Restフレームワークに対する権限と許可が適切に設定されていることを確認してください。

私はまさにこのシナリオのための良いボイラーテンプレートを見つけました、そしてそれは箱から出してうまくいきます。 readme https://github.com/scottwoodall/Django-react-template に従ってください。そして、作業が終わったら、かなり素晴らしいDjango Reactjプロジェクトが実行されています。これは本番用ではありませんが、むしろあなたが掘り下げて物事がどのように関連して機能しているかを見るための手段としてのものです。

2つ目のステップにたどり着く前に、セットアップの指示に従ってください（Django here https://github.com/scottwoodall/Django-react-template/blob）。 /master/backend/README.md ）、セットアップ用の要件ファイルを変更します。

プロジェクト内の/backend/requirements/common.pipにファイルがあります。その内容をこれで置き換えてください。

appdirs==1.4.0
Django==1.10.5
Django-autofixture==0.12.0
Django-extensions==1.6.1
Django-filter==1.0.1
djangorestframework==3.5.3
psycopg2==2.6.1

これでDjangoとそのRestフレームワークの最新の安定版が手に入ります。

それが役立つことを願っています。

31
imolitor

他の人があなたに答えたように、もしあなたが新しいプロジェクトを作成しているなら、あなたはフロントエンドとバックエンドを分離し、あなたのフロントエンドアプリケーションのためのrest apiを作成するためにDjangoレストプラグインを使用できます。これは理想的な世界です。

Djangoテンプレートが既に配置されているプロジェクトがある場合は、アプリケーションをロードしたいページに反応DOMレンダリングをロードする必要があります。私の場合、すでに Django-pipeline を持っていて、browserify拡張を追加しました。 （ https://github.com/j0hnsmith/Django-pipeline-browserify ）

例のように、Django-pipelineを使ってアプリをロードしました。

PIPELINE = {
    # ...
    'javascript':{
        'browserify': {
            'source_filenames' : (
                'js/entry-point.browserify.js',
            ),
            'output_filename': 'js/entry-point.js',
        },
    }
}

あなたの " entry-point.browserify.js "はあなたの反応アプリケーションをテンプレートにロードするES6ファイルにすることができます。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app.js';
import "babel-polyfill";

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise';
import reducers from './reducers/index.js';

const createStoreWithMiddleware = applyMiddleware(
  promise
)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App/>
  </Provider>
  , document.getElementById('my-react-app')
);

Djangoテンプレートでは、アプリを簡単に読み込むことができます。

{% load pipeline %}

{% comment %} 
`browserify` is a PIPELINE key setup in the settings for Django 
 pipeline. See the example above
{% endcomment %}

{% javascript 'browserify' %}

{% comment %} 
the app will be loaded here thanks to the entry point you created 
in PIPELINE settings. The key is the `entry-point.browserify.js` 
responsable to inject with ReactDOM.render() you react app in the div 
below
{% endcomment %}
<div id="my-react-app"></div>

Django-pipelineを使う利点は、静的変数がcollectstaticの間に処理されることです。

16
Karim N Gorjux

最初のアプローチは、個別のDjangoアプリとReactアプリを構築することです。 Djangoは、Django RESTフレームワークを使用して構築されたAPIを提供し、Reactは、AxiosクライアントまたはブラウザのAPIを取得します。 開発用と本番用の2つのサーバーが必要です。1つはDjango（REST API）用で、もう1つはReact用です（静的ファイルを提供するため）。

2番目のアプローチは異なります、フロントエンドアプリとバックエンドアプリは結合されます。基本的に、Djangoを使用してReactフロントエンドを提供し、REST AP​​Iを公開します。したがって、ReactとWebpackをDjangoと統合する必要があります。これらは、それを行うために実行できる手順です。

最初にDjangoプロジェクトを生成し、次にこのプロジェクトディレクトリ内でReact CLIを使用してReactアプリケーションを生成します

Django project installDjango-webpack-loaderwith pip：

pip install Django-webpack-loader

次に、インストールしたアプリにアプリを追加し、次のオブジェクトを追加してsettings.pyで設定します

WEBPACK_LOADER = {
    'DEFAULT': {
            'BUNDLE_DIR_NAME': '',
            'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        }
}

次に、Djangoアプリケーションのマウントに使用され、Djangoによって提供されるReactテンプレートを追加します

{ % load render_bundle from webpack_loader % }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Django + React </title>
  </head>
  <body>
    <div id="root">
     This is where React will be mounted
    </div>
    { % render_bundle 'main' % }
  </body>
</html>

次に、このテンプレートを提供するurls.pyにURLを追加します

from Django.conf.urls import url
from Django.contrib import admin
from Django.views.generic import TemplateView

urlpatterns = [

    url(r'^', TemplateView.as_view(template_name="main.html")),

]

この時点でDjangoサーバーとReactサーバーの両方を起動すると、webpack-stats.jsonが存在しないというDjangoエラーが発生します。そのため、次にReactアプリケーションで統計ファイルを生成できるようにする必要があります。

先に進み、Reactアプリ内を移動してからwebpack-bundle-trackerをインストールします

npm install webpack-bundle-tracker --save

次に、Webpack構成をイジェクトし、config/webpack.config.dev.jsに移動してから追加します

var BundleTracker  = require('webpack-bundle-tracker');
//...

module.exports = {

    plugins: [
          new BundleTracker({path: "../", filename: 'webpack-stats.json'}),
    ]
}

これにより、WebpackにBundleTrackerプラグインが追加され、親フォルダーにwebpack-stats.jsonを生成するよう指示されます。

本番用のconfig/webpack.config.prod.jsでも同じことを確認してください。

Reactサーバーを再実行すると、webpack-stats.jsonが生成され、Djangoがそれを消費して、React devサーバー。

他にもいくつかあります。詳細については、この tutorial を参照してください。

10
Ahmed Bouchefra

バックエンドやDjangoベースのロールから来て、ReactJSで作業しようとしている人へのメモ：最初の試みでReactJS環境をうまく設定することに成功した人はいません。

http://owaislone.org/blog/webpack-plus-reactjs-and-Django/ から入手可能なOwais Loneからのブログがあります。しかしWebpack設定の構文は時代遅れです。

ブログに記載されている手順に従って、Webpack設定ファイルを以下の内容に置き換えてください。ただし、DjangoとReactの両方に慣れていない場合は、学習曲線のために一度に1つずつ噛んでください。

var path = require('path');
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    context: __dirname,
    entry: './static/assets/js/index',
    output: {
        path: path.resolve('./static/assets/bundles/'),
        filename: '[name]-[hash].js'
    },
    plugins: [
        new BundleTracker({filename: './webpack-stats.json'})
    ],

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },


  resolve: {
        modules: ['node_modules', 'bower_components'],
        extensions: ['.js', '.jsx']
    }
};
8
IVI

次のチュートリアルを試すことができます。前進するのに役立ちます。

ReactとDjangoを一緒に配信

0
Taohidul Islam

受け入れられた答えは、DjangoバックエンドとReactフロントエンドを分離することが、何があっても正しい方法であると信じるようになりました。実際、ReactとDjangoを組み合わせたアプローチがあり、特定の状況により適しています。

このチュートリアル これについてよく説明しています。特に：

次のパターンが見られます（ほとんどすべてのWebフレームワークに共通です）。

-独自の「フロントエンド」で反応するDjangoアプリ：単一のHTMLテンプレートをロードし、Reactでフロントエンドを管理します（難易度：中）

-Django RESTスタンドアロンAPI + ReactスタンドアロンSPA（難易度：ハード、認証にJWTが必要）

-Mix and match：mini Reactアプリ内のDjangoテンプレート（難易度：シンプル）

0
Rexcirus