在Django项目中添加React [英] Adding React inside a Django project

问题描述

我是一名Django开发人员，刚开始将React添加到我的应用程序的一页，到目前为止，我真的很喜欢它.(这是一个普通的Django应用，带有主页，关于"页面等，也是带有交互式图表的图表"页面，我想在React中构建交互式部分.)

I am a Django developer just getting started with adding React to one page of my app, and really enjoying it so far. (It's a normal Django app with a home page, an about page, etc, but also a "chart" page with an interactive chart, and I want to build the interactive part in React.)

问题是我开始使用可下载的React入门工具包，而我我不确定如何以正确的方式进行操作，并且使用Django服务我的项目会很复杂(所有教程似乎都假设您使用的是Node，而我不是).

The problem is that I've started with the downloadable React starter kit and I'm not sure how to do things the 'right' way, and it's complicated by using Django to serve my project (all the tutorials seem to assume you're using node, which I'm not).

现在，我刚在Django模板中有了它:

Right now I just have this in my Django template:

<div id="myapp"></div>
<script src="/static/js/vendor/react.js"></script>
<script src="/static/js/vendor/JSXTransform.js"></script>
<script src="/static/js/myapp.js"></script>

myapp.js 具有所有的React代码.我知道这并不是真正的成熟的现代JS处理方式.

And myapp.js has all the React code. I'm aware this isn't really the grown-up modern JS way of doing things.

现在，我想使用 React Bootstrap ，但这似乎是唯一明智的方法与 npm 一起使用.现在是时候进行切换了，但是我不确定如何执行.

Now I want to use React Bootstrap, but it seems that the only sensible way to do that is with npm. So it's time to make the switch, but I'm not completely sure how.

我从Django的 static/js 目录内部运行了 npm install react 和 npm install react-bootstrap .这创建了一个 node_modules 文件夹，其中包含各种文件.

I have run npm install react and npm install react-bootstrap from inside my static/js directory in Django. This has created a node_modules folder with various files inside.

一个困惑的新手提出了三个问题:

So three questions from a confused newbie:

1. 我应该在哪里将我的React代码与这些npm模块一起使用(我应该使用 var React = require('react')?
2. 我是否需要以某种方式(使用 webpack ?)编译此代码
3. 然后如何将其与Django集成在一起?我应该将其全部编译为 myapp.js 并将其仅包含在我的HTML模板中吗?

1. Where should I put my React code to work with these npm modules (should I use var React = require('react')?
2. Do I need to compile this code somehow (using webpack?)
3. How do I then integrate this with Django? Should I compile it all to myapp.js and just include that in my HTML template?

推荐答案

我现在也在做同样的事情-从嵌入式HTML脚本标签移到 require 领域.这是我正在关注的教程，在这里到目前为止是我的文件系统.我在Node上执行此操作，但是对于Django项目来说应该没有什么不同，因为React前端代码与除API URL之外的任何后端都是​​分离的.

I'm also doing the same thing right now - moving away from embedded HTML script tags into require land. Here is the tutorial I am following, and here is my file system so far. I am doing it in Node but it shouldn't be that different for a Django project as the React frontend code is decoupled from any backend other than API URL's.

您的 node_modules 文件夹包含 react-bootstrap .在 myapp.js 中，使用 require('react-bootstrap')加载 node_modules 文件夹中包含的库.

Your node_modules folder contains react-bootstrap. In your myapp.js, use the require('react-bootstrap') to load up the library which is contained in your node_modules folder.

1. 我应该在哪里将我的React代码与这些npm模块一起使用(我应该使用var React = require('react')吗?

您可以将代码放在任何地方.如果您的文件系统如下所示:

You can put the code anywhere. If your file system looks like this:

project/
  react/
    myapp.js
  node_modules/
    react source code
    react bootstrap stuff

然后，您可以在 myapp.js 中执行 var React = require('react'); .

Then you can just do var React = require('react'); in myapp.js.

1. 我需要以某种方式(使用webpack)编译此代码吗?

是的，我将参考我之前链接的webpack教程，它应该说明如何将所有React代码编译到单个 bundle.js 中.这里也是另一本很好的教程.该 bundle.js 文件包含您的 requires 的所有源代码.因此，如果您的 myapp.js 看起来像

Yes, I would consult the webpack tutorial I linked earlier, it should explain how to compile all your React code into a single bundle.js. Here is also another good tutorial. This bundle.js file contains all the source code of your requires. So if your myapp.js looks something like

var React = require('react');
var ReactBootstrap = require('react-bootstrap');

然后， bundle.js 现在包含所有React和react-bootstrap javascript代码以及 myapp.js 源代码.

then the bundle.js now contains all of the React and react-bootstrap javascript code, along with the myapp.js source code.

1. 然后如何将其与Django集成在一起?我应该将其全部编译为myapp.js并将其仅包含在我的HTML模板中吗?

我只完成了Nodejs的工作，但是到目前为止，我的React代码还没有涉及到任何Node代码，而且我认为它不会涉及到任何Django代码(再次，我从未做过Django，所以我可能错误的).您需要做的就是使用webpack进行编译，这会弹出 bundle.js .您将该 bundle.js 放入HTML中，它将加载 myapp.js .

I've only done work on Nodejs, but my React code so far hasn't touched any Node code, and I don't think it will touch any Django code (again I've never done Django so I might be wrong). All you need to do is compile with webpack, which spits out a bundle.js. You put that bundle.js in your HTML and it'll load up myapp.js.

这篇关于在Django项目中添加React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！