简介
本文介绍通过nvm安装Node.js，然后使用create-react-app创建React项目。
在前端，我们展示了如何构造模拟数据，并将其加载到组件状态。
遇到问题时，可尝试重新安装npm。然后引入axios进行HTTP请求，以从Django API替换模拟数据。
1 工具安装
首先，将React应用配置为我们的前端。
新建一个控制台界面，linux 下载并安装 node
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
或者
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
激活命令行
command -v nvm\
重启命令行控制台界面,即可完成安装.
2 使用React创建项目
我们将使用出色的npm-create-react-app包来快速启动一个新的React项目。这将生成我们的项目样板并通过一个命令安装所需的依赖项！
npm使管理和安装多个软件包变得非常简单。 这是在本地安装软件包的一种改进方法，无需安装污染全局名称空间。这是安装React的推荐方法以及我们将使用的方法
在todo目录创建前端app
apt install npm # 40M 上下
npx create-react-app frontend
进入frontend 并启动应用
$ cd frontend
$ npm start
3 在前端app构造模拟数据
代码如下：
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()显示所有项目.可以复制代码，只需要看到如何与api配合工作。
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组件的状态中，然后使用map遍历每个组件列表中的项目，显示每个项目的标题和正文。
我们还添加了ID作为密钥，这是一个反应特定的要求；该ID由Django自动添加到我们每个数据库字段中。
注意：如果在前端看见js错误，只需要重新安装npm，该修复程序通常是npm-install，然后尝试重新启动npm。
如果这样不起作用，则删除您的node_modules文件夹并运行npm install。这样就可以在99％的时间内解决问题。欢迎使用现代JavaScript。 :)
4 连接前后端
使用 django api 替换 mock 数据。
发出HTTP请求的两种流行方法：内置FetchAPI或axios它带有几个附加功能。
在此示例中，我们将使用axios。使用Control-c停止运行的应用程序。然后安装axios。
在前端安装 axios， 用于前端发起request 请求。
npm install axios
如果axios 安装失败，使用 内置的fetch
//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() {
fetch('http://127.0.0.1:2000/api/')
.then(response )
.then(data => this.setState({ totalReactPackages: data.total }));
//.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;
5 小结
前后端分离将增强web站点的灵活性。
接下来增强我们的API，使其支持多个HTTP动作，例如POST（添加新待办事项），PUT（更新现有的待办事项）和DELETE（删除待办事项）
然后我们将构建一个健壮的博客 API，该API支持完整的CRUD（创建-读取-更新-删除）功能，
随后再向其中添加用户身份验证，以便用户可以登录，注销，然后通过我们的API注册帐户。
