在学习 React 时，这个问题几乎让所有开发人员感到困惑。

React 足够聪明，可以组织您所有的文件应用程序。

您需要知道的重要一点是，当您完成并为您的应用程序创建生产版本时，您的所有 CSS 文件都将位于一个文件中，所有组件以及所有图像、图标都将仅位于一个 JS 文件中。 ..etc 将位于名为media.

你做了之后创造了一个生产版本做

//If your project is built with Create React App, run
npm run build

您将build在此文件夹中仅获得一个名为“ ”的文件夹，index.html 并且 该文件static夹中只有一个 CSS 文件和一个 JS 文件以及媒体文件夹，如上所述。此文件夹中的文件需要将它们上传到您的站点

所以你现在真正需要做的是：

您不必为每个组件创建特定的 CSS 文件

您可以简单地在公共文件夹中仅创建一个文件并将其链接到index.html文件中，这样您的所有组件都可以轻松访问此 CSS 文件。

 <link rel="stylesheet" href="styles.css">

您可以创建Services文件夹将包含所有应用程序操作，例如

/app
    /layout
      /header.js
      /footer.js
/members
    /Sign
      /index.js

    /Register
      /index.js    

    /Profile
      /index.js

/services
    /members
      /actions.js
      /reducer.js//in case if you're using redux
    /panel
      /actions.js
      /reducer.js//in case if you're using redux

/media
    /images
      /images.js // why JS file here?? read below
      /logo.svg
      /cover.svg
      /profile.svg
      /body.svg

重要的是使文件夹结构易于您理解，并尽量不要通过创建许多不需要在单个文件中的文件来使其混乱。

以后如果您需要更新某些内容，请尝试使其变得简单，这样您就不会花很长时间重新理解，只要让您感觉舒服就可以了。

为什么图像文件夹中有一个JS文件？

你有很多方法来处理你的图像，但是如果你需要在一个组件中包含数百个图像，你会像这样导入它们吗？

import logo from '../images/logo.svg';
import cover from '../images/cover.svg';
import profile from '../images/profile.svg'; // ...etc

我知道这对您来说没有意义，我将向您展示两种处理数百张图像的方法

第一种方式：因为你不能使用导入路径，你必须在公共文件夹中创建一个图像文件夹并使用此代码

 //This is the regular way.

  <img src={process.env.PUBLIC_URL + 'images/profile.svg'} width={"200"} height={"200"} className="profile-img" alt="profile" />

第二种方式：你可以指定每个组件有一个images.js文件，然后导入该组件的所有延迟图像images.js并将其命名为相关组件名称（它会让你知道这个图像文件的用途。）

图像.js

import logo from './logo.svg';
import cover from './cover.svg';
import profile from './profile.svg';
import background1 from './body.svg';
export default {
    logo,
    cover,
    profile,
    background1
}

然后在您的组件中，您只需导入images.js文件：

import images from './images';

然后调用任何你想要的 img：

   <img src={images.logo} className="App-logo" alt="logo" />
      <img src={images.cover} className="App-logo" alt="logo" />
      <img src={images.profile} className="App-logo" alt="logo" />
      <img src={images.background1} className="App-logo" alt="logo" />

无法从 React.js 中的本地库加载图像

最后，我更喜欢您在生成生产版本时使用的是minify和uglify

这将压缩 JS 代码使其更小——您可以使用 UglifyJsPlugin，它也可以丑化 CSS，这与名称所暗示的相反

看看这个，它也会帮助你

如何在 React 文件搞砸之前组织它？