Decorator is not supported!

[HatemJerbi]

Note from maintainers

For people coming to this thread later—if you use MobX or a similar library, you don’t need decorators. They are just syntax sugar in this case.
Learn more: #214 (comment), #411 (comment).
Here is why we don’t include them: #411 (comment).

we can not use library like mobx (@observer,@observable).
to fix this :

• babel stage-1
• babel "transform-decorators-legacy" plugin

[ForbesLindesay]

Decorators are still in the very early stages of standardisation. The behaviour of them could change rapidly, without warning. Users of decorators need to be willing to adapt fast, and therefore aren't the main target for create-react-app. I don't think we should be including them in this project at this time.

I do think we should look into supporting customisation of the babel, eslint and webpack configs in some way, but that's a larger discussion.

[eanplatter]

We are holding off decorators until babel supports them out of the box, for more info check out #107

[gaearon]

You can use MobX without decorators.

[kevinejohn]

@gaearon Don't you have to use the old React.createClass method if you do not use decorators though? It changes a lot of the code structure in your components (No constructor(), commas after every method, etc...) :-/

Would be great to be able to use create-react-app without ejecting to set babel decorator support.

var MyComponent = observer(React.createClass({ ...

https://mobxjs.github.io/mobx/best/syntax.html

[gaearon]

No, you can do this just fine:

const MyComponent = observer(class MyComponent extends React.Component {
    render() {
        // Warning: don't use {this.onButtonClick.bind(this)} or {() => this.onButtonClick} !
        return <button onClick={this.onButtonClick}>Hi</button>
    }

    onButtonClick = (e) => {
        // bound function
    }
})

[kevinejohn]

That works. Thank you!

I'm really surprised the mobx documentation never mentions this solution considering decorators are still experimental and not enabled by default in babel. I'll have to send them a pull request.

[mxstbr]

cc @mweststrate, I talked to him about this when we met at RuhrJS and he said he planned to remove the decorator syntax from the docs!

[mweststrate]

For people stumbling into this in the future, here is a small create-react-app based repo with MobX, without decorators:

https://github.com/mobxjs/create-react-app-mobx

@mxstbr well, not removing, but make it very clear it is optional :)