Question

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

Answer 1

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

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

Answer 2

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扩展名

Answer 3

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

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

我的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作为后端。我为SPA编译了client.js，为后端编译了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

为Fronted和Dashboard React Redux文件夹结构

3 个答案: