为初学者构建React App

Question

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

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

当前的应用结构

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

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

重要的东西

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

该应用程序目前如何工作

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

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

包起来

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

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

Github Repo

该应用程序的工作版本

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

Answer 1

没有正确或错误的答案或这个。 您必须适应您的项目需求，并注意哪些最有效，哪些无效。

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

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

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

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

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

如果你以完美的方式做这件事，不要过分折磨自己，因为没有完美的方法。 只需选择合适的结构，以满足您的项目需求并随之使用。

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