7

In my react component directory, I setted index.js here.

import App from './App';
import Main from './Main/Main';
import Best from './Main/Best';
import Club from './Main/Club';
import Post from './Main/Post';

import Sidebar from './Sidebar/Sidebar';

export { App, Main, Best, Club, Post, Sidebar };

Usage in other js,

import {
    App,
    Main,
    Best,
    Club,
    Post,
    Sidebar
} from '../scripts/Containers/index';

But whenever I make component like that, should I have to write import / export statements index.js there? Is there any magical way?

Please help me to solve out this problem!

Update (with @Bergi)

I modifed like this, and it works well.

export { default as App } from './App';

export { default as Header } from './Header/Header';

export { default as Main } from './Main/Main';
export { default as Best } from './Main/Best';
export { default as Club } from './Main/Club';
export { default as Post } from './Main/Post';

export { default as Sidebar } from './Sidebar/Sidebar';

But this didn't work

export * from './App';

export * from './Header/Header';

export * from './Main/Main';
export * from './Main/Best';
export * from './Main/Club';
export * from './Main/Post';

export * from './Sidebar/Sidebar';

In order to works with above code, I changed this in component

export default class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

to

export class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

I deleted export default module exports! And works second export way works(not first one)

Thanks @Bergi :)

But I think that dynamically import / export won't be able to use.

Maybe this is best way I think.

bsdo64
  • 216
  • 2
  • 12
  • Sounds like a duplicate of [import modules from files in directory](http://stackoverflow.com/q/29722270/1048572) to me. Or are you looking for a way to dynamically generate such an `index.js` file? – Bergi Nov 26 '15 at 11:01
  • You can avoid repeating each module's name using `export … from …;` – Bergi Nov 26 '15 at 11:03
  • @Bergi In above my post, example code just say 6 components. But for example, If there were many folders and files in react component directory, I have to declare many import ... from ...;. It's so repetitive I think – bsdo64 Nov 26 '15 at 12:27
  • Why do you have to `import` all of them in your other.js at all? – Bergi Nov 26 '15 at 12:31
  • @Bergi Actually, I want to use each component with router(react-router). Because I'm implementing universal react, so I decided to seperate route module. I want to use that components in the route. – bsdo64 Nov 26 '15 at 12:43
  • And to import subordinative components in another component. – bsdo64 Nov 26 '15 at 12:46
  • You should use export default and then you will be able to import all props from this module like `import { someprops } from 'file'` –  Nov 26 '15 at 13:15

0 Answers0