我正在使用 React.js 构建一个新的 Web 应用程序。我有一个使用普通 HTML 和 CSS 静态构建的欢迎页面 (index.html)。
在那个欢迎页面中，我有一个“开始使用”按钮，单击它，我将在新选项卡中打开一个新的 html 页面，我需要在其中加载我的 React 网络应用程序。
我看到的所有示例都直接在 index.html 页面中加载 React App。有人可以告诉我如何在从静态 index.html 页面启动的新页面中加载 React 应用程序吗？
谢谢。
【问题讨论】：
标签： javascript reactjs react-router react-dom
您可以通过前往位于您的反应应用程序公共目录中的 manifest.json 文件并将您的“start_url”键更改为您想要的任何文件来更改您的反应应用程序的起点。
然后将您的 ReactDOM.render(<App />, el) 更改为您希望在新起点文件中添加的任何元素。
【讨论】：
有两种方法可以做到这一点：
方法 1 - 使用 npm runeject（不推荐）
以下是将 React App 的起点从“index.html”更改为“app.html”的步骤：
$npm 运行弹出
$vim ./config/paths.js
将此行更新为：“appHtml: resolveApp('public/app.html')”，
$vim node_modules/html-webpack-plugin/index.js
将此行更新为："filename: 'app.html',"
方法 2 - 编辑 react-scripts 文件
但是，Facebook 建议不要弹出，因为开发人员很难让他们的构建脚本保持最新并自行管理整个构建过程。他们鼓励开发人员使用 create-react-app。推荐的方法是 fork 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://codeburst.io/customizing-create-react-app-done-right-4a22683f2e09
出于我的目的，我认为即使发布新的自定义版本也太过分了。因此，在不弹出或创建自定义版本的 CRA 的情况下，我可以通过执行以下操作来实现此目的：
将 ./node_modules/react-scripts/config/paths.js 中所有出现的 'index.html' 替换为 'app.html'
将 ./node_modules/html-webpack-plugin/index.js 中的 'filename: index.html' 替换为 'filename: app.html'
这样，您将能够继续从 Facebook 接收更新，而无需自己管理所有构建脚本。但是，我认为这样做的缺点是每次有更新时，我们的更改可能会被新更改覆盖，这将是一个重大更改。因此，每次代码因新更新而中断时，我们都必须更新上述两个文件。但考虑到保留 create-react-app 的优势，我认为利大于弊。
【讨论】：