React.js: 如何在新标签页加载App组件？

Question

我正在使用 React.js 构建一个新的 Web 应用程序。我有一个使用普通旧 HTML 和 CSS.

静态构建的欢迎页面 (index.html)

在该欢迎页面中，我有一个“开始”按钮，单击该按钮，我将在新选项卡中打开一个新的 html 页面，我需要在其中加载我的 React 网络应用程序。

我看到的所有例子都是直接在index.html页面加载React App。有人可以告诉我如何在从静态 index.html 页面启动的新页面中加载 React 应用程序吗？

谢谢。

Answer 1

您可以通过前往位于您的 React 应用程序 public 目录中的 manifest.json 文件并将您的“start_url”键更改为任何文件来更改您的 React 应用程序的起点你愿意。

然后将 ReactDOM.render(<App />, el) 更改为您希望在新起点文件中使用的任何元素。

Answer 2

有两种方法可以实现此目的：

方法 1 - 使用 npm 运行 弹出（不推荐）

以下是将 React App 的起点从“index.html”更改为“app.html”的步骤：

$npm 运行 弹出

$vim./config/paths.js

将此行更新为：“appHtml: resolveApp('public/app.html'),”

$vim node_modules/html-webpack-plugin/index.js

将此行更新为：“文件名：'app.html'”，“

方法 2 - 编辑反应脚本文件

但是，Facebook 建议不要弹出，因为开发人员很难使他们的构建脚本保持最新并自行管理整个构建过程。他们鼓励开发人员使用 create-react-app。推荐的方法是分叉 create-react-app 代码，更新 react-scripts 包，将新脚本发布回 npm，然后继续使用您刚刚发布的新自定义版本的 create-react-app。

发表了许多文章来说明这个过程： https://auth0.com/blog/how-to-configure-create-react-app/

https://www.youtube.com/watch?v=I22TW-33dDE

https://github.com/facebook/create-react-app/issues/682

https://github.com/timarney/react-app-rewired

https://spin.atomicobject.com/2020/01/28/eject-create-react-app-drawbacks/

https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741#:~:text=least%20for%20now.-,%E2%80%9CCreate%2DReact%2DApp%20is%20missing%20a%20feature%20that%20I,someone%20else%20has%20done%20previously.

https://medium.com/@denis.zhbankov/maintaining-a-fork-of-create-react-app-as-an-alternative-to-ejecting-c555e8eb2b63

https://codeburst.io/customizing-create-react-app-done-right-4a22683f2e09

就我的目的而言，我认为即使发布新的自定义版本也有点矫枉过正。因此，在不弹出或创建自定义版本的 CRA 的情况下，我可以通过执行以下操作来实现此目的：

1. 将 ./node_modules/react-scripts/config/paths.js

   中所有出现的 'index.html' 替换为 'app.html'

2. 将./node_modules/html-webpack-plugin/index.js

   中的'filename: index.html'替换为'filename: app.html'

有了这个，您将能够继续从 Facebook 接收更新，而无需自己管理所有构建脚本。然而，我认为这样做的缺点是每次更新时，我们的更改可能会被新更改覆盖，这将是一个重大更改。因此，每次由于新更新导致代码中断时，我们都必须更新上述两个文件。但是考虑到保留create-react-app的好处，我觉得利大于弊