javascript React + Node.js 的项目结构应该是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32725327/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What should be a project structure for React + Node.js?
提问by wolendranh
A bit wide question, but with all those trends in JS world, sometimes it is hard to find information about such simple things. What is the better way to organize files and folders in such kind of project? There is server examplesin few language from Facebook, but it is for very basic project.
一个有点广泛的问题，但是在 JS 世界的所有这些趋势中，有时很难找到关于这些简单事情的信息。在此类项目中组织文件和文件夹的更好方法是什么？有来自 Facebook 的几种语言的服务器示例，但它用于非常基本的项目。
Also find out React Examples on git
还可以在git上找到 React 示例
But those examples are just for playing around.
但这些例子只是为了玩。
The goal is - to have clearly separate Client and Server component. Move them in separate trees of folders. Also have app-like structure (like for example Django does)
目标是 - 具有明确分开的客户端和服务器组件。将它们移动到单独的文件夹树中。也有类似应用程序的结构（就像 Django 那样）
So main question is:
所以主要问题是：
what is correct way to separate nodejs/iojs serveer side from React client side component and put it all together in one project?
将 nodejs/iojs 服务器端与 React 客户端组件分开并将它们放在一个项目中的正确方法是什么？
Project:
项目：
- nodejs server, for site where users can create their own articles separated in hubs/topics.
- React on front end.SPA.
- load - about 10 000 users.
- MongoDb database with access through Mongoose
- nodejs 服务器，用于用户可以创建自己的文章的站点，这些文章以中心/主题分开。
- 在前端反应。SPA。
- 负载 - 大约 10 000 个用户。
- 可通过 Mongoose 访问的 MongoDb 数据库
采纳答案by Shih-Min Lee
Basically you could start with any React.js boilerplates; look through it, and evaluate the problem in a few aspects
基本上你可以从任何 React.js 样板开始；看透，从几个方面评价问题
- is it easy to separate the works among groups of people
- does the app structure makes sense? would you have difficulty understanding the app structure a while later when you rework on the same thing?
- in the future if you want to add functionalists would it be difficult to do so? (say you want csrf support)
- 容易在人群中分离作品吗
- 应用程序结构有意义吗？稍后当您重新处理同一件事时，您是否会难以理解应用程序结构？
- 以后如果要加功能主义者，会不会很难？（说你想要 csrf 支持）
I compared a few react boilerplates and eventually go with isomorphic500. I revised me code a bit to reach something like this:
我比较了一些 react 样板文件，最终选择了 isomorphic500。我修改了我的代码以达到这样的目的：
what is inside my srcfolder is the modules you will be developing. To me it's easier to develop stuff if all the modules are decoupled and by doing this you can separate your work among your teammates, if any.
我的src文件夹中的内容是您将要开发的模块。对我来说，如果所有模块都解耦，那么开发东西会更容易，通过这样做，你可以在你的团队成员之间分离你的工作，如果有的话。
回答by ycavatars
React-starter-kitis a really good isomorphic project template and also includes all necessary tools such as eslint, babel...etc. It's well-documented so you can know the purpose of each folder easily.
React-starter-kit是一个非常好的同构项目模板，还包括所有必要的工具，如 eslint、babel 等。它有详细记录，因此您可以轻松了解每个文件夹的用途。
Before you build your project structure, you have to think if it's necessary to apply flux, and different flux or flux-inspired framework may make your structure different. React-starter-kit is a good place to start trying different implementations.
在你构建你的项目结构之前，你必须考虑是否有必要应用flux，不同的flux或flux-inspired框架可能会让你的结构有所不同。React-starter-kit 是开始尝试不同实现的好地方。
回答by Alicia
How about something like this, I've seen many projects on GitHub follow a similar structure, and it's what I use.
这样的东西怎么样，我在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
