ReactJS 文件夹结构答案

【问题标题】：ReactJS Folder structuresReactJS 文件夹结构
【发布时间】：2018-08-14 21:54:41
【问题描述】：

我正在努力理解 React 应用程序的基于组件的文件夹结构。在我学习的过程中，有很多不同的观点，而对我来说最自然的观点是按组件对代码进行分组。不过我可能理解错了。

在我的应用程序中，我有一个共享的页眉和页脚、导航栏，然后是我分组到我的组件中的页面。我的登录页面，我的注册页面，我的登陆（主页）页面。（我也有“关于”和“联系我们”。

但是这种结构看起来很奇怪。我不认为我做得对。常见项目应该放在哪里（导航栏、页脚等）。

我的路也越来越长了。

import fetchData from '../../helpers/fetchData.js';

任何建议或指针都会很棒。我应该如何构建我的文件夹？由于这将成为一个有大约 20 个屏幕的大型应用程序，这可能会变得一团糟。

【问题讨论】：

不幸的是，这对本网站来说不是一个好问题，因为它主要是基于意见的。您可以以任何您认为合适的方式来组织您的文件夹结构，并简化您的工作流程。
我认为您的文件夹结构没有任何问题。正如@Herohtar 所提到的，这完全基于意见和意见不同。对于我的大多数 React 项目，以及我正在处理的高流量网站，我们使用的结构与您所拥有的相对相似。我的公共项目的一些示例结构github.com/mosufy/serverless-react/tree/develop/client/site/src
谢谢各位。我认为这可能有点过于基于意见了。不过，我不确定在哪里可以获得有关此类主题的指导。感谢您的输入。已经很有帮助了。
查看此答案以获得最佳文件夹结构stackoverflow.com/questions/51195270/…

标签： javascript reactjs

【解决方案1】：

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

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

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

在你做完created a production build之后

//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

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

如果您将来需要更新某些内容，请尝试使其简单化，这样就不会花费一段时间来重新理解，只需按照您觉得舒服的方式进行即可。

为什么images文件夹里面有一个JS文件？

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

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

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

第一种方式：因为不能使用导入路径，所以必须在public文件夹中创建一个images文件夹并使用这段代码

 //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中导入该组件的所有延迟图像并将其命名为相关组件名称（它将让您知道此图像文件的用途。）

images.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" />

Unable to load images from local library in React.js

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

这将压缩 JS 代码使其更小 — 你可以使用 UglifyJsPlugin 也会丑化 CSS，这与名称相反会建议

看看这个对你也有帮助

How to Organize React Files Before It’s Messed Up?

【讨论】：