Какой лучший способ структурировать приложение React со страницами CRUD?

Question

Извините, если заголовок не имеет смысла, но под страницами CRUD я подразумеваю такие страницы, как /posts для отображения всех сообщений, /posts/create для отображения формы для создания сообщения, /posts/:id/edit для отображения указанной формыно с данными для обновления

В настоящее время у меня есть следующая структура:

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

hoc
--PostHOC.js

Post / index.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)

Я нашел в Google хорошие способы структурирования CRUD-страниц с помощью React, но, к сожалению, я не смог их найти.Поэтому я решил спросить здесь вместо этого.Любые советы о том, как я могу улучшить это?Кроме того, для краткости я оставил некоторый код, но я считаю, что этого достаточно, чтобы все поняли, что я пытаюсь сделать.

Answer 1

React не имеет мнения о том, как вы помещаете файлы в папки.Тем не менее, есть несколько распространенных подходов, популярных в экосистеме, которые вы можете рассмотреть.

Все это действительно зависит от уровня сложности вашего приложения, но вот несколько способов рассмотреть:

• Группировка по функциям или маршрутам - [Один из распространенных способов структурирования проектов - это найти CSS, JS и т. Д. Внутри папок, сгруппированных по функциям или маршруту.]

---

• Группировка по типу файла - [Еще один популярный способ структурирования проектов - группировка похожих файлов]

---

• Отдельнокомпоненты в разные папки в зависимости от их роли в приложении - [Это подход, который я обычно использую, и ИМХО, он лучший, потому что по мере роста вашего проекта (надеюсь) вы будете гораздо лучше понимать, где находятся ваши основные компонентыи функции расположены и как все сходится.]

Дополнительные советы: Не задумывайтесь над этим - Особенно не в начале.Если вы только начинаете проект, не тратьте больше пяти минут на выбор структуры файла.Выберите любой из вышеперечисленных подходов (или придумайте свой собственный) и начните писать код!Вы, вероятно, захотите переосмыслить это в любом случае после того, как вы написали какой-то реальный код.По мере роста проектов мы часто используем на практике все вышеперечисленные подходы.Поэтому выбор «правильного» в начале не очень важен.

То есть сосредоточиться на коде.Удачи в изучении React и счастливого взлома;)