Ich versuche, meine erste Reaktion jsx-Datei auszuführen, und es funktioniert! Allerdings habe ich nicht die 2 Import-Anweisungen in meiner Jsx codiert.reactJS import Reagieren von 'reagieren';
import React from 'react';
import ReactDOM from 'react-dom';
Ich dachte, ich so diese 2 Importe benötigen, wenn JSX zu js transpiles (als React.createElement), das Reagieren Komponente im Gültigkeitsbereich befindet. Aber es scheint auch ohne diese 2 Importe zu funktionieren.
Kann jemand mir helfen, zu verstehen, wie es ohne die Importe funktioniert?
Danke für Ihre Hilfe!
EDIT: Ich habe meinen Code hier hinzugefügt
script.jsx:
var Main = React.createClass({
getIntialState: function() {
return {
counter: 0
};
},
clickHandler: function() {
return {
counter: this.state.counter + 1
};
},
render: function() {
return (
<button onClick={this.clickHandler}>+2</button>
)
}
});
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "",
"main": "react.js",
"dependencies": {
"webpack": "^1.13.3"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"react": "^15.4.1",
"react-dom": "^15.4.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --watch",
"build": "webpack -p"
},
"author": "",
"license": "ISC"
}
HTML-Datei
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="output.js"></script>
</body>
</html>
webpack.config .js
Sie verwenden die Datei wahrscheinlich in einem globalen Gültigkeitsbereich mit '. Mein Projekt wird mit einem Webpack-Bundle erstellt, das babel-loader verwendet. – InfiniteLoop
Gibt es eine Chance, dass Sie ein reproduzierbares Beispiel erstellen können (siehe [mcve]), damit es klarer ist oder genau erläutert, wie Ihr Setup funktioniert? – Aurora0001