Question

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

我按照Add React to a Website教程添加了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

并且在这样的index.html文件末尾包含了React文件。

<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>

然后我运行babel --watch来预处理这样的JSX文件
npx babel --watch ./react --out-dir ./app-a/static/app-a --presets react-app
我认为它可以工作，因为每当我保存JSX组件文件时，它们都会经过预处理并输出到/app-a/static/app-a。

在根JSX文件的结尾，我将根React组件包括在DOM中。

import React, { Component } from 'react';
    ... import bunch of components

class App extends Component { ... }

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

不幸的是，当我打开网站时，在Uncaught SyntaxError: Unexpected identifier处从预处理的根React组件文件中收到错误import React, { Component } from 'react';。
如果我从导入语句中删除React（直接在预处理文件中），则会收到错误Uncaught SyntaxError: Unexpected token {
并且如果删除第一条导入行，则在下一条导入行会出现相同的意外标识符错误。
因此，我认为网络浏览器的import语句存在问题。
我认为babel应该注意将JSX文件中的所有内容转换为能够在Web浏览器上运行的JS文件。

我确定我的JSX文件是正确的，因为在将所有JSX文件复制到django项目之前，我在Create React App项目中编写了这些组件。
那么，我该怎么做才能在我的网站上添加一个React组件？

Answer 1

我不得不处理这个确切的问题。我只需要在页面上添加一个react组件即可。在线上的大多数教程都建议将React和Django分离，这对我正在从事的项目不可行。一种更简单的方法似乎涉及到创建一个包含应用程序组件的新应用，并将其添加到项目的INSTALLED_APPS中的settings.py中，以便django发现webpack生成的静态文件。

设置yarn或npm并安装一些用于编译代码的依赖项和开发依赖项。您可以使用自己选择的捆绑器，因为它最受欢迎，因此我正在使用webpack：

cd react_component (or wherever your new project is)
yarn init -y
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli
yarn add react react-dom

在您的应用目录中创建一个webpack.config.js，其中包含以下内容：

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'static_src', 'index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  output: {  
    path: path.resolve(__dirname, 'static', 'react_component'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
};

在同一目录中还有一个.babelrc：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

创建一个static_src目录来存储您的JavaScript文件，并为Webpack生成的捆绑文件创建一个static目录。

创建static_src/index.js并渲染您的根组件：

import React from 'react';  
import ReactDOM from 'react-dom';  
import Component from "./Component";  
  
ReactDOM.render(<Component/>, document.getElementById('component-root'));

，您应该很好。在npx webpack目录中运行react_component/来转换文件并生成一个bundle.js，可以将其包含在项目中的任何位置，如下所示：

{% load static %}
<div id="component-root"></div>
<script src="{% static 'react_component/bundle.js' %}"></script>

如何将React组件添加到现有的Django项目中

1 个答案: