如何管理React Js到不使用路由的多页面应用程序？

Question

我想将反应js实施到我网站的不同页面， 例如 在主页，注册，登录等

所有教程我已经看过它只使用1个app.js我怎样才能实现这个目标 到多页面应用程序。

P.S我正在使用laravel elixir，我将它们组合成1个main.js。

Answer 1

在您希望 React App 安装的页面中添加一个安装点。

e.g。

// main.js
ReactDOM.render(<App props={/* props from somewhere */}/>, document.getElementById('mountingPoint') );

// rendered HTML from pages should have
<div id="mountingPoint"></div>

Answer 2

我发现了https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points

我认为这更适合我需要的东西然后我只会映射文件 在我的laravel app中命名。

这样我就不需要将contact_us.php的js代码加载到login.php

Answer 3

您还可以使用React Habitat之类的内容来简化此架构。

有了它，您可以定义组件的容器，以便它们在您的DOM中解析。

例如，在你的javascript中你会做

import MyComponent from './Components/MyComponent';

...

container.register(MyComponent).as(myComponent);

然后在任何HTML页面中

<div data-component="myComponent"></div>

它还支持多个容器和异步代码拆分。