如何在Django读取的单独的静态js文件中获得react组件?要使它工作最少需要安装什么?

Question

需要做哪些修改?和/或什么是最不需要安装的工作?

首先，在静态的reactclasses.js文件中该文件仅包含此内容。(还有什么需要补充的吗?)

class Login extends React.Component {
render() {
return (
<div id="login">
<form action="/login" method="POST">
<input type="text" name="username" placeholder="Username" required/>
<input type="password" name="password" placeholder="Password" required/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}

在html文件中

<!--- in the head tag --->
<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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="{% static 'reactclasses.js' %}" type="text/babel"></script>
<!--- in a script tag with type=text/babel in the body tag -->
ReactDOM.render(<login />, document.querySelector("thediv"));

控制台错误图像

Answer 1

我早就知道了。

这里是如何做到这一点的详细方案
https://dev.to/zachtylr21/how-to-serve-a-react-single-page-app-with-django-1a1l

和
React组件在JS文件——ReactDOM在脚本中使用在HTML文件