Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Class variables in React with ES6

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
    }
};
like image 832
Omkar Avatar asked Jan 28 '18 18:01

Omkar


People also ask

Can we declare variable in class component React?

Static variables can be used within React classes, just like other different kinds of variables can access it. Still, the difference is that the scope of the variables can be modified for static variables, and it cannot be modified. For example, if you use a static or fixed value, it can be declared and used.

What is ES6 class in React?

ES6 introduced classes. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class , and the properties are assigned inside a constructor() method.

How many ways can you define variables in ES6?

Now, with ES6, there are three ways of defining your variables: var , let , and const .

Does React support ES6?

React uses ES6, and you should be familiar with some of the new features like: Classes. Arrow Functions. Variables (let, const, var)


1 Answers

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:

enter image description here

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

like image 97
T.J. Crowder Avatar answered Oct 21 '22 23:10

T.J. Crowder