React与Node.js互连

1. 创建React和Node.js项目

首先，我们需要创建一个React项目和一个Node.js项目。为了方便管理，我们将这两个项目放在同一个目录下。

1.1 创建React项目

使用Create React App创建一个新的React项目：

1.2 创建Node.js项目

在与React项目同级的目录下创建Node.js项目：

然后安装Express：

2. 配置Node.js服务器

在Node.js项目的根目录下创建一个server.js文件，并添加以下代码：

启动Node.js服务器：

3. 在React中请求Node.js API

在React项目中，我们将通过Fetch API或Axios库来请求Node.js服务器的API。

3.1 使用Fetch API

在src目录下创建一个新的组件ApiExample.js，并添加以下代码：

3.2 使用Axios

首先安装Axios：

然后修改ApiExample.js文件：

3.3 在App组件中使用ApiExample组件

打开src/App.js文件，导入并使用ApiExample组件：

4. 启动React应用

在React项目的根目录下运行以下命令启动开发服务器：

打开浏览器访问http://localhost:3000，你将看到从Node.js服务器返回的信息。

5. 处理CORS问题

在实际开发中，你可能会遇到跨域资源共享（CORS）问题。我们在Node.js服务器中已经启用了CORS，以确保React应用可以请求Node.js API。如果需要更细粒度的控制，可以配置CORS中间件：

6. 部署

在开发完成后，你需要将React和Node.js应用部署到生产环境。可以使用各种平台和服务，如Heroku、Vercel、DigitalOcean等。

6.1 构建React应用

在React项目的根目录下运行以下命令构建生产版本：

 

这将创建一个build目录，包含优化后的React应用。

6.2 部署到Node.js服务器

将构建后的React应用部署到Node.js服务器。你可以在Node.js服务器中设置静态文件托管，以提供React应用：

可以参考以下官方文档获取更多信息：

• React 官方文档
• Node.js 官方文档