如何组织他的项目 React（没有 Redux）的文件？

Question

目前我使用 sass、图像和 jsx 文件，我想知道是否有标准。

例如，目前我正在这样做：

"/src
    /components
       App.jsx
       App.scss
       /Header
         Header.jsx
         Header.scss
    /utils
    index.js"

在我的App.jsx（导入示例）

import Header from './Header.jsx
import appSass from './App.scss'

Answer 1

有很多组织文件的好方法，我目前正在参加一个编码训练营，他们向我们展示了这个组织过程：

/src
    /components
        /app
            index.js
            app.scss
        /header
            index.js
            index.scss
    /lib
        util.js
    /style
        main.scss
        _reset.scss
        _vars.scss
        _layout.scss
        _base.scss
    main.js

在您的 main.js 中，您可以导入您的应用程序组件：

import App from './component/app'

并且在您的 app.js（和其他组件）中，您可以使用以下方式导入：

import Header from './header'

我发现这是一种很好的方式，可以让事情井井有条，并使您的导入更加统一，而无需弄清楚每个组件存储在哪个目录级别。

这也是组织 sass 文件的好方法，在 style 目录中，您拥有与整个应用程序的样式有关的所有 sass 文件。 main.scss 导入其他文件并指定您要首先应用的 scss（通常是 reset/normalize）。每个组件目录还将包含一个 sass 文件，该文件将指示该单个组件的样式。

如何组织他的项目 React（没有 Redux）的文件？

How to organize the file of his project React (without Redux)?

organizer

reactjs