reactjs babel

reactjs - Token inesperado ''='' en React Component



babel (2)

¿Me estoy perdiendo un cargador posiblemente? Pensé que se suponía que debíamos usar estas funciones ES6 en los cuerpos de los componentes para evitar tener que hacer la .bind(this) reaccionar documentos

ERROR in ./client/admin-side/components/Form.jsx Module build failed: SyntaxError: Unexpected token (15:17) 14 | > 15 | handleChange = (event) => { | ^ 16 | this.setState({value: event.target.value}) 17 | }

Mi .babelrc tiene lo siguiente:

{ "presets": ["env", "react"], "plugins": ["transform-object-rest-spread"] }

y estoy usando babel-loader para documentos js / jsx


no puede agregar preajuste de etapa 0

{ "presets": ["env", "react", "stage-0"], "plugins": ["transform-object-rest-spread"] }

y no te olvides de correr

yarn add babel-preset-stage-0


transform-class-properties plugin usar el transform-class-properties plugin para usar los campos de clase, puede instalarlo como

npm install --save-dev babel-plugin-transform-class-properties

y úsalo como complemento

{ "presets": ["env", "react"], "plugins": ["transform-object-rest-spread", "transform-class-properties"] }

transform-object-rest-spread se usa para la sintaxis de propagación de descanso que es como

const {a, b, ...rest} = this.props

De acuerdo con la documentation :

Esto presenta dos propuestas relacionadas: "class instance fields" y "class static fields" .

"Class instance fields" describen propiedades destinadas a existir en instancias de una clase (y opcionalmente pueden incluir expresiones de inicializador para dichas propiedades).

"Class static fields" son propiedades declarativas que existen en el propio objeto de clase (y opcionalmente pueden incluir expresiones de inicializador para dichas propiedades).

Esta propuesta se encuentra actualmente en la Etapa 2 .

También puede resolver esto utilizando la etapa 2 preestablecida instalando

npm install --save-dev babel-preset-stage-2

y usándolo como

{ "presets": ["env", "react", "stage-2"], "plugins": ["transform-object-rest-spread"] }