2016-12-03 19 views
2

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

+1

Sie verwenden die Datei wahrscheinlich in einem globalen Gültigkeitsbereich mit '. Mein Projekt wird mit einem Webpack-Bundle erstellt, das babel-loader verwendet. – InfiniteLoop

+1

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

Antwort

3

Es liegt daran, dass ich react.js in mein Skript-Tag aufgenommen habe, wie @DorWeid darauf hingewiesen hat. So funktioniert es auch ohne den Import. Danke allen und tut mir leid, dumm zu sein!