Question

我正在使用电子1.5。

在渲染过程中，我尝试了三种不同的反应方式。所有工作，这让我很困惑。谁能解释一下？

我已将反应直接放在window.html

<script src="./node_modules/react/dist/react.js"></script>
<script src="./node_modules/react-dom/dist/react-dom.js"></script>

我已将其从window.html中移除并将其放入window.js

需要（＆＃39;反应＆＃39）;要求（＆＃39;反应-DOM＆＃39）

我已经从window.js和window.html中删除了它，但它仍然有效。

我使用带有es2016预设的Babel来处理以下JSX文件：

（counter.js）

<script src="jsx/Counter.js"></script>

Counter.jsx

class Welcome extends React.Component {
  render() {
    return <h1>Hello Again, {this.props.name}</h1>;
  }
}

class CountWidget extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.value}</h1>
        <button onClick={this.props.onIncrement}>+</button>
        <button onClick={this.props.onDecrement}>-</button>
      </div>);
  }
}

我没有使用任何捆绑商或建筑商，只是巴贝尔。

{
  "version": "0.1.0",
  "name": "index",
  "main": "main.js",
  "license": "MIT",
  "repository": {
    "url": "https://gitlab.draper.com/ysg4206/NodeWork.git",
    "type": "git"
  },
  "dependencies": {
    "jquery": "^3.1.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "redux": "^3.6.0",
    "redux-devtools": "^3.3.2",
    "redux-devtools-extension": "^1.0.0",
    "t7": "^0.3.2"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2016": "^6.22.0",
    "babel-preset-es2016-node5": "^1.1.2",
    "babel-preset-react": "^6.22.0",
    "devtron": "^1.4.0",
    "electron": ">=1.4.15",
    "electron-devtools-installer": ">=2.0.0",
    "electron-packager": "^8.5.1"
  },
  "babel": {
    "sourceMaps": "inline",
    "presets": [
      "react",
      "es2016-node5"
    ]
  }
}

Answer 1

看着太多的Javascript代码，我的眼睛越过了。我正在使用Visual Studio Code，它有插入注释功能（CTRL- /）或SHFT-ALT-A

但是它将javascript样式注释插入到我的HTML文件中

// <script src="./node_modules/react/dist/react.js"></script>
// <script src="./node_modules/react-dom/dist/react-dom.js"></script>

哪个什么都没做。谜团已揭开。非常感谢你们，你们很棒，@ num8er等等。

我将把这个提交给vscode人员。

Answer 2

我认为在您包含库的地方并不重要。您可以使用require("react")，<script src="./path/to/react.js"></script>或导入它。

Answer 3

React.js是一个使用Facebook发明的语言jsx的框架。 react.js实际上是一个编译器，它将jsx编译为纯javascript，不依赖于任何外部库。

有两种方法可以编译jsx。

编译jsx服务器端，它会生成一个独立的js文件，你可以将其包含在你的html中。
出于开发目的，您可以选择在html中包含react.js库，这样可以直接包含jsx文件以在浏览器中编译。由于这会降低页面加载速度，因此不建议在生产时执行此操作。

因为在你的评论中你提到你在html中包含已编译的js文件而不是jsx文件，那么你不需要为React.js包含任何其他工作

电子需要神秘感

3 个答案: