我应该如何组织我的申请？答案

【问题标题】：How should I organize my application?我应该如何组织我的申请？
【发布时间】：2017-05-03 15:26:28
【问题描述】：

我目前正在处理一个 React/TypeScript 项目，并将我的文件分成几个文件夹。我的项目是使用各种处理方法以交互方式解决数独问题，因此我将我的应用程序拆分为以下结构：

sudokusolver/
    css/
    dist/
    fonts/
    img/
    js/ -> external libraries, ie. jquery, etc.
    node_modules/
    server/ -> fetches puzzle data from the server
    ts/
        actions/ -> user actions stored for history navigation
        components/
        containers/
        enumerations/
        models/ -> stores multiple actions for history navigation
        solver/ -> sudoku solving methods
        index.tsx
    index.html
    package.json
    ...

现在，我的 components/ 和 containers/ 文件夹变得相当大。我想知道我应该遵循什么方案来重组我的文件结构，知道这是一个单页应用程序。任何帮助将不胜感激。

【问题讨论】：

为什么jquery 不在node_modules 中？为什么css 不在组件旁边？为什么 fonts 和 img 这基本上是资产不在一个公共目录中？我还将首先创建一个ui 文件夹。不要调用文件夹ts。为什么不简称为src 或source？
我的 js 文件夹容器 bootstrap、jquery 等。但我想 npm 无论如何都可以处理。好点子！
在组件旁边添加 css 究竟有什么帮助？整个应用程序是客户端，在server/文件夹中有一个用于数据访问的php脚本。
在基于组件的架构中，每个组件都应该有自己独立的样式。实际上有一种完全在反应（javascript）代码中编写样式的运动。这就是为什么我告诉你它们应该在组件旁边——因为每个组件都应该有自己的样式。
这就是重点——没有全局样式。如果要设置按钮样式，请创建一个内部使用该样式的按钮组件。

标签： reactjs single-page-application organization

【解决方案1】：

根据您发布的内容，您的 component 和 container 文件夹看起来是扁平的 - 我认为这不是一个好主意 - 正如您所说，它会导致文件夹相当长。

我的一个个人项目具有以下布局。在组件下，我拥有所有可重用的组件和组件。它们或多或少是任意嵌套的——我将在模态、布局、表单等下有一个“游戏”文件夹——只是为了帮助处理混乱。 “容器”（据我所知）位于“路由”下，它们的文件夹结构遵循它们再次加载的 URL 路径（/profile/games 使用来自routes/profile/games/... 的容器/包装器）

在我看来，将与项目构建无关的所有内容（即除了 webpack 定义、npm 的 package.json、gulpfiles、(babel/eslint/tslint)rc 文件等之外的所有内容）移动到一个子文件夹 - src 或类似的。

我还会拆分您的服务器和客户端应用程序 - 它们不需要位于同一个文件夹下。我通常会做类似的事情

projectname/
    project_client/
        # client src
    project_server/
        # server src

这将有助于减少混乱。

【讨论】：

好的，谢谢！另外，澄清一下，这只是遵循容器/组件布局，与路由无关，因此容器只保存组件的逻辑。我认为，按照您所说的，我应该将它们组合起来，然后按其层次结构（在页面上）将所有内容分解为新文件夹。这也可能有点帮助。
是的 - 这只是我的个人风格，但我认为它运作良好。不要害怕嵌套文件夹 - 您可以轻松折叠/隐藏文件夹。而且，就像我说的，我认为我的“路线”文件夹就像你的“容器”文件夹。路线中的所有内容都只是保存/放置高级组件（例如“在此处放置图片网格”）。
我建议将actions 和reducers 放入一个通用的超级文件夹中，例如state。实际上，有些人更喜欢将 action 和 reducer 与名为 navigation.reducer.ts 和 navigation.actions.ts 的文件放在同一个文件夹中。原因是这些文件通常非常紧密耦合，在编辑一个文件时，您通常也在编辑第二个文件。
@Sulthan 好点。我将所有操作和减速器分开（actions/game.ts、reducers/game.ts、actions/modal.ts 等），因此将它们放入自己的文件夹中是有意义的。