JS: React and global namespace pollution

Question

I'm considering to use react in a new website and I'm still wondering, how to handle the global namespace with react components. For example, if I define several React Components like this:

var MySlider = React.createClass({ // snip });
var MyAlert = React.createClass({ // snip });
var MyDropdown = React.createClass({ // snip });

Rendering a component would look like this:

React.renderComponent(
    <MySlider />,
    document.getElementById('content')
);

However, I'd prefer to namespace my components to avoid polluting the global namespace.

var Namespace = {};
Namespace.MySlider = React.createClass({ // snip });

When it comes to rendering, the component is not found due to namespacing, I guess.

React.renderComponent(
    <Namespace.MySlider />, // component is not found
    document.getElementById('content')
);

What am I missing here? Just ignore global namespace pollution? Or is there a possibility to namespace your components?

Thanks!

Right now that syntax doesn't work but may in the future. ssorallen's answer is correct; module systems are recommended. — Sophie Alpert
– Sophie Alpert, Commented Mar 19, 2014 at 17:01
As @BenAlpert alluded to earlier, JSX namespacing was added in React 0.11.0. It is still recommended to use a module loader, but you can now use namespaces as you were hoping to in your example. — Ross Allen
– Ross Allen, Commented Sep 11, 2014 at 7:11

Ross Allen · Accepted Answer · 2019-05-15 03:39:17Z

10

This is not exactly a React JS question since any large JavaScript codebase has to deal with module loading. I suggest forgoing namespacing in JavaScript the way you started to approach it and instead use a module loader.

You will get many opinions on this, but look at some of the widely-used module loaders:

edited May 15, 2019 at 3:39

answered Mar 19, 2014 at 16:40

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

algi Over a year ago

Thanks for the explanation! I'll definitely take a look.

hiphapis · Accepted Answer · 2014-04-07 00:34:06Z

6

this code is work.

React.renderComponent(
    Namespace.MySlider(),
    document.getElementById('content')
);

See the documentation for more information.

edited Apr 7, 2014 at 0:34

answered Apr 7, 2014 at 0:10

hiphapis

1501 silver badge10 bronze badges

Collectives™ on Stack Overflow

JS: React and global namespace pollution

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related