reactjs - react 前端最合适的文件夹布局是什么？

Question

最近，我对 React 产生了兴趣，因为我相信它会让我有希望在不久的将来找到一份工作。我已经相当了解 Laravel PHP，但是在寻找工作时似乎并没有减少它。
到目前为止，我已经成功地制作了一个单页 twitter 克隆，我希望能够使用 firebase 来存储和返回推文。
我还想添加多个页面，也许还有某种身份验证系统。
但是，为了做到这一点，我需要使用 react 的路由器。
我当前的文件夹设置如下 所示。

但是，对于只有一个页面的应用程序来说，这很好用，但是我不确定它如何与多个页面一起工作以及我应该如何布局。
例如，我应该有一个名为 pages 的文件夹吗？然后每个页面都有一个文件夹，然后在这些页面中，Page.js 组件，然后是该页面的组件文件夹？这是我目前的想法，但我对处理这个问题的最佳方法一无所知。
我认为如果我可以拥有一个存储所有组件的大文件夹，这样我可以随时重复使用它们会很酷。
提前致谢。

标签： reactjsnpm

Answer 1

创建一个“好的”反应应用程序的关键是抽象。如果一个组件正在做两件事，请将其分解为两个组件。这里的想法是，您将开始注意到组件中的冗余，您可以将相似的组件转换为多次使用的单个组件。这也是为什么最好事先彻底规划您的应用程序。

考虑到所有这些，最佳做法是在“src”文件夹中有一个专用的“Components”文件夹。在顶层，这将包含通常重用的 UI 组件（列表、模式、卡片、按钮等）。这些组件文件夹中的每一个都是大写的，并且还将存储任何“子组件”。子组件的一个示例是标题组件中的下拉菜单组件。每个组件文件夹将如下所示：

components
|  Header
|  |  DropDownMenu
|  |  |  index.js
|  |  |  style.css
|  |  NavButton
|  |  |  index.js
|  |  |  style.css
|  |  index.js
|  |  style.css

除了组件之外，还可以为更高级别的属性或库组创建文件夹；例如，包含应用程序不同页面的“页面”或“路线”文件夹。另一个很好的例子是 Redux 的单独文件夹来管理操作、reducers 和存储......或者可能是本地图像和 svgs 的媒体文件夹。

这是一个小型 React 应用程序文件夹结构的简单模板：

src
|  firebase
|  |  firebaseConfig.js
|  components
|  |  Component
|  |  |  SubComponent
|  |  |  |  index.js
|  |  |  |  style.css
|  |  |  index.js
|  |  |  style.css
|  media
|  |  images
|  |  |  image.png
|  |  svgs
|  |  |  image.svg
|  pages
|  |  Home.js
|  redux
|  |  actions
|  |  |  action.js
|  |  reducers
|  |  |  reducer.js
|  |  store.js
|  |  types.js
|  App.css
|  App.js
|  index.css
|  index.css