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).
Omkar
Updated on July 09, 2022Comments
-
Omkar almost 2 years
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 } };