Javascript 如何向现有Django项目添加React组件_Javascript_Django_Reactjs

Javascript 如何向现有Django项目添加React组件

javascript django reactjs

Javascript 如何向现有Django项目添加React组件,javascript,django,reactjs,Javascript,Django,Reactjs,我想将just React组件添加到Django的模板html文件中（不是用React作为前端替换整个模板，因为internet上有很多教程，只是网站的某些部分），因为网站的这部分需要高交互性，这更容易在React中编写我按照教程添加了JSX预处理器。我是这样做的 /app-a /static /app-a <-- preprocessed files are here /templates /app-a inde

我想将just React组件添加到Django的模板html文件中（不是用React作为前端替换整个模板，因为internet上有很多教程，只是网站的某些部分），因为网站的这部分需要高交互性，这更容易在React中编写

我按照教程添加了JSX预处理器。我是这样做的

/app-a
    /static
        /app-a  <-- preprocessed files are here
    /templates
        /app-a
            index.html  <-- Django template file that I want to include a react component to
/app-b
/react  <-- this is where I wrote JSX files
manage.py
package.json

<html>
    <body>
        <div id="formContainer">
        </div>
        <!-- React -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <!-- my root React component file -->
        <script src="{% static 'app-a/App.js' %}"></script>

    </body>

不幸的是，当我打开网站时，我从'React'中得到了错误

uncaughtsyntaxerror:Unexpected identifier

importreact，{Component}来自预处理的根组件文件。

若我从import语句（直接在预处理文件中）删除React
，我会得到错误uncaughtsyntaxerror:Unexpected-token{


如果删除第一个导入行，则在下一个导入行中会出现相同的意外标识符错误。

因此，我认为web浏览器的import
语句有问题。

我认为babel应该负责将JSX文件中的所有内容转换为能够在web浏览器上运行的JS文件
我确信我的JSX文件是正确的，因为在将所有JSX文件复制到django项目之前，我在Create React App项目中编写了这些组件。

那么，我应该怎么做才能在我的网站上添加React组件呢？
我必须解决这个问题。我只需要在页面上添加React组件，其他什么都不需要。大多数在线教程建议将React和Django分离，这对于我正在进行的项目来说是不可行的。更简单的方法似乎包括创建React组件一个包含react组件的新应用程序，并将其添加到项目的settings.py
中的INSTALLED_APPS
，以便django发现由webpack生成的静态文件
安装Thread或npm，并安装传输代码所需的一些依赖项和开发依赖项。您可以使用您选择的捆绑程序，我使用webpack，因为它是最流行的：
cd react\u组件（或新项目所在的位置）
纱线初始-y
纱线添加-D@babel/core@babel/preset env@babel/preset react babel loader网页包cli
纱线添加反应性dom

在应用程序目录中创建一个包含以下内容的webpack.config.js
：
const path=require（'path'）；
module.exports={
条目：path.resolve（uu dirname，'static_src'，'index.js'），
模块：{
规则：[
{
测试：/\（js|jsx）$/，
排除：/node_模块/，
用法：['babel-loader']，
},
],
},
输出：{
path:path.resolve（_dirname，'static'，'react_component'），
文件名：“bundle.js”，
},
决心：{
扩展：['*'、'.js'、'.jsx']，
},
};

和同一目录中的.babelrc
：
{
“预设”：[
“@babel/preset env”，
“@babel/预设反应”
]
}

创建一个static\u src
目录来存储JavaScript文件，并为Web包生成的捆绑文件创建一个static
目录
创建static\u src/index.js
并呈现根组件：
从“React”导入React；
从“react dom”导入react dom；
从“/Component”导入组件；
render（，document.getElementById（'component-root'）；

您应该准备好了。在react\u component/
目录中运行npx webpack
，以传输您的文件并生成一个bundle.js
，您可以将其包含在项目中的任何位置，如下所示：
{%load static%}
Babel将ES6转换为ES5语法，但要解决导入问题，您需要一个像webpack这样的捆绑程序，这可能会有所帮助。您的解决方案适合我。谢谢
import React, { Component } from 'react';
    ... import bunch of components

class App extends Component { ... }

const formContainer = document.querySelector('#formContainer');
ReactDOM.render(App, formContainer);