title: How do index.js files work in React component directories?
body: <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>