Play framework + React, namespaces

Question

I'd like to ask for opinions/suggestions about folder structure and namespaces for a project I'm working on. It's a Play Framework 2.0, and React+Backbone for the UI.

Current structure:

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

I have my /assets/js folder. Within it I have main.js where I'm bootstraping my app.

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

router.jsx contains my routes used by react-router and also import of some main components used by those routes.

// 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);
        }
    );
}

I have also Backbone models which are wired with React and store them in /assets/js/models . Eg

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

..
// some react code
export default Foo;

And my model file:

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

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

This is it. The things I don't really like are those long paths like import API from '../../../api/websocket'; or import API from '../../../api/websocket';

I also would like to avoid referencing ReactRouter.Route but just Route etc.

I was thinking about some centre point of import/export, but not sure what is the best practice in that kind of situations.

Answer 1

Your app layout looks ok to me. Don't refactor until you need to.

Your paths can be cleaned up by avoiding redundant ./ so use ../../models/bar instead of ./../../models/bar .

With ReactRouter.Route I find it useful to go to https://facebook.github.io/react/jsx-compiler.html and see how your code looks once it's been transpiled to normal JS. Take your Route as an example:

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

Compiles to:

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

So you can see that ReactRouter.Route is just a normal object that gets passed in to React.createElement . That means that you can name it whatever you want. You could do const Route = ReactRouter.Route; or export that from a module and import it like import { Route } from '../lib/MyReactUtils' etc...