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

【问题标题】：How to add React components to existing Django project如何将 React 组件添加到现有的 Django 项目
【发布时间】：2018-12-29 08:37:12
【问题描述】：

我只想将 React 组件添加到 Django 的模板 html 文件中（不要将整个模板替换为 React 作为前端，因为互联网上有很多教程，只是网站的某些部分），因为网站的那部分需要高交互性，即更容易用 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);

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

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

【问题讨论】：

Babel 将 ES6 转换为 ES5 语法，但要解析导入，您需要像 webpack 这样的打包器
medium.com/uva-mobile-devhub/… 这可能会有所帮助。

标签： javascript django reactjs

【解决方案1】：

我不得不处理这个确切的问题。我只需要向页面添加一个反应组件即可。大多数在线教程都建议将 React 和 Django 解耦，这对于我正在从事的项目来说是不可行的。一种更简单的方法似乎是创建一个包含反应组件的新应用程序，并将其添加到项目的settings.py 中的INSTALLED_APPS，以便 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 文件，并创建一个 static 目录来存储 webpack 生成的捆绑文件。

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

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

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

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

【讨论】：