react.js 桌面和移动网络项目架构

react.js desktop and mobile web project architecture

我非常担心我的 Web 项目架构，它将有单独的移动和桌面 Web 应用程序。

我已经完成了基于"create-react-app"项目模板的网页版开发，对于移动版，我想尽可能重用我现有的网页版组件。

我们将分别为桌面设备 url "www" 和移动设备 "m" 提供这些服务。

我正在考虑两种可能的方法。

只需为移动设备构建另一个 create-react-app 项目并共享通用代码。
在存在的web客户端create-react-app project src文件夹中，制作移动版本代码如component.js component.web.js component.mobile.js。但在这种情况下，我担心 bundle js 文件的大小。

我也考虑过响应式网页设计，但我们的布局和组件完全不同。

根据视口大小或 url(www/m) 在组件内渲染两个不同的布局可能是另一种可能的方式，但我很有可能使用服务器端渲染。 ..

解决这个问题的好方法是什么....

我会按如下方式处理：-

将所有业务逻辑移动到一个通用包中，并在移动和 Web 中使用它。这将使您的逻辑通用。
将所有通用 components/config/colors 等移动到一个通用包中，并在两个应用程序中使用它们。
分别处理两个应用程序的视图部分。

I also thought about the responsive web design, but we have totally different layout and components.

如果您有完全不同的布局和组件，我建议您将移动设备和 Web 分开。它不仅与包大小有关，您可以通过延迟加载来绕过它，而且您的代码复杂性会增加。

您可以使用相同的代码并使用 Cordova Framework 构建移动应用程序因为您的网络代码将是生成应用程序的代码。