Reactjs 我应该如何组织我的申请？

我目前正在做一个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下，我有所有可重用组件和组件块。它们或多或少都是任意嵌套的——我会在modals、layout、form等下面有一个“game”文件夹——只是为了帮助处理混乱。“容器”（据我所知）位于“路由”下，其文件夹结构遵循重新加载的URL路径（
/profile/games
使用
路由/profile/games/…
中的容器/包装器）


在我看来，这也有助于将与项目构建无关的所有内容（即除了网页包定义、npm的package.json、gulpfiles、（babel/eslint/tslint）rc文件等之外的所有内容）移动到子文件夹-
src
或类似文件中

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

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

这将有助于减少混乱
 为什么
jquery
不在
node\u模块中？为什么
css
不在组件旁边？为什么基本上属于资产的
字体
和
img
不在一个公共目录中？我还将首先创建一个
ui
文件夹。不要调用文件夹
ts
。为什么不简单地称之为
src
或
source
？我的js文件夹包含bootstrap、jquery等，但我想npm无论如何都可以处理这个问题。说得好！在组件旁边使用css到底有什么帮助？整个应用程序都是客户端，在
服务器/
文件夹中有一个用于数据访问的php脚本。在基于组件的体系结构中，每个组件都应该有自己独立的样式。实际上，完全用react（javascript）代码编写样式是一种趋势。这就是为什么我要告诉你们，它们应该在组件旁边——因为每个组件都应该有自己的样式。这就是重点——没有全局样式。如果您想设计一个按钮的样式，请创建一个内部使用该样式的按钮组件。好的，谢谢！另外，澄清一下，这只是遵循容器/组件布局，与路由无关，因此容器只包含组件的逻辑。我认为，按照你所说的，我应该将它们组合起来，然后按照它们的层次结构（在页面上）将所有内容分解成新的文件夹。这可能也会有点帮助。是的，这只是我个人的风格，但我认为它很管用。不要害怕嵌套文件夹-您可以轻松折叠/隐藏文件夹。正如我所说，我认为我的“路由”文件夹就像你的“容器”文件夹。routes中的所有内容都只包含/放置高级组件（如“在此处放置一个图片网格”）。我建议将
操作
和
减缩器
放入一个通用的超级文件夹中，例如
状态
。实际上，有些人更喜欢将actions和reducer与名为
navigation.reducer.ts
和
navigation.actions.ts
的文件放在同一个文件夹中。原因是这些文件通常是紧密耦合的，在编辑一个文件时，您通常也在编辑第二个文件。@Sulthan这是一个很好的观点。我将所有动作和减缩器分开（
actions/game.ts
，
reducers/game.ts
，
actions/modal.ts
，等等），因此我将它们放在自己的文件夹中是有意义的。