react props meaning javascript node.js reactjs webpack babeljs

javascript - props - react router



Reaccionar, babel, paquete web no analizar código jsx (5)

Actualmente estoy usando React 0.14.3. La solución ReactDOM no funcionó, ni tampoco agregó los presets de babel en webpack.config.js. Básicamente, esas soluciones parecen funcionar solo si tienes un solo cargador definido, pero tengo tanto el cargador de babel como el cargador de reacción en caliente.

¿Qué trabajo DID fue instalar el módulo de preselecciones de babel react:

npm install babel-preset-react

y luego cree un archivo .babelrc en el directorio de mi proyecto con lo siguiente:

{ "presets": [''react''] }

Esto está documentado en http://babeljs.io/docs/plugins/preset-react/ , como lo señaló

webpack.config.js

module.exports = { context: __dirname + "/app", entry: { javascript: "./app.js", html: "./index.html", }, resolve: { extensions: ['''', ''.js'', ''.jsx''] }, output: { filename: "app.js", path: __dirname + "/dist", }, module: { loaders: [ { test: //.jsx?$/, exclude: /node_modules/, loader: "babel-loader", }, { test: //.html$/, loader: "file?name=[name].[ext]", }, ], }, }

paquete.json

{ "name": "react-webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel": "^6.0.15", "babel-core": "^6.0.20", "babel-loader": "^6.0.1", "file-loader": "^0.8.4", "webpack": "^1.12.2" }, "dependencies": { "react": "^0.14.2" } }

app / app.js

import React from "react"; import Greeting from "./greeting"; React.render( <Greeting name="World"/>, document.body );

He visto exactamente las mismas preguntas después de buscar, pero ninguna de las respuestas pareció aplicarse a mí. Recibo el siguiente error al ejecutar webpack :

ERROR en ./app.js
La compilación del módulo falló: SyntaxError: path / to / project / react-webpack-project / app / app.js: token inesperado (5: 2)

React.render( <Greeting name="World"/>, document.body );

No estoy seguro de por qué estoy recibiendo este error todavía. Supongo que tiene algo que ver con mi archivo webpack.config.js, pero no el 100% de cuál es el problema.



Esto es ayudarme a resolver ese problema.

cree el nuevo archivo .babelrc en el mismo directorio webpack.config.js. Agregue esto a .babelrc

{ "stage": 2, "env": { "development": { "plugins": [ "react-display-name", "react-transform" ], "extra": { "react-transform": { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] } } } } }


Necesita agregar ajustes preestablecidos a su cargador de babel:

{ test: //.jsx?$/, exclude: /node_modules/, loader: "babel-loader", presets: [''es2015'', ''react''] },

http://babeljs.io/docs/plugins/#presets


Para mí, la respuesta fue incluir los ajustes preestablecidos en el bloque de consulta:

query: { presets: [''react'', ''es2015''] }