title: Class variables in React with ES6
body: <p>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: <a href="https://codepen.io/swizec/pen/oYNvpQ" rel="noreferrer">https://codepen.io/swizec/pen/oYNvpQ</a></p>
  
  <p>However, I am not able to figure out how can this codepen work with variables declared inside the class without any keywords:</p>
  
  <pre><code>class Colors extends Component {
   colors = d3.schemeCategory20;
    width = d3.scaleBand()
              .domain(d3.range(20));
  
     ....
  }
  </code></pre>
  
  <p>When I try to execute this code, I get the following error:</p>
  
  <pre><code>./app/components/D3IndentedTree/Chloreophath.js
  Module build failed: SyntaxError: Unexpected token (13:11)
  
    11 | // Draws an entire color scale
    12 | class Colors extends Component {
  &gt; 13 |     colors = d3.schemeCategory20;
       |            ^
    14 |     width = d3.scaleBand()
    15 |         .domain(d3.range(20));
    16 | 
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks in advance!</p>
  
  <p>Update: Adding the webpack.config.js file:</p>
  
  <pre><code>    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&amp;mimetype=application/font-woff'
                },
                {
                 test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                 loader: 'url-loader?limit=10000&amp;mimetype=application/octet-stream'
                },
                {
                 test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                 loader: 'file-loader'
                 },
                 {
                 test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                 loader: 'url-loader?limit=10000&amp;mimetype=image/svg+xml'
                }
          ]
      },
      plugins: [new HtmlWebpackPlugin({
          template: 'app/index.html'
      }),
      new webpack.ProvidePlugin({
          "React": "react",
        }),],
      devServer: {
          historyApiFallback: true
      }
  };
  </code></pre>