javascript - 使用 CRUD 页面构建 React 应用程序的更好方法是什么？

Question

如果标题没有意义，我很抱歉，但对于 CRUD 页面，我的意思是像 /posts 这样的页面显示所有帖子，/posts/create 来显示创建帖子的表单，/posts/:id/edit 显示所述表单但要更新数据

目前，我有以下结构:

Post
--index.js
--form.js
--edit.js
--create.js
--list.js

hoc
--PostHOC.js

后/index.js

import PostList from './list';

class Post extends Component {
    render() {
      <PostList posts={this.props.posts} /> // extracted from Redux
    }
}

发布/list.js

const List = ({ posts }) => {
  const postList = posts.map(post => (
    <div>
      { post.title }
    </div>
  ));

  return (
    <div>{ postList }</div>
  );
}

发布/form.js

const Form = props => {
  return (
    <SomeImportedForm>
      <Input defaultValue={this.props.title} /> // extracted from HOC
    </SomeImportedForm>
  );
}

export default PostHOC(Form);

然后 Post/edit.js 和 Post/create.js 基本上看起来是一样的(我只是导入了 form.js 给他们，我可能会删除两者，只显示表单并根据 url 呈现数据)

我在谷歌上搜索过使用 React 构建 CRUD 页面的好方法，但遗憾的是我找不到任何方法。所以我选择在这里问。关于如何改进这一点的任何提示？此外，为简洁起见，我省略了一些代码，但我相信这足以让每个人理解我正在尝试做的事情。

Answer 1

React 对您如何将文件放入文件夹没有意见。也就是说，您可能需要考虑生态系统中流行的几种常见方法。

这完全取决于您的应用的复杂程度，但这里有几种方法可供考虑:

• 按功能或路由分组 -[构建项目的一种常见方法是将 CSS、JS 等放在按功能或路由分组的文件夹中。]

---

• 按文件类型分组 -[另一种构建项目的流行方式是将相似的文件分组在一起]

---

• 根据组件在应用程序中的作用将组件分成不同的文件夹 -[这是我通常采用的方法，恕我直言，这是最好的方法，因为随着项目(希望如此)的增长，您将拥有更清楚地了解主要组件和功能的位置以及所有内容如何组合在一起。]

其他建议:不要想太多 - 尤其是在开始的时候。如果您刚刚开始一个项目，选择文件结构的时间不要超过五分钟。选择上述任何一种方法(或想出你自己的方法)并开始编写代码!在你写了一些真正的代码之后，你可能会想要重新考虑它。随着项目越来越大，我们经常在实践中混合使用上述所有方法。因此，一开始选择“正确”的并不是很重要。

意思是，专注于代码。祝你学习 React 和快乐的黑客 ;)