title: How to import all components in React?
body: <p>I want to do this </p>
  
  <p>in <code>src/modules/layout/nav.js</code>
  </p>
  
  <pre><code>...
  export default NavBar;
  </code></pre>
  
  <p>in <code>src/modules/layout/side.js</code>
  </p>
  
  <pre><code>...
  export default sideBar;
  </code></pre>
  
  <p>in <code>src/modules/layout/index.js</code>
  </p>
  
  <pre><code>import NavBar from './nav';
  import sideBar from './side';
  export { NavBar, sideBar };
  </code></pre>
  
  <p>in <code>src/modules/index.js</code>
  </p>
  
  <pre><code>import * from './layout';
  </code></pre>
  
  <p><strong>The last bit does not work</strong>. According to the tutorial I would then be able to go to <code>src/App.js</code> and use the <code>navBar</code> as so:
  </p>
  
  <p>import {navBar} from './modules';</p>
  
  <p>But the fact that <code>*</code> does not work I can't do that. Is there any alternative without having to go like this </p>
  
  <p>in <code>src/modules/index.js</code>
  </p>
  
  <pre><code>import * as All from './layout';
  export All;
  </code></pre>
  
  <p>Then in <code>App.js</code>, go <code>All.navBar</code>. That feels ugly</p>