Я только что начал новый проект React и решил использовать этот шаблон, который в основном группирует файлы в соответствии с их соответствующим компонентом:
├── actions
│ ├── LaneActions.js
│ └── NoteActions.js
├── components
│ ├── App
│ │ ├── App.jsx
│ │ ├── app.css
│ │ ├── app_test.jsx
│ │ └── index.js
│ ├── Editable
│ │ ├── Editable.jsx
│ │ ├── editable.css
│ │ ├── editable_test.jsx
│ │ └── index.js
...
│ └── index.js
├── constants
│ └── itemTypes.js
├── index.jsx
├── libs
│ ├── alt.js
│ ├── persist.js
│ └── storage.js
├── main.css
└── stores
├── LaneStore.js
└── NoteStore.js
Меня смущает то, как index.js работает в этом случае. Как указано:
Файлы index.js содержат удобные точки входа для компонентов. Несмотря на то, что они добавляют шум, они упрощают импорт.
То, что статья не делает, - это глубина того, что внутри этих файлов. В случае Editable компонента, как бы выглядели Editable.jsx
и index.js
?