【发布时间】:2016-12-03 17:30:30
【问题描述】:
我正在尝试运行我的第一个 React JSX 文件,它可以工作!但是,我的 JSX 中没有包含这两个导入语句:
import React from 'react';
import ReactDOM from 'react-dom';
我认为我需要这两个导入,以便当 JSX 被转译为 JS(React.createElement)时,React 组件将在范围内。但即使没有这两个导入,它似乎也能工作。
如果没有导入,这如何工作?
这是我的代码:
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 文件
<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
module.exports = {
entry: "./app/script.jsx",
output: {
filename: "output.js"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader'
}
]
}
}
【问题讨论】:
-
您可能在
<script>的全局范围内使用该文件。您的项目是如何构建的? -
我的 HTML 文件中有一个脚本标签,例如 。我的项目是使用使用 babel-loader 的 webpack 包构建的
-
react.js的内容是什么?那是 React 库的副本吗? -
好吧,我想我自己找到了。这是因为我在我的脚本标签中包含了 react.js,正如@DorWeid 所指出的那样。所以即使没有导入它也可以工作。谢谢大家,对不起,我很笨!
-
是的,它是 react 库的副本 :-) 这解释了它。对不起,谢谢!
标签: reactjs