Play framework + React, namespaces

Question

Я хотел бы попросить мнения/предложения о структуре папок и пространствах имен для проекта, над которым я работаю. Это Play Framework 2.0 и React + Backbone для пользовательского интерфейса.

Текущая структура:

/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 и т.д.

Я думал о какой-то центральной точке импорта/экспорта , но не уверен, что является лучшей практикой в ​​таких ситуациях.

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' и т. Д.