有什么更好的方法来构造带有CRUD页面的反作用应用程序呢？

Question

如果标题没有意义的话，我很抱歉，但是说到CRUD页面，我的意思是像/posts这样的页面显示所有的帖子，/posts/create用来显示表单以创建一个post，/posts/:id/edit用来显示上述表单，但是需要更新数据

目前，我的结构如下：

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

hoc
--PostHOC.js

员额/索引

import PostList from './list';

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

Post/list.js

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

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

Post/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没有意见。也就是说，在生态系统中有几种常见的方法你可能会考虑。

这一切都取决于应用程序的复杂程度，但以下是一些考虑的方法：

• 按特性或路由分组 -One项目的常见方法是在按功能或路由分组的文件夹中定位CSS、JS等。
• 按文件类型分组 -Another结构项目的流行方法是将类似的文件分组在一起
• 将组件分离到不同的文件夹中，这取决于它们在应用程序中的角色， -This是我通常采用的方法，而IMHO是最好的方法，因为随着您的项目(希望如此)的增长，您将更加了解主要组件和特性的位置以及所有组件和功能是如何组合在一起的。

其他建议：不要想得太多， -Especially，不要在一开始就这么想。如果您刚刚开始一个项目，请不要在选择文件结构上花费超过五分钟。选择上述任何一种方法(或者想出自己的方法)并开始编写代码！在编写了一些真正的代码之后，您可能会想要重新考虑它。随着项目规模的扩大，我们经常在实践中混合使用上述所有方法。所以，在开始的时候，选择“正确的”并不是很重要。

意思是把注意力集中在代码上。祝你在学习React和快乐黑客方面好运;)