Question

我试图用最少的工具组合反应应用程序。我的电子会加载你好反应＆＃39;以下内容：注意react脚本中的链接是错误的，因为stackoverflow不允许使用fb.me

<!DOCTYPE html>
<html lang="en">
<html>
  <head>
    <meta charset="utf-8">
    <title text="">Electron / Reactjs</title>
    <script src="https://fbme/react-15.1.0.js"></script>
    <script src="https://fbme/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  </head>
  <body>

    <h1> Hello electron root</h1>
    <div id="example"></div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, react!</h1>,
        document.getElementById('example')
      );
    </script>

  </body>
</html>

然而，如果我拉出CDN脚本标签，你好，反应没有加载，我在开发控制台或终端没有错误。这是我的包json和我的webpack（都在根目录中）

包json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Template Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "babel": {
    "presets": ["es2015", "stage-0", "react"]
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/jtlindsey/<project-name>.git"
  },
  "author": "J Travis Lindsey",
  "license": "Apache-2.0",
  "bugs": "https://github.com/jtlindsey/<project-name>/issues",
  "homepage": "https://github.com/jtlindsey/<project-name>#readme",
  "devDependencies": {
    "electron-packager": "^7.1.0",
    "electron-prebuilt": "^1.2.5",
    "express": "^4.14.0",
    "file-loader": "^0.9.0",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.12.0",
    "webpack-target-electron-renderer": "^0.4.0"
  },
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "flux": "^2.1.1",
    "react": "^15.1.0",
    "react-dom": "^15.1.0"
  }
}

webpack.config.js

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

由于我不理解的事情，package.json还有更多内容供我使用。我已经看过react electron template，但是我没有足够的文档知道使用反应通量和电子的必要条件以及生产率，快速开发，css等等。

有人可以提供一个完整的示例，说明要添加到基本电子应用程序中以与React和Flux一起使用吗？也许是一个没有造型的苗条hello世界的例子？

我已经能够让反应式网络应用运行起来。而且我已经能够建立一个电子应用程序。但是，我试图使用来自npm的react和flux构建一个电子应用程序，而不是像我使用Web应用程序那样使用CDN。我错过了什么？

Answer 1

这是最简单的React应用程序所需的一切。

<div id="app"></div>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script>
  ReactDOM.render(
    React.createElement('h1', null, 'Hello world'),
    document.getElementById('app');
  );
</script>

一旦有效，然后开始整合您需要的其他部分。

首先将脚本标记移到单独的文件中，然后使用Webpack将其捆绑。

// src/app.js
ReactDOM.render(
  React.createElement('h1', null, 'Hello world'),
  document.getElementById('app');
);

您需要一个看起来像这样的Webpack配置。

// webpack.config.js
module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }
};

运行webpack以构建捆绑包并添加引用bundle.js文件的脚本标记。

一旦这个工作，您可以专注于让Babel转换工作。您需要使用Babel加载器来扩充Webpack配置。

index.html

此时您应该能够将module.exports = { entry: './src/app.js', // ... module: { loaders: [ test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } ] } };文件转换为使用JSX和ES6，而Babel将对其进行转换，以便{1}}可以在Electron中运行。

使用React＆amp; amp;的最低要求是什么？电子中的助焊剂？

1 个答案: