Class variables in React with ES6

Question

This question might have been answered somewhere else, but before marking as duplicate, please help me with it. I am referring to the following codepen using react and d3: https://codepen.io/swizec/pen/oYNvpQ

However, I am not able to figure out how can this codepen work with variables declared inside the class without any keywords:

class Colors extends Component {
 colors = d3.schemeCategory20;
  width = d3.scaleBand()
            .domain(d3.range(20));

   ....
}

When I try to execute this code, I get the following error:

./app/components/D3IndentedTree/Chloreophath.js
Module build failed: SyntaxError: Unexpected token (13:11)

  11 | // Draws an entire color scale
  12 | class Colors extends Component {
> 13 |     colors = d3.schemeCategory20;
     |            ^
  14 |     width = d3.scaleBand()
  15 |         .domain(d3.range(20));
  16 |

I am not able to figure out why am I getting this error. I understand that you cant declare variables/properties of class directly inside the class. But how come then the code pen is working?

Thanks in advance!

Update: Adding the webpack.config.js file:

    var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            { test: /\.(js)$/, use: 'babel-loader' },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
            {
                test: /\.png$/,
               loader: "url-loader?limit=100000"
             },
             {
               test: /\.jpg$/,
               loader: "file-loader"
             },
             {
              test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader? limit=10000&mimetype=application/font-woff'
              },
              {
               test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
              },
              {
               test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'file-loader'
               },
               {
               test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
               loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
              }
        ]
    },
    plugins: [new HtmlWebpackPlugin({
        template: 'app/index.html'
    }),
    new webpack.ProvidePlugin({
        "React": "react",
      }),],
    devServer: {
        historyApiFallback: true
    }
};

T.J. Crowder · Accepted Answer · 2018-01-28 18:38:16Z

16

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).

edited Jan 28, 2018 at 18:38

answered Jan 28, 2018 at 18:23

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

7 Comments

Omkar Over a year ago

Thanks a lot @T.J.Crowder for the answer and quick response. I will look into integrating babel asap.

Omkar Over a year ago

Crowder, However, I tried to add babel-loader. In fact it already had. Still doesnt seem to compile. Re-editing the question

T.J. Crowder Over a year ago

@Omkar: Note that you need the correct plugin. Babel is the infrastructure, the plugins do the actual work.

Omkar Over a year ago

@T.J.Crowser, thanks for the information. Also, you are correct. I was missing the stage-0 plugin to convert the syntax to es5. Adding that preset worked. Thanks again.

T.J. Crowder Over a year ago

@Omkar: No worries. I would strongly recommend against using the stage-0 plugin. I wouldn't rely on anything that wasn't at least Stage 3, and even with Stage 3 I'd be picking and choosing.

|

Collectives™ on Stack Overflow

Class variables in React with ES6

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related