5

我正在使用 MERN 堆栈来开发应用程序。前端（React + Redux）与后端（express + mongo）完全隔离。我正在使用 CORS、JWT 和所有好东西来连接它们。前端本身有一个用户视图和仪表板或管理员视图。现在我陷入了需要根据我的文件夹结构定义反应路线的地方。有人可以为我的用例建议一个正确的文件夹结构和路由器配置吗？

4

3 回答 3

1

我认为这个问题没有正确/错误的答案。这取决于团队。

我喜欢将视图层和数据层分开。我喜欢有一个好的构建设置，资产分开，本地服务器分开，配置/脚本分开。

我的 SPA 设置的基本版本如下所示：

.babelrc
.gitignore
package.json
karma.conf.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
server
 index.js  [mock express server]

对于同构应用程序，我使用 firebase 作为后端。我client.js为 SPA 编译了一个server.js，为后端编译了一个。

.babelrc
.gitignore
package.json
karma.conf.js
client.js
server.js
src
  components
    App
     App.js
     App.test.js
  data
    app
      appActions.js
      appActions.test.js
      appReducer.js
      appReducer.test.js
  utils
webpack
  webpack.config.js
  webpack.dev.js
  webpack.prod.js
  webpack.test.js
  webpack.server.js
functions
  package.json
server
  index.js
于 2019-07-01T14:23:58.873 回答
1

React 对如何将文件放入文件夹没有意见。但根据我对 react 和 redux 的经验，以下文件结构非常适合仪表板。

my-app
 public
 src
   assets
    images(folder)
    scss(folder)
   utils
   routers
   store
   components
    common
      ...
    users
     Reducer.js
     Action.js
     Api.js
     Constants.js
     Helpers.jsx
     components(folder)
      Index.jsx
      Item.jsx
      Form.jsx
      Show.jsx
      ....
     containers(folder)
      Credate.jsx
      Index.jsx
      Show.jsx
     styles( custom style folder)

通常尝试为Reducer, Action, Api,Constants等保留 .js/.ts 扩展名，为另一个文件保留 .jsx/.tsx 扩展名。

于 2019-07-01T13:42:51.120 回答
1

您可以将所有视图存储在同一个目录中，就像/client我认为的那样，如果您打算使用一些通用组件，或者双方（用户和仪表板）的应用程序不是很大。

关于路线，这取决于。如果你使用类似的东西react-router，ofc。您应该将路线存储在客户端文件夹中。或者您可以创建目录，common以便在服务器端和客户端使用一些共享功能（和路由）。

于 2016-07-15T10:55:33.880 回答