How do index.js files work in React component directories? : <p>I just started a new React project and decided to use <a href="https://survivejs.com/react/advanced-techniques/structuring-react-projects/" rel="noreferrer">this</a> pattern, which basically groups files according to their respective component:</p>

<pre><code>├── 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
</code></pre>

<p>What's confusing me is how index.js works in this case. As quoted:</p>

<blockquote>
  <p>The index.js files are there to provide easy entry points for
  components. Even though they add noise, they simplify imports.</p>
</blockquote>

<p>What the article doesn't do is go in depth of what's <em>inside</em> these files. In the case of the Editable component, what would <code>Editable.jsx</code> and <code>index.js</code> ideally look like?</p>
