reactjs – 在Electron中使用React&Flux的最低要求是什么？

2023年11月9日 160次阅读

我正在尝试用最少的工具组合反应应用程序.我的电子将加载’hello react’与以下内容：

注意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脚本标签,hello,react不会加载,我在开发控制台或终端中没有错误.这是我的包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一起使用吗？也许是一个没有造型的苗条问候世界的例子？

我已经能够让反应网络应用程序正常工作.而且我已经能够构建一个电子应用程序.但我正在试图使用来自npm的react和flux来构建一个电子应用程序,而不是像我使用Web应用程序那样使用CDN.我错过了什么？

最佳答案 这是最简单的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引用到index.html文件中.

一旦这个工作,你可以专注于让Babel变换工作.您需要使用Babel加载器扩充Webpack配置.

module.exports = {
  entry: './src/app.js',
  // ...
  module: {
    loaders: [
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: { presets: ['es2015', 'react'] }
    ]
  }
};

此时你应该能够将你的app.js文件转换为使用JSX和ES6,而Babel将转换它以便bundle.js可以在Electron中运行.

点赞