在前端开发中，React 和 Node.js 已成为非常重要的框架。使用 React 开发应用时，我们通常会使用 Create React App 快速搭建 React 项目，在这里，我们介绍一个基于 Create React App 的扩展工具 create-react-node-app。
什么是 create-react-node-app
create-react-node-app 是一个基于 Create React App 扩展的工具，它封装了常见的后端开发中的工具与环境，使得开发者可以快速搭建一个具有 React 前端和 Node.js 后端的全栈应用。create-react-node-app 集成了常见的后端开发工具，例如 Express、Nodemon、ESLint 等，同时还支持 MongoDB 和 MySQL 数据库访问，方便我们快速实现具有全栈功能的 Web 应用。
安装
使用 create-react-node-app 首先我们需要进行安装：
npm i -g create-react-node-app
创建一个新项目
使用 create-react-node-app 创建新项目非常简单，只需要在命令行中执行以下命令即可：
npx create-react-node-app my-app cd my-app
上面的命令将在当前目录下创建一个名为 my-app 的项目，同时进入 my-app 目录以便于我们启动项目进行调试。
启动项目
在项目目录下，我们可以通过以下命令来启动应用程序：
npm run dev
这条命令将同时启动前端和后端，浏览器将自动打开 react 应用，而 Node.js 服务将在端口号 5000 上启动。
数据库访问
create-react-node-app 集成了 MongoDB 和 MySQL 数据库访问的功能。在启动 Node.js 后端服务时，create-react-node-app 将会把数据库连接信息注入到 Node.js 程序中，简化了我们连接数据库的过程。
MongoDB
要访问 MongoDB，您需要在根目录的环境变量中设置相应的值。例如，要使用 MongoDB，您需要在.env 文件中配置如下变量：
MONGO_URI = mongodb://localhost/test
⚠️请注意，这里需要将 MONGO_URI 换成您自己的 MongoDB 域名和数据库名，否则无法连接。
您可以通过访问如下网址验证您能否成功连接到您的 MongoDB 数据库：
http://localhost:5000/api/v1/mongodb
在这里，您可以查看所有已在 MongoDB 数据库中创建的文档，这是一个测试数据，可以通过修改代码实现相应的业务逻辑。
MySQL
要访问 MySQL，您需要在根目录的环境变量中设置相应的值。例如，要使用 MySQL，您需要在.env 文件中配置如下变量：
MYSQL_URI = mysql://root:password@localhost/test
⚠️请注意，这里需要将 MYSQL_URI 换成您自己的 MySQL 数据库用户名、密码和数据库名，否则无法连接。
您可以通过访问如下网址验证您能否成功连接到您的 MySQL 数据库：
http://localhost:5000/api/v1/mysql
在这里，您可以查看所有已在 MySQL 数据库中创建的表，这是一个测试数据，可以通过修改代码实现相应的业务逻辑。
ESLint
create-react-node-app 集成了 ESLint 工具，可以对您在开发过程中的代码进行实时检查，从而帮助您减少由于代码不规范导致的错误。
在检查时，您可以在控制台看到有关代码格式问题和潜在错误的详细信息。如果您的代码中存在错误，ESLint 将会在控制台中显示警告或者出错信息。
Nodemon
create-react-node-app 集成了 Nodemon 工具，可以实时监控您的 Node.js 代码更改并重新启动服务。这样您就可以专注于代码编写，而不必频繁地手动停止和重新启动服务。
结论
在此教程中，我们介绍了 create-react-node-app 工具，并演示了如何使用它来快速搭建具有全栈功能的 Web 应用程序。我们可以发现，使用 create-react-node-app 让我们的开发工作更加轻松、高效，这对于提高我们的工作效率具有重要意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79803