Class variables in React with ES6
But how come then the code pen is working?
Because it's using a transpiler (in that case, Babel) that supports that syntax (which is currently a Stage 3 proposal, not a specified feature [yet], but is commonly supported by transpilers used with React code).
You can see that it's transpiling with Babel because it says "(Babel)" next to "JS" in the JS pane's header:
...and if you click the gear icon next to it, you'll see Babel selected as the "Preprocessor".
In this particular case, Babel takes this:
class Colors extends Component { colors = d3.schemeCategory20; width = d3.scaleBand() .domain(d3.range(20)); // ....}...and makes it as though it had been written like this:
class Colors extends Component { constructor() { this.colors = d3.schemeCategory20; this.width = d3.scaleBand() .domain(d3.range(20)); } // ....}...(and then might well turn that into ES5-compliant code, depending on the transpiling settings).