Electron 用反应锻造？

Question

Is there any simple way I can setup an app with Electron-Forge and React?有什么简单的方法可以使用 Electron-Forge 和 React 设置应用程序吗？ I am usin the webpack template but don't know what to do to get jsx to work.我正在使用 webpack 模板，但不知道如何让 jsx 工作。 I have the react stuff in renderer.js我在 renderer.js 中有反应的东西

Answer 1

I figured it out,我想到了，

    yarn create electron-app test --template=webpack
    cd test

Then I installed babel with:然后我安装了 babel：

    yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --d

and react with:并做出反应：

    yarn add react react-dom

Created a.babelrc in project root with the following code:使用以下代码在项目根目录中创建了 a.babelrc：

    {"presets": ["@babel/preset-env", "@babel/preset-react"]}

and added the following to webpack.rules.js:并将以下内容添加到 webpack.rules.js 中：

    {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  }

changed renderer.js to renderer.jsx and changed stuff in package.json from this:将 renderer.js 更改为 renderer.jsx 并更改了 package.json 中的内容：

    "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.js",
              "name": "main_window"
            }
          ]
        }
      }

to this:对此：

    "@electron-forge/plugin-webpack",
      {
        "mainConfig": "./webpack.main.config.js",
        "renderer": {
          "config": "./webpack.renderer.config.js",
          "entryPoints": [
            {
              "html": "./src/index.html",
              "js": "./src/renderer.jsx",
              "name": "main_window"
            }
          ]
        }
      }

and finally replaced renderer.jsx with this:最后用这个替换了renderer.jsx：

    import './index.css';
    import React from 'react';
    import ReactDOM from 'react-dom';
    console.log('Loaded React.');
    ReactDOM.render(<div>Test.</div>, document.getElementById('root'));

and replaced index.html with this:并将 index.html 替换为：

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>

Answer 2

1.Create Webpack template using 1.创建 Webpack 模板使用

yarn create electron-app my-new-app --template=webpack && cd my-new-app

2.Install dependencies 2.安装依赖

yarn add --dev @babel/core @babel/preset-react babel-loader

3.Add the following to webpack.rules.js 3.在webpack.rules.js中添加以下内容

 {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },

4.Add React and React-dom 4.添加React和React-dom

yarn add react react-dom

For more details referelectron-forge documentation有关更多详细信息，请参阅电子锻造文档

Electron 用反应锻造？

问题描述

2 个解决方案

解决方案1
14 已采纳 2020-06-20 23:35:09

解决方案2
0 2021-07-21 07:32:48

Electron 用反应锻造？

问题描述

2 个解决方案

解决方案1 14 已采纳 2020-06-20 23:35:09

解决方案2 0 2021-07-21 07:32:48

解决方案1
14 已采纳 2020-06-20 23:35:09

解决方案2
0 2021-07-21 07:32:48