什么应该是React + Node.js的项目结构?

有点宽泛的问题,但是随着JS世界的所有这些趋势,有时很难find关于这样简单的东西的信息。 在这种types的项目中组织文件和文件夹的更好方法是什么? Facebook上有很less的语言服务器的例子 ,但它是非常基础的项目。

也可以在git上findReact Examples

但这些例子只是为了玩耍。

目标是 – 清晰地分离Client和Server组件。 将它们移动到不同的文件夹树中。 也有应用程序的结构(如Django)

所以主要的问题是:

从React客户端组件中分离nodejs / iojs服务端的正确方法是什么,并将它们放在一个项目中?

项目:

  • nodejs服务器,用于用户可以在hub /主题中创build自己的文章的站点。
  • 反应在前端.SPA。
  • 加载 – 约10 000个用户。
  • MongoDb数据库通过Mongoose访问

基本上你可以从任何React.js样板开始; 仔细观察,从几个方面对问题进行评估

  • 是不是很容易把人群中的作品分开
  • 应用程序结构是否有意义? 如果稍后在重做相同的东西时,您是否会难以理解应用程序结构?
  • 在未来,如果你想添加function主义者,这将是困难的吗? (说你想csrf的支持)

我比较了几个反应样板,并最终与isomorphic500。 我修改了一下代码以达到这样的目的:

应用结构

什么是我的src文件夹里面是你将要开发的模块。 对我来说,如果所有的模块都是分离的,开发这些东西就比较容易,通过这样做,你可以将你的工作分开,如果有的话。

React-starter-kit是一个非常好的同构项目模板,还包括所有必要的工具,如eslint,babel等。 这是很好的文件,所以你可以很容易地知道每个文件夹的目的。

在你build立你的项目结构之前,你必须考虑是否有必要使用助焊剂,而不同的助焊剂或助焊剂的框架可能会使你的结构不同。 React-starter-kit是开始尝试不同实现的好地方。

那么像这样的事情,我已经看到GitHub上的很多项目遵循类似的结构,这就是我使用的。

 components/ // React Components Directory models/ // Mongoose Models (if your using a database too) public/ // Static Files Directory ---- css ---- js ---- svg ... utils/ //Files containing utility methods views/ // Server Side Views (jade, or handlebars, ..) app.js // Client side main config.js // App configuration package.json routes.js // Route definitions server.js // Server side main