Export multiple react objects from other dirs

Question

I'm very new to React so please excuse my ignorance. I basically want to know the "way" to export multiple ReactJS objects from directories for larger codebases and best practices. This is not really in the ReactJS tutorial.

Let's say I have a file ./main.js and I want to import a lib (from a dir because I might have other ones).

Let's say I have a library in a dir ./library_dir/my_lib.js and I want to use it in ./main.js like so.

In ./main.js, I might want to use this lib and initialize some ExampleComponent like this:

var my_lib = require('./library_dir/my_lib.js');

ReactDOM.render(
(<BrowserRouter>
        <Switch>
                <Route exact path="/component_route" component={my_lib.ExampleComponent}>
        </Switch>
</BrowserRouter>)
, document.getElementById("root"));

So in ./library_dir/my_lib.js, I want to be able to export MULTIPLE reactjs classes. How would I do this?

Would I want to use export default .... or module.exports? Which one and WHY? I've read that if I import react in this lib, I can't do a module.exports.

Can someone give me an example where in ./library_dir/my_lib.js, I would be able to export multiple react classes that would look something like this?

import React from 'react';

my_lib = { 
        test_function: function() {
                alert("TEST FUNCTION CALLED");
        },  
        // How would I do this bellow?
        ExampleComonent: class ExampleComponent extends React.Component {
                constructor(props) {
                        super(props);
                        // doing all thing things...
                }
                render() {
                        return (
                        <h1>This is ExampleComponent.</h1>
                        );
                }
        }   
        // I need to be able to export multiple components, so here's another one.
        ExampleComonentTwo: class ExampleComponentTwo extends React.Component {
                constructor(props) {
                        super(props);
                        // doing all thing things...
                }
                render() {
                        return (
                        <h1>This is ExampleComponentTwo.</h1>
                        );
                }
        }
}

export default my_lib;

Have you checked this one https://stackoverflow.com/questions/30762734/multiple-react-components-in-a-single-module ? — Santosh Shinde, Dec 07 '17 at 04:49

score 0 · Answer 1 · answered Dec 07 '17 at 05:09

As we know module is a plain JavaScript object with an exports property. exports is a plain JavaScript variable that happens to be set to module.exports. And export default is syntax from ES6.

Many people consider module.exports = ... to be equivalent to export default ... and exports.foo ... to be equivalent to export const foo = .... That's not quite true though, or at least not how Babel does it.

ES6 default exports are actually also named exports, except that default is a "reserved" name and there is special syntax support for it. Lets have a look how Babel compiles named and default exports:

// input
export const foo = 42;
export default 21;

// output
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = exports.foo = 42;
exports.default = 21;

Here we can see that the default export becomes a property on the exports object, just like foo.

I would like to suggest to you use one index.js file, where you have to export your components from lib and use them in your actual implementations.

I think following links will help you in more to resolve your problems.

Hope this will help you !!

Export multiple react objects from other dirs

1 Answers1