Reactjs 什么';react前端最合适的文件夹布局是什么?
最近,我对React很感兴趣,因为我相信它能让我在不久的将来找到一份工作。我对Laravel PHP已经相当了解,但在找工作时,这似乎并没有减少它的影响。Reactjs 什么';react前端最合适的文件夹布局是什么?,reactjs,npm,Reactjs,Npm,最近,我对React很感兴趣,因为我相信它能让我在不久的将来找到一份工作。我对Laravel PHP已经相当了解,但在找工作时,这似乎并没有减少它的影响。 到目前为止,我已经成功克隆了一个单页twitter,我希望能够使用firebase来存储和返回推文。 我还想添加多个页面,也许还有某种身份验证系统。 然而,为了做到这一点,我需要利用react的路由器。 我当前的文件夹设置看起来像 对于一个只有一个页面的应用程序来说,这很好,但是,我不确定它如何处理多个页面,以及我应该如何布局。 例如,我应
到目前为止,我已经成功克隆了一个单页twitter,我希望能够使用firebase来存储和返回推文。
我还想添加多个页面,也许还有某种身份验证系统。
然而,为了做到这一点,我需要利用react的路由器。
我当前的文件夹设置看起来像 对于一个只有一个页面的应用程序来说,这很好,但是,我不确定它如何处理多个页面,以及我应该如何布局。
例如,我应该有一个名为pages的文件夹吗?然后为每个页面创建一个文件夹,然后在这些页面中创建page.js组件,然后为该页面创建一个组件文件夹?这是我目前的想法,但我完全不知道如何最好地处理这个问题。
我想如果我能有一个大文件夹来存储所有组件,这样我就可以随时重用它们,那就太酷了。
提前感谢。创建“好”react应用程序的关键是抽象。如果一个组件正在做两件事,请将其分解为两个组件。这里的想法是,您将开始注意到组件中的冗余,您可以将类似的组件转换为多次使用的单个组件。这也是为什么事先彻底计划好你的应用程序是最好的 考虑到所有这些,最好的做法是在“src”文件夹中有一个专用的“Components”文件夹。在顶层,这将包含通常重用的UI组件(列表、模态、卡片、按钮等)。每个组件文件夹都大写,并且还将存储任何“子组件”。子组件的一个示例是标题组件中的下拉菜单组件。每个组件文件夹的外观如下所示:
components
| Header
| | DropDownMenu
| | | index.js
| | | style.css
| | NavButton
| | | index.js
| | | style.css
| | index.js
| | style.css
除组件外,为更高级别属性组或库创建文件夹;例如,“页面”或“路由”文件夹,其中包含不同页面的应用程序。另一个很好的例子是一个单独的文件夹,用于Redux管理操作、缩减器和存储。。。或者是本地图像和SVG的媒体文件夹
下面是一个用于小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
React在文件夹结构方面不受限制。检查他们的。因为这没有正确的答案,所以它不属于SO。啊,对了,我明白了。因此,页面不是围绕着页面,而是沿着组件存在。