Django 项目不渲染 React.js答案

【问题标题】：Django project not rendering React.jsDjango 项目不渲染 React.js
【发布时间】：2021-05-20 20:37:50
【问题描述】：

在我的项目中，我试图将 Django 和 React 结合在一起。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" /> {% load static %}
    <link rel="icon" href="{% static 'logofavicon.ico' %}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta property="og:image" content="{% static 'Banner.png' %}">
    <meta name="description" content="The future of digital content" />
    <link rel="apple-touch-icon" href="{% static 'logo192.png' %}" />
    <link rel="manifest" href="{% static 'manifest.json' %}" />
    <title>Drop Party</title>
</head>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="{% static 'index.js' %}"></script>
    <div id="root"></div>
</body>

</html>

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./styleguide.css";
import "./globals.css";

ReactDOM.render( <
    React.StrictMode >
    <
    App / >
    <
    /React.StrictMode>,
    document.getElementById("root")
);

reportWebVitals();

settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/frontend/'

STATICFILES_DIRS = (
    FRONTEND_DIR / 'build', FRONTEND_DIR / 'src', FRONTEND_DIR / 'public'
)

项目层次结构

我查看了this post，并确认此解决方案不适用于我。

我认为主要问题是 Django 提供 html，但不运行 .js，所以我不确定该去哪里。

我还确认图像链接也正常工作，所以我没有收到 404 错误或类似的错误。

次要的，半相关的问题：我应该像这样链接网站图标吗？我觉得我不应该静态地提供 html，但是除了静态地提供 html 之外，我无法找到如何准确地为项目提供服务。

（编辑）我已经像在 cmets 中一样在脚本中添加了，但现在我收到一个错误，Django 似乎拒绝了 React 标签。

【问题讨论】：

标签： javascript html reactjs django react-native

【解决方案1】：

在public 文件夹中获取index.js。

在body标签后面添加下面一行，

<script src="index.js"></script>

【讨论】：

我试过这个，但我得到了错误：Uncaught SyntaxError: Cannot use import statement outside a module
我已经修复了脚本问题，但现在 Django 无法识别反应标签。我在 React.strictmode 行上收到 Uncaught SyntaxError: Unexpected token '

【解决方案2】：

您的 HTML 文件没有 index.js 的 <script> 标记（尽管有趣的是，它确实有一个 <noscript>）。

你需要告诉你的页面你想要运行的每个 JS 文件，你可以使用<script>标签来做到这一点。

请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script 了解更多信息。

【讨论】：

我试过这个，但我得到了错误：Uncaught SyntaxError: Cannot use import statement outside a module
我已经修复了脚本问题，但现在 Django 无法识别反应标签。我在 React.strictmode 行收到 Uncaught SyntaxError: Unexpected token '
如果你有一个新的（真正的）问题，你应该问一个新的 Stack Overflow 问题，但简短的回答是你不能像使用 Javascript 一样使用 React 的 JSX 语言，所以这个错误说“< 不是 Javascript 中的合法字符”。你需要使用 React 提供的工具：reactjs.org/docs/create-a-new-react-app.html