为初学者

Question

我对React哲学并不陌生，并且已经阅读并关注社区很长一段时间了，但在实际构建某些东西时仍然会认为自己是初学者。因此，我已经决定作为一个小业余爱好项目，我实际上只需要开始构建一些东西，而不是阅读有关它如何完成的无数篇文章。

我不知道实际的应用程序将会做什么，但我现在所建立的内容已足以让我提出关于如何以最佳实践方式构建它的紧迫问题。

当前的应用结构

现在，这是我的应用程序的当前布局结构。

截至目前，我已经下载了一个已经为我编写了webpack配置的入门模板，所以现在，我会忽略“src”文件夹中的assets文件夹，因为我甚至没有用它来为我服务css和图像。那些是从dist文件夹提供的，我知道这不是正确的方法，但是嘿，我只能立刻做这么多。

重要资料

我最需要帮助的是我的组件的实际结构。我一直在读CSS模块是一个很好的方法，所以我想做那样的事情。

应用目前如何运作

1. Index.js包含路由信息。我正在使用React Router。
2. App.js是该应用程序的主要组件。
3. 如您所见，我的导航栏组件位于App.js文件旁边，因为我打算在那里添加页脚组件。这两个组件在整个应用程序中是全局的，并且将始终位于浏览器中的相同位置。 （不确定这是不错的做法。）
4. 在App.js内部，我渲染了navbar组件，并包含{this.props.children}，它只是从React Router中呈现内容。
5. 从那里开始，我基本上在components文件夹中创建了另外两个文件夹，标题为“landing”＆amp; “登录”。这些文件夹包含一个主要组件，然后在其中呈现其他子组件。我以为每个文件夹都应该有自己的css文件。

随着我继续构建应用程序功能和组件，这是一个很好的格式吗？从逻辑上讲，我不知道如何配置为这些模块提供服务的css文件，但希望我的工作原理是正确的。

总结

只是为了确保我一目了然，比如说我决定现在要构建一个仪表板组件。根据我刚才的解释，我的思考过程是在主要组件文件夹中创建一个名为“dashboard”的子文件夹，为它创建一个父组件，然后创建其他几个子组件。然后我也会把.css文件放在那里。

这是github repo的链接，因此您可以准确地看到它是如何布局的。

Github Repo

Working version of the app

为冗长的问题道歉，但我想确保我正确地解决了所有问题。我们非常欢迎任何其他建议。

Answer 1

没有正确或错误的答案或者这个答案。你必须适应你的项目需求，注意什么是最好的，什么不是。

在实践中，一些结构已被证明非常有用：

1. 按主题分割： 这通常意味着为您的应用中的每个“类型”或主题设置一个文件夹。例如：组件，工具，媒体等。

components文件夹可以包含其他文件夹，用于将组件及其.css文件，测试和其他补充代码分组。

此结构特别适合像redux这样的状态处理框架，您可能需要一个用于操作和操作创建器的文件夹，一个用于reducers的文件夹，一个用于存储配置和创建的文件夹等等。

1. 按应用部分拆分 这意味着您可以根据应用的逻辑部分拆分代码。假设您有一个带有启动画面动画的登录表单，所有这些都将位于“登录”文件夹中。如果您的用户个人资料页面包含一些仪表板，那么所有这些以及他们使用的组件都将进入“user_profile”文件夹。

不要过分折磨你自己是否以完美的方式做到这一点，因为没有完美的方法。只需选择合适的结构，使其适合您的项目需要并随之而去。

重要的是要注意结构发生故障时的情况。例如，如果您发现正在对应用程序进行更改，并且您发现当前的结构使得重构或添加功能变得困难，或者可能会变得过于混乱，那么请考虑更改项目的结构。