Электронная кузница с реакцией?

Есть ли простой способ настроить приложение с помощью Electron-Forge и React? Я использую шаблон webpack, но не знаю, что делать, чтобы jsx заработал. У меня есть реакция в renderer.js


node.js javascript electron-forge
person I'veGotRoot    schedule 20.06.2020    source источник
comment
Это помогает? ankitbko.github.io/2019/08/ < / а>   -  person Harmandeep Singh Kalsi    schedule 20.06.2020
comment
Ну, я не хотел использовать машинописный текст и разобрался.   -  person I'veGotRoot    schedule 21.06.2020

Ответы (2)


arrow_upward
14
arrow_downward

Я понял,

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

Затем я установил babel с помощью:

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

и отреагируйте с помощью:

    yarn add react react-dom

Создал .babelrc в корне проекта со следующим кодом:

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

и добавил в webpack.rules.js следующее:

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

изменил 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"
            }
          ]
        }
      }

к этому:

    "@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"
            }
          ]
        }
      }

и, наконец, заменил 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'));

и заменил index.html на это:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    
      </head>
      <body>
        <div id="root"></div>
      </body>
    </html>
person I'veGotRoot    schedule 20.06.2020
comment
Я следил за вашим кодом, и он работает. Однако, когда я добавляю подкомпоненты и импортирую (т.е. импортирую Test из ./test; он не разрешает модуль, пока я не добавлю .jsx. Была ли у вас такая же проблема? - person Greg; 11.04.2021
comment
@Greg У меня такая же проблема. Вы нашли какое-нибудь решение для того же? - person Sathishkumar Rakkiasamy; 21.07.2021

arrow_upward
0
arrow_downward

1.Создайте шаблон Webpack, используя

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

2.Установить зависимости

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

3. Добавьте следующее в webpack.rules.js

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

4.Добавьте React и React-dom

yarn add react react-dom
person Sathishkumar Rakkiasamy    schedule 21.07.2021