模拟数据
如果您返回到我们的 API 端点，则可以在以下位置的浏览器中看到原始 JSON：http://127.0.0.1:8000/api/?format=json
[ { "id":1, "title":"1st todo", "body":"Learn Django properly." }, { "id":2, "title":"Second item", "body":"Learn Python." }, { "id":3, "title":"Learn HTTP", "body":"It's important." } ]
每当向 API 端点发出 GET 请求时，就会返回此值。 最终，我们将直接使用该 API ，但是一个好的初始步骤是首先模拟数据，然后配置我们的 API 调用。
我们需要在 React 应用程序中更新的唯一文件是 src/App.js。 首先，在一个名为 list 的变量中模拟 API 数据，该变量实际上是一个具有三个值的数组。
// src/App.js import react, { Component } from 'react'; const list = [ { "id":1, "title":"1st todo", "body":"Learn Django properly." }, { "id":2, "title":"Second item", "body":"Learn Python." }, { "id":3, "title":"Learn HTTP", "body": "It's important." } ]
接下来，我们将列表加载到组件的状态，然后使用 JavaScript 数组方法 map() 显示所有项目。
我故意在这里快速移动，如果您以前从未使用过 React，请复制代码，以便您了解如何将 React 前端连接到我们的 Django 后端。
这是现在包含在 src/App.js 文件中的完整代码。
// SRC/App.js import React, { Component } from 'react'; const list = [ { "id":1, "title":"1st todo", "body":"Learn Django properly." }, { "id":2, "title":"second item", "body":"Learn Python." }, { "id":3, "title":"Learn HTTP", "body":"It's important." } ] class App extends Component { constructor(props) { super(props); this.state = { list }; } render(){ return ( <div> {this.state.list.map(item => ( <div key={item.id}> <h1>{item.title}</h1> <p>{item.body}</p> </div> ))} </div> ); } } export default App;
我们已将列表加载到 App 组件的状态中，然后使用地图在列表中的每个项目上循环显示每个项目的标题和正文。 我们还添加了 id 作为密钥，这是 React 特定的要求； Django 自动为我们将 id 添加到每个数据库字段中。现在，您应该在主页上的 http://localhost:3000/上看到我们的待办事项，而无需刷新页面。
注意：如果您使用 React，运行
npm start, 可能会在某些时候看到错误消息sh：react-scripts：command not found。 不要惊慌。 这是 JavaScript 开发中非常普遍的问题。 该修补程序通常是运行npm install，然后尝试再次启动 npm。 如果那不起作用，则删除您的 node_modules 文件夹并运行npm install。 那可以 99％ 的时间解决问题。 欢迎使用现代 JavaScript 开发:)。
Django REST Framework + React
现在，让我们真正使用 Todo API，而不是使用 list 变量中的模拟数据。 在另一个命令行控制台中，我们的 Django 服务器正在运行，并且我们知道列出所有待办事项的 API 端点位于http://127.0.0.1:8000/api/。 因此，我们需要向它发出 GET 请求。
发出 HTTP 请求的两种流行方法是：使用内置的 Fetch API 或 axios ，它具有一些附加功能。 在此示例中，我们将使用 axios。 使用 Control + c 停止当前在命令行上运行的 React 应用。 然后安装 axios。
$ npm install axios
过去，开发人员会在 npm 命令中添加 --save 标志，以将依赖项保存在 package.json 文件中。 结果，您经常会看到上述命令写为 npm install axios --save。 但是，npm 的最新版本默认情况下使用 –save ，因此不再需要显式添加 --save 标志。
使用 npm start 重新启动 React 应用。
$ npm start
然后在 App.js 文件顶部的文本编辑器中，导入 Axios 。
// src/App.js import React, { Component } from 'react'; import axios from 'axios'; // new ...
剩下两个步骤。 首先，我们将 axios 用于 GET 请求。 为此，我们可以创建专用的 getTodos 函数。
其次，我们要确保在 React 生命周期中的正确时间发出此 API 调用。 HTTP 请求应该使用componentDidMount 发出，因此我们将在此处调用 getTodos 。我们也可以删除模拟列表，因为它不再需要了。 现在，我们完整的 App.js 文件将如下所示。
// src/App.js import React, { Component } from 'react'; import axios from 'axios'; // new class App extends Component { state = { todos: [] }; // new componentDidMount() { this.getTodos(); } // new getTodos() { axios .get('http://127.0.0.1:8000/api/') .then(res => { this.setState({ todos: res.data }); }) .catch(err => { console.log(err); }); } render() { return ( <div> {this.state.todos.map(item => ( <div key={item.id}> <h1>{item.title}</h1> <span>{item.body}</span> </div> ))} </div> ); } } export default App;
如果您再次查看 http://localhost:3000/，即使我们不再具有硬编码的数据，页面也一样。 所有这些都来自我们的 API 端点并立即提出要求。
这就是 React 的工作方式！
总结
现在，我们已将 Django 后端 API 连接到 React 前端。 更好的是，我们可以选择将来更新前端，或者随着项目需求的变化而完全替换掉。
这就是为什么采用 API 优先方法是使网站“面向未来”的好方法。 前期可能需要更多的工作，但是它提供了更多的灵活性。
