ecmascript-next

Error: Missing class properties transform Test.js : export class Test extends Component { constructor (props) { super(props) } static contextTypes = { router: React.PropTypes.object.isRequired } .babelrc : { "presets": ["es2015", "react", "stage-0"], "plugins": ["transform-class-properties"] } package.json : "babel-core": "^6.5.1", "babel-eslint": "^4.1.8", "babel-loader": "^6.2.2", "babel-plugin-react-transform": "^2.0.0", "babel-plugin-transform-class-properties": "^6.5.2", "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "babel-register": "

This question already has an answer here: How to use arrow functions (public class fields) as class methods? 4 answers I've started a project where i use React JS for the front end an node js in backend. I used webpack for bundling up JS files. i used babel along with other necessary stuff. When ever i use arrow functions inside a react class it gives a syntax error. like Module build failed: SyntaxError: Unexpected token . But i can use Arrow function in node without any issue. this is my webpack config file import path from 'path'; import webpack from 'webpack'; import 'react-hot-loader

According to this babel documentation, the correct way to use ES6+ with React is to initial components like this: class Video extends React.Component { static defaultProps = { autoPlay: false, maxLoops: 10, } static propTypes = { autoPlay: React.PropTypes.bool.isRequired, maxLoops: React.PropTypes.number.isRequired, posterFrameSrc: React.PropTypes.string.isRequired, videoSrc: React.PropTypes.string.isRequired, } state = { loopsRemaining: this.props.maxLoops, } } But some official examples, like Dan Abramov's own React DnD module, uses ES6+ but still defines state within the constructor:

I'm looking at some ES6 code and I don't understand what the @ symbol does when it is placed in front of a variable. The closest thing I could find has something to do with private fields? Code I was looking at from the redux library : import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'redux/react'; import Counter from '../components/Counter'; import * as CounterActions from '../actions/CounterActions'; @connect(state => ({ counter: state.counter })) export default class CounterApp extends Component { render() { const { counter,

As you know, there is a proposal for a shortcut for .bind() function, so you can write: ::this.handleStuff and it will work like that in es5: this.handleStuff.bind(this) My question is: will it be possible to pass arguments this way? I mean a way of writing this with the aforementioned shortcut: this.handleStuff.bind(this, 'stuff') It's a pretty common pattern in React, so it would be nice to shorten it a little. Bergi No. The bind operator ( spec proposal ) comes in two flavours: Method extraction ::obj.method ≡ obj.method.bind(obj) "virtual method" calls obj::function ≡ function.bind(obj)