18

一个有点宽泛的问题，但是随着 JS 世界的所有这些趋势，有时很难找到关于这些简单事物的信息。在此类项目中组织文件和文件夹的更好方法是什么？Facebook 提供了几种语言的服务器示例，但它适用于非常基本的项目。

还可以在git上找到 React 示例

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

目标是 - 拥有明确分离的客户端和服务器组件。将它们移动到单独的文件夹树中。还具有类似应用程序的结构（例如 Django）

所以主要问题是：

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

项目：

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

3 回答 3

8

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

在构建项目结构之前，您必须考虑是否有必要应用通量，不同的通量或受通量启发的框架可能会使您的结构不同。React-starter-kit 是开始尝试不同实现的好地方。

于 2015-09-23T01:28:04.767 回答
5

像这样的东西怎么样，我在 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
于 2015-09-22T20:00:45.663 回答
4

基本上你可以从任何 React.js 样板开始；看透它，从几个方面评估问题

  • 在人群中分离作品是否容易
  • 应用程序结构有意义吗？当你在同一件事上重新工作时，你会难以理解应用程序的结构吗？
  • 将来如果要添加功能主义者会很难做到吗？（假设你想要 csrf 支持）

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

应用结构

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

于 2015-09-23T01:42:40.403 回答