在部署中正确使用create-react-app和Express.js后端进行API调用的步骤如下:
npx create-react-app my-app
这将创建一个名为my-app的新React应用。
npm init -y
这将初始化一个新的Node.js项目。然后,使用以下命令安装Express.js和其他必要的依赖项:
npm install express body-parser cors
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.get('/api/data', (req, res) => {
const data = { message: 'Hello from the backend!' };
res.json(data);
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
上述代码创建了一个简单的Express.js服务器,并在/api/data
路由上定义了一个GET请求的API。
fetch
或axios
等库来发起API请求。在React组件中,可以在componentDidMount
生命周期方法中调用后端API。以下是一个示例:import React, { Component } from 'react';
class App extends Component {
componentDidMount() {
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error));
}
render() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
}
export default App;
上述代码在组件加载后发起了对后端API的GET请求,并将返回的数据打印到控制台。
npm run build
这将生成一个名为build
的文件夹,其中包含了优化后的前端代码。将该文件夹中的内容部署到静态文件服务器上。
对于Express.js后端应用,可以使用PM2等工具来进行进程管理和部署。以下是一个简单的示例:
npm install -g pm2
pm2 start server.js --name my-app
上述命令将启动后端应用,并将其命名为my-app。
请注意,上述步骤仅提供了一个基本的示例,实际部署过程可能会因具体需求而有所不同。在实际部署中,还需要考虑安全性、性能优化、日志记录等方面的问题。
领取专属 10元无门槛券
手把手带您无忧上云