javascript - How to namespace es6 classes (for React components)

Question

This is part ES6 question part React question. I'm trying to use namespaced components in React with ES6 classes and Babel. So I guess the real question is how to name space es6 classes so I can do what is explained here: https://facebook.github.io/react/docs/jsx-in-depth.html#namespaced-components

Since I get an unexpected token error:

class Headline extends Component { ... }

class Headline.Primary extends Component { ...
              ^

Answer 1

The ECMAScript-6 class declaration syntax expects a standard BindingIdentifer as the class name. A dot is not a valid character inside an identifier name.

In the context used in the link in OP, the "namespace" is an object, and properties are added to that object one by one using the dot notation for property access.

You could replicate that by using a class expression instead:

'use strict'

var ns = {}

ns.MyClass = class {
  constructor() {
    console.log('in constructor')
  }
}

new ns.MyClass()