Javascript 在简单CRUD应用程序之外构建Django/React项目（概念）
我已经用几个应用程序启动了一个Django项目，其中一个包含我的react。我想澄清一下最佳实践/专业偏好，因为它涉及到使用Django和React的全栈应用程序中的文件结构和基于url的区分视图。现在，唯一一个似乎与Django Rest API交互的js文件是App.js，但我显然想在此基础上进行扩展，并创建与我的后端交互的不同组件。我是否只从每个组件文件中的api获取数据？另外，要创建不同的视图，就像在我的index.js中一样，我为main.js加载已编译网页的静态文件。如果我想拥有不同的页面，我是否需要为每个页面视图在main.js文件中编译一个网页包 假设我想创建一个关于页面和一个主页。创建两个django应用程序，一个用作页面视图，另一个用作主页视图，这是最佳实践吗？如果没有，你有什么建议 这是我的App.jsJavascript 在简单CRUD应用程序之外构建Django/React项目（概念）,javascript,reactjs,django,file-structure,Javascript,Reactjs,Django,File Structure,我已经用几个应用程序启动了一个Django项目，其中一个包含我的react。我想澄清一下最佳实践/专业偏好，因为它涉及到使用Django和React的全栈应用程序中的文件结构和基于url的区分视图。现在，唯一一个似乎与Django Rest API交互的js文件是App.js，但我显然想在此基础上进行扩展，并创建与我的后端交互的不同组件。我是否只从每个组件文件中的api获取数据？另外，要创建不同的视图，就像在我的index.js中一样，我为main.js加载已编译网页的静态文件。如果我想拥有不同
import React, { Component } from "react";
import { render } from "react-dom";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
loaded: false,
placeholder: "Loading"
};
}
componentDidMount() {
fetch("api/lead")
.then(response => {
if (response.status > 400) {
return this.setState(() => {
return { placeholder: "Something went wrong!" };
});
}
return response.json();
})
.then(data => {
this.setState(() => {
return {
data,
loaded: true
};
});
});
}
render() {
return (
<ul>
{this.state.data.map(contact => {
return (
<li key={contact.id}>
{contact.name} - {contact.email}
<h1>Hi</h1>
</li>
);
})}
</ul>
);
}
}
export default App;
const container = document.getElementById("app");
render(<App />, container);
import React，{Component}来自“React”；
从“react dom”导入{render}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
加载：false，
占位符：“加载”
};
}
componentDidMount（）{
获取（“api/潜在客户”）
。然后（响应=>{
如果（response.status>400）{
返回此.setState（（）=>{
返回{占位符：“出了问题！”}；
});
}
返回response.json（）；
})
。然后（数据=>{
此.setState（（）=>{
返回{
数据，
加载：正确
};
});
});
}
render（）{
返回(
{this.state.data.map（contact=>{
返回(
-
{contact.name}-{contact.email}
你好
);
})}
);
}
}
导出默认应用程序；
const container=document.getElementById（“应用”）；
渲染（，容器）；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django REST with React</title>
</head>
<body>
<div id="app">
<!-- React will load here -->
</div>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>
Django休息与反应
{%load static%}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Django REST with React</title>
</head>
<body>
<div id="app">
<!-- React will load here -->
</div>
</body>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
</html>
Django休息与反应
{%load static%}