Export react jsx-components in index.js files

Question

How can I bundle react-components, defined in jsx-files, in an index.js file?

In a way that the components can be accessed by import module from "/module"; let C = module.Component; import module from "/module"; let C = module.Component; .

With:

/module
  index.js
  Component.jsx

Answer 1

To re-export the component as a default export:

export { default } from './Component';

To re-export the component as a named export:

export { default as NamedComponent } from './Component';

You should prefer exporting as default from index.js since it will likely be the only export from the index.

Your component import will look like this:

import Component from './module';

or this, if you use a named export:

import { NamedComponent } from './module';

Assuming you're using webpack to bundle your files, to make sure your imports can use './Component' instead of './Component.jsx' , include .jsx as an extension in your resolve property in webpack.config.js :

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Answer 2

export Component from "./Component"

You should not use export default for your use case. There is only a single default export per module. This value is to be considered as the "main" exported value since it will be the simplest to import. Refer https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export for more detail

Answer 3

Inside index.js

export { default as ComponentName } from './Component';

Then In App.js [Import it Like this]

import {ComponentName} from './module'