玩框架+React，命名空间

Question

我想询问 opinions/suggestions 关于我正在处理的项目的文件夹结构和命名空间。这是一个 Play Framework 2.0，React+Backbone 用于 UI.

当前结构：

/assets
  /css
  /js
    /lib
      someLib.js
    /models
      bar.js
    /ui
      /components
        Foo.jsx
      App.jsx
      router.jsx
    main.js

我有我的 /assets/js 文件夹。在其中我有 main.js 我正在引导我的应用程序。

// main.js
import router from './ui/router';
window.addEventListener('DOMContentLoaded', router);

router.jsx 包含 react-router 使用的我的路由，还导入了这些路由使用的一些主要组件。

// router.jsx
import App from './App';
import Foo from './components/Foo';

...
const Routes = {
  <ReactRouter.Route handler={App} path="/">
     <ReactRouter.Route name="foo" path="foo" handler={Foo} />
  </ReactRouter.Route>
}

export default function() {
    ReactRouter.run(
        Routes,
        ReactRouter.HistoryLocation,
        function(Handler) {
            React.render(<Handler/>, document.body);
        }
    );
}

我还有 Backbone 个模型，这些模型与 React 连接并将它们存储在 /assets/js/models 中。例如

// Foo.jsx 
import bar from './../../models/bar';

..
// some react code
export default Foo;

还有我的模型文件：

// bar.js
import someLib from './../lib/someLib';

..
// some backbone model code
export default Bar;

就是这样。我真正不喜欢的是那些长长的路 import API from '../../../api/websocket'; 或 import API from '../../../api/websocket';

我也想避免引用 ReactRouter.Route 而只是 Route 等

我在考虑 import/export 的一些中心点，但不确定在那种情况下最佳做法是什么。

Answer 1

我觉得你的应用布局没问题。除非需要，否则不要重构。

可以通过避免冗余 ./ 来清理您的路径，因此请使用 ../../models/bar 而不是 ./../../models/bar。

使用 ReactRouter.Route 我发现转到 https://facebook.github.io/react/jsx-compiler.html 并查看代码在转换为普通 JS 后的外观很有用。以你的路线为例：

const Routes = (
  <ReactRouter.Route handler={App} path="/">
     <ReactRouter.Route name="foo" path="foo" handler={Foo} />
  </ReactRouter.Route>
)

编译为：

const Routes = (
  React.createElement(ReactRouter.Route, {handler: App, path: "/"}, 
     React.createElement(ReactRouter.Route, {name: "foo", path: "foo", handler: Foo})
  )
)

所以你可以看到 ReactRouter.Route 只是一个传递给 React.createElement 的普通对象。这意味着您可以随意命名。您可以执行 const Route = ReactRouter.Route; 或从模块中导出并像 import { Route } from '../lib/MyReactUtils' 等导入它...

玩框架+React，命名空间

Play framework + React, namespaces

javascript

playframework-2.0

reactjs