好的，我可以为您提供
创建 React 和 Express
项目以及连接 API 的步骤。
1. 首先，在您的计算机上安装 Node.js。您可以从官网 https://nodejs.org/en/ 下载安装程序。
2.
创建项目目录并打开终端窗口。
3. 在终端窗口中输入以下命令来
创建 React 项目：
```
npx create-
react-app your_app_name
```
将 "your_app_name" 替换为您想要的
项目名称。
4. 等待
React 项目创建完成后，使用以下命令进入
项目目录：
```
cd your_app_name
```
5. 接下来，我们将
创建 Express 服务器并构建 API。 在
项目根目录下
创建一个名为 "server" 的文件夹，并在该文件夹中
创建一个名为 "index.js" 的文件。
6. 打开 "index.js" 文件，并输入以下内容：
```
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}`));
```
这将
创建一个基本的 Express 服务器并将其侦听在端口号 5000 上。
7. 接下来，我们将
创建一个 API 路由以便从
React 应用程序中调用。 在 "server" 文件夹中
创建另一个名为 "api.js" 的文件，并输入以下内容：
```
const express = require('express');
const router = express.Router();
router.get('/data', (req, res) => {
const data = [
{ id: 1, text: '
React' },
{ id: 2, text: 'Express' },
{ id: 3, text: 'API' }
];
res.json(data);
});
module.exports = router;
```
这将
创建一个名为 "/data" 的 API 路由，并向客户端返回一个包含三个对象的 JSON 数组。
8. 在 "index.js" 文件中，输入以下内容以将 API 路由添加到 Express 应用程序中：
```
const apiRouter = require('./server/api');
app.use('/api', apiRouter);
```
这将使我们的 API 路由可访问于 "/api/data" 端点。
9. 最后，我们需要在
React 应用程序中调用 API。 打开
React 项目的 "src" 文件夹中的 "App.js" 文件，并输入以下内容：
```
import
React, { Component } from '
react';
class App extends Component {
state = {
data: []
};
componentDidMount() {
fetch('/api/data')
.then(res => res.json())
.then(data => this.setState({ data }));
}
render() {
const { data } = this.state;
return (
<div>
<ul>
{data.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
</div>
);
}
}
export default App;
```
这将使用 Fetch API 从我们的 API 路由中检索数据，并在
React 组件中呈现它们。
现在，您的
React 和 Express
项目已成功连接并进行 API 请求和响应。希望这可以帮助您开始使用
React 和 Express 进行全栈开发！
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
818
