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
}
};
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.
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.
Now, with ES6, there are three ways of defining your variables: var , let , and const .
React uses ES6, and you should be familiar with some of the new features like: Classes. Arrow Functions. Variables (let, const, var)
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With