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

Question

有点广泛的问题,但是在JS世界的所有这些趋势中,有时很难找到关于这些简单事物的信息.在这种项目中组织文件和文件夹的更好方法是什么？有一些来自Facebook的语言服务器示例,但它适用于非常基本的项目.

另请参阅git上的 React示例

但这些例子只是为了玩弄.

目标是 - 明确区分客户端和服务器组件.将它们移动到单独的文件夹树中.也有类似app的结构(例如Django)

所以主要的问题是:

将nodejs/iojs服务器端与React客户端组件分开并将它们放在一个项目中的正确方法是什么？

项目:

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

Answer 1

React-starter-kit是一个非常好的同构项目模板,还包括所有必要的工具,如eslint,babel等.它有详细记录,因此您可以轻松了解每个文件夹的用途.

在构建项目结构之前,您必须考虑是否需要使用助焊剂,并且不同的助焊剂或助焊剂框架可能会使您的结构不同.React-starter-kit是开始尝试不同实现的好地方.

Answer 2

这样的东西怎么样，我在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

Answer 3

基本上你可以从任何 React.js 样板开始；仔细看一下，从几个方面来评估问题

• 是否容易将不同人群的作品分开
• 应用程序结构有意义吗？当您稍后重新处理同一件事时，您是否会难以理解应用程序的结构？
• 以后如果想增加功能主义者会不会很难？（假设你想要csrf支持）

我比较了一些 React 样板，最终选择了 isomorphic500。我修改了一些代码以达到这样的效果：

我的文件夹里面src是您将要开发的模块。对我来说，如果所有模块都是解耦的，那么开发东西会更容易，并且通过这样做，您可以将您的工作与您的团队成员（如果有的话）分开。