mobx + реакция на неожиданный токен

поэтому я создал приложение с реакцией без конфигурации из https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

Я установил mobx и mobx-react, но по-прежнему показывает ошибку неожиданного токена перед @ Symb.

Мне нужно добавить что-то еще, или моя текущая конфигурация неверна? :(

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"
  ]
}

И код

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


class App {
    @observer cake = [];
}

export default new App();

reactjs mobx mobx-react
person Elīna Legzdiņa    schedule 14.12.2016    source источник
comment
@observer - это декоратор, используемый для ваших компонентов React. Если вам нужны наблюдаемые данные, вы должны использовать декоратор @observable.   -  person Tholle    schedule 14.12.2016
comment
Что бы я ни использовал, когда я использую @ Symb, он тут же останавливается. Так что думаю, что mobx не установлен должным образом   -  person Elīna Legzdiņa    schedule 14.12.2016
comment
О, я неправильно понял. Я думаю, это потому, что приложение create-response-app вообще не поддерживает декораторы (@). Я не думаю, что здесь виноват MobX. Вместо этого вы можете попробовать mobx-react-котел.   -  person Tholle    schedule 14.12.2016
comment
спасибо, попробую;)   -  person Elīna Legzdiņa    schedule 14.12.2016

Ответы (3)


arrow_upward
17
arrow_downward

create-react- приложение не поддерживает декораторы (@). Вы можете либо eject create-react-app, чтобы добавить его самостоятельно, настроить собственную среду с нуля или использовать что-то вроде mobx-react-cabinplate в качестве отправной точки.

Я лично использовал response-app-rewired с < a href = "https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx" rel = "noreferrer"> расширение mobx < / a> с большим успехом.

person Tholle    schedule 14.12.2016
comment
Я создал стартовый комплект с CRNA, который при использовании с nodejs 6.0 отлично работает с декоратором, проектная документация для него доступна по адресу wcandillon.github.io/react-native-do-documentation/docs - person wcandillon; 19.06.2017

arrow_upward
9
arrow_downward

У вас отсутствуют пакеты после запуска npm run eject (поскольку приложение create-response-app не поддерживает декораторы).

Запустите npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

Затем добавьте следующую конфигурацию Babel в свой package.json

"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
},
person XPX-Gloom    schedule 23.01.2018
comment
Я думаю, вы также должны добавить transform-class-properties в массив плагинов Babel. - person Design by Adrian; 03.03.2018

arrow_upward
6
arrow_downward

Вы можете использовать предоставленный синтаксис, который не использует декораторы (здесь и здесь).

Вот пример с использованием предоставленного вами кода класса приложения:

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();
person mwarger    schedule 17.01.2017