How to import all components in React?

Question

I want to do this

in src/modules/layout/nav.js

...
export default NavBar;

in src/modules/layout/side.js

...
export default sideBar;

in src/modules/layout/index.js

import NavBar from './nav';
import sideBar from './side';
export { NavBar, sideBar };

in src/modules/index.js

import * from './layout';

The last bit does not work. According to the tutorial I would then be able to go to src/App.js and use the navBar as so:

import {navBar} from './modules';

But the fact that * does not work I can't do that. Is there any alternative without having to go like this

in src/modules/index.js

import * as All from './layout';
export All;

Then in App.js, go All.navBar. That feels ugly

Answer 1

Well, I have gone through what you have; I feel what you actually needed is to understand the reason for doing that. I am pretty sure what you want to achieve is to have your components imported from a single file rather than from the files where the components were exported.

You don't want to do this:

import NavBar from 'src/modules/layout/NavBar';
import SideBar from 'src/modules/layout/SideBar';

But what you want is to import all your components from a single file wherever you would want to use them. So, if that is the case, you don't need to add more complexities. All you just need to do is:

// export the components like this
export default NavBar;
export default SideBar;

// Then, in your src/modules/layout/index.js file, import // the components you exported just the way you did it

import NavBar from './NavBar';
import SideBar from './SideBar';

export {
NavBar,
SideBar
}

// Hence, wherever you need both components, you can easily do this:
import { NavBar, SideBar } from '../index.js'

// From the above, you are just importing both components from the index.js file. 

So, I believe that answers your question.

Answer 2

Just to add to Onyekachi Samuel's answer and to answer the all part of the title:

After creating the src/modules/layout/index.js file as he described, you can import all by:

import * as All from './layout'

And use the exported components:

<All.NavBar/> <All.SideBar/>

For instance:

// Folder structure:
//    |-App.js
//    |-Layout
//        |-NavBar.js
//        |-SideBar.js
//        |-index.js


// App.js in the same location as Layout folder

import React from 'react';
import * as All from './layout'

export default function App(props) {

    return (<div>
                <All.NavBar/>
                <All.SideBar/>
           </div>)
}

Hope this might clarify it for some.