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

Posted 2023-03-06

【中文标题】如何组织他的项目 React（没有 Redux）的文件？

【英文标题】：How to organize the file of his project React (without Redux)?

【发布时间】：2017-11-09 23:11:56

【问题描述】：

目前我使用 sass、images 和 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'

【参考方案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（通常是重置/标准化）。每个组件目录还将包含一个 sass 文件，该文件将指示该单个组件的样式。

【讨论】：

谢谢，但是如何导入“app.scss”，在哪个文件中？

在app目录下的index.js中