MERN：在不涉及Web Pack细节的情况下创建多个独立的React应用程序

以下是在MERN堆栈中创建多个独立的React应用程序的解决方案，不涉及Webpack细节。

1. 创建一个MERN项目的基本结构： 在你选择的目录中创建一个名为mern-app的文件夹，并在其中创建以下文件和文件夹：

   mern-app/
   ├── client/
   │   ├── src/
   │   │   └── App.js
   │   └── package.json
   └── server/
       ├── index.js
       └── package.json
   

   在client/src/App.js中，可以编写React应用程序的代码。在server/index.js中，可以配置和启动Express服务器。

2. 设置客户端应用程序： 在client/package.json中，添加以下内容：

   {
     "name": "client",
     "scripts": {
       "start": "react-scripts start"
     },
     "dependencies": {
       "react": "^16.13.1",
       "react-dom": "^16.13.1",
       "react-scripts": "3.4.1"
     }
   }
   

   运行npm install来安装依赖项。

3. 设置服务器端应用程序： 在server/package.json中，添加以下内容：

   {
     "name": "server",
     "scripts": {
       "start": "node index.js"
     },
     "dependencies": {
       "express": "^4.17.1"
     }
   }
   

   运行npm install来安装依赖项。

4. 编写React应用程序： 在client/src/App.js中编写React应用程序的代码。这里是一个简单的示例：

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello MERN!</h1>
       </div>
     );
   }
   
   export default App;
   

5. 编写服务器端代码： 在server/index.js中编写Express服务器的代码。这里是一个简单的示例：

   const express = require('express');
   const app = express();
   
   app.get('/', (req, res) => {
     res.send('Hello from MERN server!');
   });
   
   const port = 5000;
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });
   

6. 启动应用程序： 在mern-app文件夹中，打开两个终端窗口，一个用于客户端，一个用于服务器端。

   • 在客户端终端窗口中，输入cd client，然后运行npm start。
   • 在服务器端终端窗口中，输入cd server，然后运行npm start。

   现在，你可以在浏览器中访问http://localhost:3000查看React应用程序，并在http://localhost:5000查看服务器端应用程序。

你可以重复步骤4和步骤5，以创建和运行更多的独立React应用程序。每个应用程序都将具有自己的客户端和服务器端代码，并在不同的端口上运行。