时间戳

首页 > 解决方案 > 如何将 React 组件添加到现有的 Django 项目

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

问题描述

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

我按照将 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

并在 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 组件添加到我的网站？

标签： javascriptdjangoreactjs

解决方案

我不得不处理这个确切的问题。我只需要向页面添加一个反应组件即可。大多数在线教程都建议将 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 文件，以及一个staticwebpack 生成的捆绑文件的目录。

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

推荐阅读