web-dev-qa-db-fra.com

mobx + réagir jeton inattendu

j'ai donc créé une application avec React sans configuration depuis https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

J'ai installé mobx et mobx-react, mais montre toujours l'erreur du jeton inattendu avant @ symb.

Dois-je ajouter autre chose ou ma configuration actuelle est incorrecte? :(

package.json

"devDependencies": {
"react-scripts": "0.8.4",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
},
"dependencies": {
"autobind-decorator": "^1.3.4",
"classnames": "^2.2.5",
"lodash": "^4.15.0",
"mobx": "^2.5.1",
"mobx-react": "^3.5.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"validator": "^5.6.0"
 },

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
      "transform-decorators-legacy",
      "transform-class-properties"
  ]
}

Et le code

import React, { Component } from 'react';
import { action, observable } from 'mobx'
import {observer} from 'mobx-react';


class App {
    @observer cake = [];
}

export default new App();
reactjsmobxmobx-react
18
Elīna Legzdiņa

create-react-app ne prend pas en charge les décorateurs (@). Vous pouvez soit éjecter create-react-app pour l'ajouter vous-même, configurer votre propre environnement à partir de zéro ou utiliser quelque chose comme mobx-react-passe-partout comme point de départ.

J'ai personnellement utilisé react-app-rewired avec le mobx extension avec un grand succès.

17
Tholle

Il vous manque des packages après avoir exécuté npm run eject (car create-react-app ne prend pas en charge les décorateurs).

Courir npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

Ajoutez ensuite la configuration Babel suivante à votre package.json

"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
},
9
XPX-Gloom

Vous pouvez utiliser la syntaxe fournie qui n'utilise pas de décorateurs ( ici et ici ).

Voici un exemple utilisant le code de classe App que vous avez fourni:

import React, { Component } from 'react';
import { action, extendObservable } from 'mobx'
import {observer} from 'mobx-react';


class App {
  constructor() {
    extendObservable(this, {
      cake = [],
    }); 
  }
}

export default new App();
6
mwarger