如何让Django和ReactJS一起工作？

Django的新手,甚至更新的ReactJS.我一直在研究AngularJS和ReactJS,但决定使用ReactJS.尽管AngularJS拥有更多的市场份额,但似乎它已经逐渐消耗了AngularJS,而且据说ReactJS的发布速度更快.

除了垃圾之外,我开始学习Udemy的课程,经过一些视频后,看看它与Django的整合程度似乎很重要.那是当我不可避免地碰到一堵墙而刚开始运行的时候,那里有什么样的文件,这样我就不会在几个小时和几个晚上转动轮子了.

pip我遇到的确没有任何全面的教程或软件包.例如,我遇到的少数人没有工作或者过时pyreact了.

我有一个想法只是将ReactJS完全分开,但要考虑我希望ReactJS组件呈现的类和ID.将单独的ReactJS组件编译成单个ES5文件后,只需将该单个文件导入Django模板.

我认为当我从Django模型渲染时会很快崩溃,尽管Django Rest Framework听起来像是涉及到它.甚至还没有看到Redux如何影响所有这些.

无论如何,任何人都有明确的方式使用Django和他们关心的ReactJS分享？

无论如何,AngularJS和Django的文档和教程都很丰富,所以很有可能只是走这条路来开始使用任何前端框架......不是最好的理由.

1> KA01..：

---

我没有使用Django的经验,但从前端到后端和前端框架到框架的概念是相同的.

React将使用您的Django REST API.前端和后端没有任何连接方式.React将向您的REST API发出HTTP请求以获取和设置数据.

在Webpack(模块捆绑器)和Babel(转换器)的帮助下,React 会将您的Javascript捆绑并转换为单个或多个文件,这些文件将放置在条目HTML页面中.学习Webpack,Babel,Javascript和React以及Redux(状态容器).我相信你不会使用Django模板,而是允许React渲染前端.

在呈现此页面时,React将使用API​​来获取数据,以便React可以呈现它.您对HTTP请求,Javascript(ES6),Promises,Middleware和React的理解至关重要.

以下是我在网络上发现的一些应该有用的信息(基于快速的Google搜索):

Django和React API Youtube教程

使用React设置Django

使用上面的粗体术语搜索其他资源.首先尝试"Django React Webpack".

希望这能引导你朝着正确的方向前进!祝好运!希望专门研究Django的其他人可以添加我的回复.

2> imolitor..：

---

我也感受到了你的痛苦,我也开始让Django和React.js一起工作.做了几个Django项目,我认为,React.js是Django的绝佳搭档.然而,开始时可能会令人生畏.我们站在巨人的肩膀上;)

这就是我的想法,它一起工作(大图,如果我错了,请有人纠正我).

Django及其数据库(我更喜欢Postgres)一方(后端)

Django Rest框架提供外部世界的接口(即移动应用程序和React等)

Reactjs,Nodejs,Webpack,Redux(或者可能是MobX？)在另一边(前端)

Django和'前端'之间的通信是通过Rest框架完成的.确保您获得了Rest框架的授权和权限.

我找到了一个很好的锅炉模板用于这个场景,它开箱即用.只需按照自述文件https://github.com/scottwoodall/django-react-template,一旦完成,你就会运行一个非常好的Django Reactjs项目.绝不是为了生产,而是为了让您深入了解事物是如何连接和工作的!

我想建议的一个微小变化是:按照设置说明但在进入第二步设置后端之前(Django在这里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框架的最新稳定版本.

我希望有所帮助.

---

一年后,我切换到VUE.js(https://vuejs.org/).我使用Django模板,它将通过Django Rest Framework与数据库通信.它快而轻(约20kb)

3> Karim N Gorj..：

---

正如其他人回答你所说,如果你正在创建一个新项目,你可以分离前端和后端,并使用任何django rest插件为你的前端应用程序创建rest api.这是理想的世界.

如果您有一个带有django模板的项目,那么您必须在要加载应用程序的页面中加载您的react 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(
  
    
  
  , 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 %}

使用django-pipeline的优势在于静态处理过程中的静态处理collectstatic.

4> IVI..：

---

任何来自后端或基于Django的角色并尝试使用ReactJS的人的注释:没有人设法在第一次尝试成功设置ReactJS环境:)

Owais Lone有一个博客,可以从http://owaislone.org/blog/webpack-plus-reactjs-and-django/获得 ; 但Webpack配置上的语法已经过时了.

我建议您按照博客中提到的步骤使用以下内容替换webpack配置文件.但是如果你是Django和React的新手,一次咀嚼一个,因为学习曲线你可能会感到沮丧.

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']
    }
};

5> 小智..：

---

第一种方法是构建单独的Django和React应用程序.Django将负责提供使用Django REST框架构建的API,React将使用Axios客户端或浏览器的fetch API来使用这些API.您需要在开发和生产中拥有两台服务器,一台用于Django(REST API),另一台用于React(用于提供静态文件).

第二种方法不同,前端和后端应用程序将耦合.基本上你将使用Django来提供React前端并公开REST API.因此,您需要将React和Webpack与Django集成,这些是您可以遵循的步骤

首先生成您的Django项目,然后在此项目目录中使用React CLI生成您的React应用程序

对于Django项目,使用pip 安装 django-webpack-loader:

pip install django-webpack-loader

接下来,将应用程序添加到已安装的应用程序并settings.py通过添加以下对象进行配置

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

然后添加一个Django模板,用于安装React应用程序,并由Django提供服务

{ % load render_bundle from webpack_loader % }



  
    
    
     This is where React will be mounted
    

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")),

]

npm install webpack-bundle-tracker --save

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

module.exports = {

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