Django 项目未呈现 React.js

Question

In my project, I am trying to tie together Django and React.在我的项目中，我试图将 Django 和 React 结合在一起。

index.html索引.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 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设置.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'
)

Project Hierarchy项目层次结构

I have looked at this post , and confirmed that this solution is not applicable for me.我查看了这篇文章，并确认此解决方案不适用于我。

The primary issue, I think, is that Django is serving the html, but not running the.js, so I'm unsure of where to go with this.我认为主要问题是 Django 正在为 html 提供服务，但没有运行.js，所以我不确定 go 的位置。

I have also confirmed that the image linking is working as well, so I'm not getting 404 errors or anything like that.我还确认图像链接也正常工作，所以我没有收到 404 错误或类似的错误。

Secondary, semi-related question: Should I be linking the favicons like this?次要的半相关问题：我应该像这样链接网站图标吗？ I get the feeling I shouldn't be serving the html statically, but I was unable to find how exactly to serve the project, other than serving the html statically.我觉得我不应该静态地为 html 服务，但除了静态地为 html 服务之外，我无法找到如何准确地服务于该项目。

(edit) I have added in the script as in comments, but now I get an error where Django seems to reject the React tags. （编辑）我在脚本中添加了注释，但现在我收到一个错误，Django 似乎拒绝了 React 标签。

Answer 1

Get index.js in the public folder.在public文件夹中获取index.js 。

Add the line below after body tag,在body标签之后添加下面的行，

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

Answer 2

Your HTML file has no <script> tag for your index.js (although, interestingly, it does have a <noscript> ).您的 HTML 文件没有您的index.js的<script>标记（尽管有趣的是，它确实有一个<noscript> ）。

You need to tell your page about every JS file you want to run, which you do by using <script> tags.您需要告诉您的页面您要运行的每个 JS 文件，您可以使用<script>标签来执行此操作。

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for more info.有关更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script 。

Django 项目未呈现 React.js

问题描述

2 个解决方案

解决方案1
2 2021-05-20 21:44:13

解决方案2
1 已采纳 2021-05-20 21:31:00

Django 项目未呈现 React.js

问题描述

2 个解决方案

解决方案1 2 2021-05-20 21:44:13

解决方案2 1 已采纳 2021-05-20 21:31:00

解决方案1
2 2021-05-20 21:44:13

解决方案2
1 已采纳 2021-05-20 21:31:00