Export React child components from single file

When coding a React app, I always find it anoying having to import each child component one line at a time, often in several files. This takes lines of code and is not DRY.

import Login from './Components/Login';
import Signup from './Components/Signup';
import BlaBla from './Components/BlaBla';

Moreover, you cannot do CTRL + space bar to see what names are available for import. It would be so much handy if I could do something like:

import { Login, Signup, BlaBla } from './Components/Singlefile'; 

You can by creating what I call a exporter file (I just made it up). The file would be something like:

import Login from './Login';
import Signup from './Signup';
import BlaBla from './BlaBla';

export { Login, Signup, BlaBla };

So in the rest of the files where Components need to be imported, it is just a line of code:

import { Login, Signup, BlaBla } from './Components/Exporter';

And you can use the CTRL + Space bar within the { } to find what you are looking for without typing. You still need to type all imports in the Exporter file but you will only have to do it once.

Edit

User @futureistaken pointed me to re-exports. I had no clue about it, so I googled it and found a nice explanation here. Basically it is a way to import and export in a single line. In my case, because I am exporting my components with export default it would be:

export { default as Login } from './Login';
export { default as Signup } from './Signup';

Otherwise, it would be:

export { Login } from './Login';
export { Signup } from './Signup';

Nicer and sweeter!

Comments

[R Z]

It is so pity that you don't know about re-export. Google it and you will be very impressed.

[Pere Sola]

oh, nice, looks shorter and sweeter indeed javascript.info/import-export#re-e... thanks for sharing it

[Mukadas Maltiti]

Thanks, I was struggling to export some images, this helped a lot