首页 文章

如何让Django和ReactJS一起工作？

提问于
浏览 次
83

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的文档和教程都很丰富，所以很有可能只是走这条路来开始使用任何前端框架......不是最好的理由 .

django reactjs

5 回答

  • 90

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

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

    • 在 Webpack (module bundler) & Babel (transpiler) 的帮助下，React会将您的Javascript捆绑并转换为单个或多个文件，这些文件将放在条目HTML页面中 . Learn Webpack, Babel, Javascript and React and Redux (a state container) . 我相信你不会使用Django模板，而是允许React渲染前端 .

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

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

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

    回复于
  • 28

    我也感受到了你的痛苦，我也开始让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 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框架的最新稳定版本 .

    我希望有所帮助 .

    回复于
  • 16

    正如其他人回答你所说，如果你正在创建一个新项目，你可以分离前端和后端，并使用任何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(
  <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 期间处理静态 .

    回复于
  • 7

    第一种方法是构建单独的Django和React应用程序 . Django将负责提供使用Django REST框架构建的API，React将使用Axios客户端或浏览器的fetch API来使用这些API . You'll need to have two servers, both in development and production, one for Django(REST API) and the other for React (to serve static files) .

    第二种方法是不同的 the frontend and backend apps will be coupled . 基本上你需要将React和Webpack与Django集成，这些是你可以遵循的步骤

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

    对于Django项目安装 django-webpack-loader 与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模板，用于安装React应用程序，并由Django提供服务

    { % 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服务器，您将收到Django错误，指出 webpack-stats.json 不存在 . 接下来你需要让你的React应用程序能够生成stats文件 .

    继续在您的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'}),
    ]
}

    这将BundleTracker插件添加到Webpack并指示它在父文件夹中生成 webpack-stats.json .

    确保在 config/webpack.config.prod.js 中也进行相同的 生产环境 .

    现在，如果重新运行React服务器，将生成 webpack-stats.json ，Django将能够使用它来查找有关React dev服务器生成的Webpack包的信息 .

    还有其他一些事情要做 . 您可以在tutorial找到更多信息 .

    回复于
  • 7

    任何来自后端或基于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']
    }
};
    回复于

相关问题