引言
API 的功能在于与其他程序进行通信。 在本文中，我们将通过 React 前端使用上一篇文章中的 Todo API，这样您就可以了解实际中一切如何协同工作。
我选择使用 React，因为它是目前最流行的 JavaScript 前端库，但是此处描述的技术也可以与其他任何流行的前端框架一起使用，包括Vue，Angular或Ember。
他们甚至可以与适用于 iOS 或 Android 的移动应用，桌面应用或其他任何应用一起使用。 连接到后端 API 的过程非常相似。
如果您陷入困境或想了解有关 React 实际发生的事情的更多信息，请查看很好的官方教程。
安装 Node
首先，将 React 应用程序配置为前端。 首先打开一个新的命令行控制台，以便现在有两个控制台打开。 这个很重要。 我们需要上一章中现有的 Todo 后端才能在本地服务器上运行。 我们将使用第二个控制台来创建，然后在单独的本地端口上运行我们的 React 前端。 这就是我们在本地模拟专用和已部署的前端/后端的生产环境的样子的方式。
在新的第二个命令行控制台中，安装NodeJS，它是一个 JavaScript 运行时引擎。 它使我们可以在 Web 浏览器之外运行 JavaScript 。
在 Mac 计算机上，我们可以使用 Homebrew ：
$ brew install node
在 Windows 计算机上，有多种方法，但一种流行的方法是使用 nvm-windows。 其存储库包含详细的最新安装说明。 如果您使用的是 Linux，请使用nvm。 在撰写本文时，可以使用以下任一命令来完成，要么使用 cURL 命令：
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/\ install.sh | bash
或者使用 Wget：
$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/\ install.sh | bash
然后运行：
$ command -v nvm
关闭当前的命令行控制台，然后再次打开以完成安装。
安装 React
我们将使用出色的 create-react-app 包来快速启动一个新的 React 项目。 这将生成我们的项目样板并通过一个命令安装所需的依赖项！
要安装 React ，我们将依赖 npm，这是一个 JavaScript 包管理器。 像用于 Python 的 pipenv 一样， npm 使管理和安装多个软件包变得非常简单。 npm 的最新版本还包括 npx ，这是一种改进的方法，可以在本地安装软件包而不污染全局名称空间。 这是安装 React 的推荐方法，也是我们在此使用的方法！
$ cd ~/Desktop $ cd todo
创建一个名为前端的新 React 应用。
$ npx create-react-app frontend
您的目录结构现在应如下所示：
todo | ├──frontend | ├──React... | ├──backend | ├──Django...
转到我们的前端项目，并使用命令 npm start 运行 React 应用。
$ cd frontend $ npm start
如果导航到 http://localhost:3000 / ，则将看到 create-react-app 默认主页。
