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

IT技术 javascript django reactjs
2021-05-15 10:03:42

我只想将 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);

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

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

1个回答

我不得不处理这个确切的问题。我只需要在页面上添加一个 React 组件就可以了。大多数在线教程都推荐将 React 和 Django 解耦，这对于我正在从事的项目来说是不可行的。一种更简单的方法似乎是创建一个新应用程序来包含react组件并将其添加到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 文件，并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'));

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

{% load static %}
<div id="component-root"></div>
<script src="{% static 'react_component/bundle.js' %}"></script>
其它你可能感兴趣的问题
上一篇如何在不更改地址栏中的 URL 的情况下使用 react-router 更改组件？ 下一篇如何使用分离的后端和前端（Passport / Express / React）进行社交身份验证