I just started a new React project and decided to use this pattern, which basically groups files according to their respective component:
├── 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
What's confusing me is how index.js works in this case. As quoted:
The index.js files are there to provide easy entry points for components. Even though they add noise, they simplify imports.
What the article doesn't do is go in depth of what's inside these files. In the case of the Editable component, what would Editable.jsx
and index.js
ideally look like?