简介
create-react-app-express 是一个基于 create-react-app 脚手架的扩展应用,可以方便快捷地创建一个结合了 Express 后端框架的 React 前端应用。通过使用该框架,可以快速地开发出一个拥有完整前后端交互的 web 应用。
安装
首先需要安装 create-react-app-express 包。可以通过 npm 进行安装。
npm install create-react-app-express -g
创建项目
使用下面的命令可以创建一个基于 create-react-app-express 的新项目:
create-react-app-express my-app
这条命令会创建一个名为 my-app 的项目,并在其中添加 Express 后端框架,同时也添加了一些默认配置信息。
在项目目录下运行如下命令来启动项目:
cd my-app npm start
这条命令将会运行项目,并在浏览器中打开应用页面。
设置数据库
在 Express 应用中,我们需要设置一个数据库进行存储。create-react-app-express 已经为我们提供了 MySQL 和 MongoDB 两个选项。
使用 MySQL
如果需要使用 MySQL,可以在 app/config/database.js 文件中进行配置。
const dbConfig = { HOST: "localhost", USER: "", PASSWORD: "", DB: "", }; module.exports = dbConfig;
在这个文件中需要填写 MySQL 的 hostname、username、password 和 database。
使用 MongoDB
如果需要使用 MongoDB 进行存储,可以在 app/config/database.js 中进行配置。
const dbConfig = { url: "mongodb://localhost:27017/database", }; module.exports = dbConfig;
在这个文件中需要填写 MongoDB 的连接 URL。用法与原生 MongoDB 驱动类似。
添加 API
通过 create-react-app-express,可以很轻松地创建一个 Express 后端应用,并且为我们提供了一些常用的 API。
例如,在 app/routes/users.js
中提供了一个简单的查询用户 API。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- ----- ----- - - - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ----- -- -- --------------- ----- ---- -- - ---------------- --- -------------- - -------
上面的代码会对 /users
路径进行监听,并返回 users 数组给前端应用。
常用命令
npm start
: 运行开发环境npm run build
: 打包前端应用npm run server
: 运行生产环境npm run lint
: 运行 ESLint 检查npm run test
: 运行所有测试用例
结语
这篇文章介绍了 create-react-app-express 的使用方法和常用命令,希望能够帮助到大家。在实际开发中,我们可以根据项目需求自行添加或修改 API,并使用最新的技术开发出高性能、高可靠性的 web 应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005687181e8991b448e46ca